Links

How to configure Custom Swatch Color to your store?

This is a significant option. If you haven't customized it yet, your Swatch color will show nothing everywhere (Product page, Collection page, etc.). This is an example from the Product page.
If you have used Kalles for a long time. You can easily realize that in Kalles version 2.x.x, we use the Theme section to set color and we use a Child theme ( Only_config-color) to add color for Swatch color. However, there is a limitation for each way, such as you are limited to the number of colors in your store (over 200 colors). And it's a bit difficult for you to use Child theme for a store that uses only some basic colors (less than 200 colors).
Therefore, in Kalles 4, we decided to integrate both ways for 2 cases: Over 200 colors and Less than 200 colors.

1. Regular cases (Less than 200 colors)

You only need to use Theme section to add Swatch color in this case. From Theme custom > Scroll down to Custom Color:
These are steps for you to customize for Swatch Color.
Step 1: From the Left sidebar > Scroll down to Custom Color.
Step 2: Add Block > Swatch Color.
Step 3: Fill color name, Upload an image/ Choose color for it.
Step 4: Copy CSS Code > Then, go to Edit code > Find a file named Color.CSS > Paste the CSS code that you have copied.
Let's stick to this video to figure it out:
But if you stop at this step, the Swatch color is only shown right on the backend. Please do the final step below:

2. More than 200 colors

Since Kalles 2.3.1, we will provide a child theme called Only Config color by The4, this theme has only one function is to allow you to add more custom colors.
  • Step 1: To start, please upload this theme to the store and DO NOT PUBLISH it.
Go to Customize and you will see this theme only have one section
Each section you can add maximum 200 custom colors
So to explain in a way that before Kalles had only one custom color section and maximum 200 custom colors added, now Kalles can add up to 25 sections and each section can add up to 200 custom colors. That means you can add up to 5000 custom colors, isn't that great?
  • Step 2: After adding the custom colors, you can Click on Copy CSS Code.
  • Step 3: From your main Kalles theme.
Note: Make sure you enabled Custom CSS Color.
Step 4: Go to Edit Code and open colors.css.
Open Colors.css file
The custom CSS code will be like this
This means that after you add 200 Blocks in the Custom Color Section and copy - paste the custom CSS code into the colors.css file and you want to continue adding other colors just repeat this process by adding more new Custom Section Color and continue adding values, then paste the new CSS after the old CSS of the previous Section.

[Private offer] Kalles Partner Plan

Don't have to be tech-savvy, you surely can create your powerful and eye-catching store with EComposer - Visual Page Builder app (Our free add-on for Kalles):
  • FREE 100% lifetime (save you $150 annually)
  • Build any essential Shopify pages & Landing page, Sales Funnel Page, Lead pages, etc. tailored for your marketing campaigns, ads.
  • Create advanced sections & add to Kalles with ease
  • Anyone can build pages with live drag-drop editor
  • Publish up to 15 pages
  • 24/7 livechat support
Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for FREE.
Cheers, The4.
​