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
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.
