Custom color
This section allows customers to customize color for product variants, menu labels and product custom labels. You can go to the Sections Sidebar > Custom Color and configure it.
From your main Kalles theme, please go to Theme Settings > Custom CSS, JS section, make sure you have ticked on the Use colors custom css checkbox. You have to turn on this option to use the Custom Color section.
When a product has color variants such as RED, BLUE, YELLOW ... then these are primary colors and already available but if the names are flexible colors like BRIGHT RED or PINK CLAY, they are not identified and have grey coloration, the same as in this image below:
You must use custom color to customize the color you want. You can do the same with these steps below:
First, in the Custom Color section > Add Swatch Color block.
You can configure the custom colors for products, then you can click on the Green button: COPY CSS CODE to copy the style that you just configured done. Please follow this video below for details:
Second, click Theme actions > Edit code > Open Colors.css file.
You can remove the default code of this file > Paste the CSS code that you just copied here. Please see this video below for details:
Three, you can go back to the product page and see the result.
This helps you to custom color for the label menu.
You can do as these steps below:
First, in the Custom Color section > Add Label menu color block.
You can configure the custom colors for products, then you can click on the Green button: COPY CSS CODE to copy the style that you just configured done. Please follow this video below for details:
Second, click Theme actions > Edit code > Open Colors.css file.
You can remove the default code of this file > Paste the CSS code that you just copied here. Please see this video below for details:
Three, you can go back to the preview link and see the result.
Note: If you want to add label for the menu, you should add the content as this syntaxName menu[label_Name label]
You want to display the different tags on the different Products. Don't worry, just need to do as these steps:
In Shopify backend, go to Settings > Metafield > Products and then click the Add definition button to add Metafield definition.
You need to configure some options below:
- Name: You can add the name that you wanna show for the Metafield Custom Badge here. Example: I added the field Name is theme custom badge.
- Namespace and key: You have to add theme.custom_badge key here. This is a required option, if you do not add theme.custom_badge key here, the Metafield Custom Badge cannot work.
- Description: You can add the Description for the Metafield Custom Badge here. In addition, this is not a required option, so you can choose to add a Description or not.
- Select Content Type: Please choose the content type: Text > Single line text or Multi-line text. This is a required option, if you do not choose the content type: Text here, the Metafield Custom Badge cannot work correctly.
You guys can configure following my image below:
Then click Save button to save all changes, we will get the metafield definition as image below:
In Shopify backend, go to Products > All Products option and open the product that you wanna add the Custom Badge. Then, In the product, please scroll down to the bottom of the page, you will see the Custom Badge metafield option. Kindly follow the video below:
First, in the Custom Color section > Add Label product custom block.
You can configure the custom colors for labels, then you can click on the Green button: COPY CSS CODE to copy the style that you just configured done. Please follow this video below for details:
Second, click Theme actions > Edit code > Open Colors.css file.
You can paste the CSS code that you just copied here. Please see this video below for details:
Three, you can go back to the product page and see the result.
Exclusively for Kalles users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:
- FREE 100% EComposer Standard plan for 6 months (save you $114)
- Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
- Create advanced sections & add to Kalles with ease
- Save up to 50 pages/sections
- 100+ professional, stunning pre-designed templates
- Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free
Cheers,
The4.