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.
Let's stick to this video to figure it out:
Step 4: Copy CSS Code > Then, go to Edit code > Find a file named Color.CSS > Paste the CSS code that you have copied.
Step 5: Go to Theme settings > Custom CSS, JS > tick on "Use colors custom css"
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.
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.
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] EComposer Partner Plan
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.
Last updated
