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.
1. How to use Custom Color
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. 
2. Swatch Color 
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.
3. Label Menu Color
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 syntax
 Name menu[label_Name label]
4. Label Product Custom 
You want to display the different tags on the different Products. Don't worry, just need to do as these steps: 
Step 1: Config Metafield in Shopify Dashboard
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:
Step 2: Configure Metafield in Shopify Dashboard > Products
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:
Step 3: Label Product Custom
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.
[Private offer] Kalles Partner Plan
Don't have to be a tech-savvy, you surely can create your powerful and eye-catching store with EComposer - Visual Landing Page Builder app - Our free Add-on for Kalles 4.
No more code headaches - FREE 100% lifetime (save your $150 annually) - delicate support.
Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for FREE.
​

GENERAL SECTIONS - Previous

Carousel Color Config

Next - GENERAL SECTIONS

Image Gallery Packery

Last modified 11d ago

Copy link

Outline

1. How to use Custom Color

2. Swatch Color

3. Label Menu Color

4. Label Product Custom

[Private offer] Kalles Partner Plan