Open Store Free
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket

Kalles Shopify Theme

home/Documentation/Kalles Shopify Theme
Popular Search:Import demo, Update theme, Custom color
  • 1. GREETING
  • 2. CHANGELOGS
  • 3. INSTALLATION
    • How to get Instagram Access Token
    • How to update the theme?
    • Import Demo
    • Recommend Shopify App
    • Some Basic Before Using Theme
    • Upload Theme
  • 4. RECOMMEND APPS
    • Facebook Messenger - Live Chat
    • Flash Search
    • Growave
    • LayoutHub
    • Loox
    • ReCharge
    • Ryviu
    • Slider Revolution 6
  • 5. UPDATE THEME
    • How to update the theme between versions 3.x.x
    • What is new in version 3.0
  • 6. PRODUCT PAGE
    • Advance Product Type
    • Back in stock notification (Notify me form)
    • Brand Image (Vendor Image)
    • Configure Metafield on Kalles 3.x - supported OS 2.0
    • Configure Product 3D, AR models
    • Configure Size Guides for Products on Kalles ver 3.x.x
    • Configure Submenu Labels and Custom Product Labels
    • Configure the notice: "Will not ship until..." for Pre-order product
    • Configure variant images for product in Shopify dashboard
    • Configure variant on the Product page
    • Frequently Bought Together
    • Product Description sidebar with Collapsible tabs
    • Product Summary option
      • Configure Product Summary - Blocks Content
      • Configure Product Summary - Settings
    • Use the Custom HTML with Metafields in the Description Product tab
  • 7. COLLECTION PAGE
    • Filter by Product Options
    • Filter by Tags
  • 8. THEME SETTINGS
    • Cart & Search Widgets
    • Checkout
    • Collection Page
    • Custom CSS, JS
    • Favicon
    • General Settings
    • Group Variants Image
    • Header
    • Header Configuration
    • Language, Currency
    • Layout
    • Logo Header
    • Other settings
    • Product Item Settings
    • Product Page Settings
    • Recommendation Pop-up Add to Cart
    • Social Media
    • Style and color
    • Typography
  • 9. THEME SECTIONS
    • About us
    • Banner
    • Banner Custom
    • Banner Custom 2
    • Collection Banner
    • Collection Grid
    • Collection List
    • Collection list
    • Collection List Manual
    • Collection List Packery
    • Collection Slider
    • Custom HTML
    • Custom Liquid
    • Custom Section
    • Custom Section 2
    • Daily Deal Of The Day
    • Gallery
    • Image with text
    • Image With Text Overlay
    • Packery Collection
    • Packery Collection Manually
    • Promo Text
    • Rich text
    • Search Section
    • Shipping Text Simple
    • Store Information
    • Tab Collection
    • Tab Collection Slider
    • Testimonials
    • Text Columns with Images
  • 10. SECTIONS
    • Age verification popup
    • Blog Manual
    • Blog Posts
    • Brand List
    • Configure Product Quickview
    • Cookie Law Info
    • Exit Product Popup
    • Footer bottom
    • Footer top
    • Mobile menu & Mobile Categories
    • Newsletter popup
    • Sales popup
    • Shopping Cart Widget
    • Sticky Toolbar Mobile
    • Text Columns with Images 2
  • 11. BLOG
    • Default Blog
    • Filter by Tag for Blog
    • Portfolio Configuration
  • 12. THEME FAQs
    • Change currency format on Checkout Page
    • Countdown timer & Design images option for all sections
    • Custom HTML code for Size Guide page
    • How to change title "Product" to other words on "Collections/All" page?
    • How to configure custom colors swatch for your store?
    • How to enable/ disable Terms & Condition checkbox on Cart sidebar/ Cart Page?
    • How to enable/disable "Shipping calculated at checkout"?
    • Trick, Helpful Custom CSS
  • 13. MAIN NAVIGATION
    • Configure Megamenu on Kalles 3.x (New Type block)
  • 14. VARIANT CONFIGURATION
    • Configure different ID for Product Variants
    • Configure product Grouped
    • Configure Variant on loop & Collection page
  • 15. PAGES
    • About us

Configure Submenu Labels and Custom Product Labels

630 views 2 December 16, 2021 Updated on December 24, 2021 Kate

In Kalles version 2.x, the Swatch, Label, Submenu option is available, allowing customers to add custom variant colors for product and submenu labels. This option, however, is limited to a maximum of 200 custom color variants. And many customers want to add more than 200 custom colors, but in the past, they had to pay a fee to do so. As a result, we updated the theme in Kalles 3.x to allow customers to customize it themselves. You can do so by following the steps outlined below.

1. Install the Child Theme and Enable Colors CSS option

You guys need to install the Child Theme and enable the Colors CSS option first, before configuring Submenu Labels and Custom Product labels.
Why do we need to install and use a child theme?
It’s because Shopify 2.0 only allows adding a maximum of 16 blocks for each section.

Kindly follow this article: https://help.the4.co/docs/theme-faqs/add-more-than-200-custom-colors-for-products/

2. Configure Submenu Labels

2.1. Configure Submenu labels in Navigation

  • Step 1: From Shopify Admin > Online Store > Navigation.
  • Step 2: You can create a new Menu or Edit an existing Menu. If you are creating a new Menu, click on Add Menu > Add menu item > Enter name with [bagde_submenu label]. If you are editing an existing Menu, click on the Menu that you want > Edit > Add [bagde_submenu label]. For example, Demo2[badge_Hot], Demo3[badge_Coming soon].
  • Step 3: Click Save button.

Let’s watch this video to get detailed instructions for both creating submenu labels for new menus and existing menus.

2.2. Configure background color for Submenu labels

Step 1: In the Shopify Backend > Child theme – Only configure Custom color > Click Customize button > Custom Color section > Add Block button > Add Label Menu Color block:

Step 2: After adding the Submenu Lable, you will get the label that looks like the image below:

Step 3: After configuring all Submenu labels that you wanna show on the Megamenu, please click on the COPY CSS CODE button to copy all Custom styles that you just configure.

Step 4: In your main theme, go to Customize > Edit code > Search for “Colors” string > In Assest folder > Open the Colors.css file

If you configure the Custom color in the first time. please remove all previous code of the Colors.css file.

Step 5: Paste the custom CSS code that you just copied to Colors.css file.

Last but not least, Please go to Preview to see the color of the Submenu labels that you just configured.

3. Configure Custom Product Labels

3.1 Configure Product labels in Products

Kalles theme already has “Sale”, “New” and “Sold out” labels for products. Regarding the “New” label, it will automatically turn off after a limited number of days. Go here (section 9) to get more information.

This section is for you to create a “New” label and other labels without any time limit (you can set the names for them freely).

  • Step 1: From Shopify Admin > Products > click on Filter products and Search the product that you want to add a label.
  • Step 2: from Right Sidebar, navigate to Tags and enter “badge_label”. For example: badge_Coming soon, badge_2022 trend, etc…
  • Step 3: Click Save button.

Let’s watch this video to get detailed instructions for creating product labels:

3.2. Configure background color for Product labels

Step 1: In the Shopify Backend > Child theme – Only configure Custom color > Click Customize button > Custom Color section > Add Block button > Add Label Menu Color block:

Step 2: After adding the Submenu Lable, you will get the label that looks like the image below:

Step 3: After configuring all Submenu labels that you wanna show on the Megamenu, please click on the COPY CSS CODE button to copy all Custom styles that you just configure.

Step 4: In your main theme, go to Customize > Edit code > Search for “Colors” string > In Assest folder > Open the Colors.css file

If you have the custom CSS code already, please paste the code you just copied below the previous code in the Colors.css file.

Step 5: Paste the custom CSS code that you just copied to Colors.css file.

Last but not least, Please go to Preview to see the color of the Submenu labels that you just configured.

Was this helpful?

2 Yes  No
Copyright 2021 the4.co. All Rights Reserved.
Popular Search:Import demo, Update theme, Custom color