A user encountered issues implementing color swatches in the Kalles Shopify theme, which requires a complex three-step process: adding colors to metafields, creating swatch blocks in the theme editor, and copying generated CSS to colors.css.
Initial Problems:
Solution Found:
The Kalles theme (and other the4 themes) includes a separate “color config” theme file that must be uploaded (but not published) to add unlimited custom colors. This workaround resolves the block limit issue.
Outcome:
While the user solved the problem, they noted the process remains time-consuming due to repetitive steps. A community member suggested an alternative app (Easify Product Options) that simplifies color swatch management without coding, metafields, or block limits.
Hello,
I can’t understand why they made this so complicated but i figured it out.
to add a color swatch i have to first add it to the color meta field, then in the theme editor i have to add a swatch color block for each color, name it (again) and connect the color dynamic source to the color name.
then i have to copy the css code produced to the colors.css.
this worked for the first 20 colors, then after that the rest of the colors appear gray.
What is the problem here?
Thanks!
Update: i found the problem in the generated CSS code
some colors have values, others dont, for example this is teal blue
bg_color_teal-blue {–t4s-bg-color: #197c91;}
this is mocha beige bg_color_mocha-beige {}
How do i fix this?
Update 2:
Figured out the problem, shopify only allows 16 blocks per section, so all the colors after the 16th color would not work, so i need to create another “custom color” section and add the remaining colors to it, but i can’t find a way to add this section anywhere.
Solved.
Kalles (and other the4 themes) have a theme file that you upload like a theme (but do not publish it) called color config, in that one you can add as much custom colors as you want.
But still this is time consuming, you to do something 3 times.
Hi @Curinom
Yeah, that setup does sound way more complicated than it needs to be 
If you’d prefer a much easier way to add and manage color swatches—without dealing with metafields, theme editor blocks, or CSS—you can give Easify Product Options a try. It lets you create custom color swatches for free, and the setup only takes a few clicks. No coding. No limits like the 20-color issue you mentioned. Just a smoother way to get things done. Here’s how it works:
Then you can apply the options to multiple products manually or based on conditions:
Easify is super easy to use and perfect for products with multiple options like yours. Plus, if you ever need a hand, our 24/7 live chat support is always here to help—feel free to reach out anytime! 
