Techiepugs
Open the tools Theme guides

Color swatch guide

How to add color swatches to the Kalles theme.

Kalles is a paid theme by The4, sold on ThemeForest for $89 (regular license, Envato's buyer fee included, checked October 23, 2026) rather than in the Shopify Theme Store. Kalles 5 shows native swatches through the Shopify Metaobject Color and a Variant Picker block on the product page. The newest Kalles 5 changelog entry we found was 5.4.2, from May 22, 2026.

Checked Kalles theme profile

Which route fits Kalles?

Route 1

Shopify's native swatches.

  1. Give each product a category

    In Products, open a product and choose the most specific match in the Category field. Categories come from Shopify's Standard Product Taxonomy, and picking one adds that category's attributes to the product as category metafields. You want a category that lists Color (or a color attribute such as Frame color or Band color). If Color is missing under Category metafields, try a narrower category.

  2. Add the colors you sell

    Under Category metafields, open Color and select every color your variants come in. Each color is a reusable entry. You can rename an entry, set its exact hex value or upload a pattern image later in Content > Metaobjects, and the change shows everywhere that entry is used.

  3. Link the Color option to the metafield

    In the Variants section, add an option and pick Color from the suggestions so its values come from the entries you just chose. If the product already has a Color option, open it, use the connect icon beside the option name and choose the Color category metafield. Swatches only appear for options linked this way, so do this on every product you want swatches on in Kalles.

  4. Add the Variant Picker block

    In the theme editor, open the product page and, in Main product, add the Variant Picker block if it isn't there already.

  5. Set the color selector type

    In the Variant Picker block, set Color selector type to the swatch style you want. The4's docs connect it to the Shopify Metaobject Color from the steps above.

  6. Product cards: not documented

    The4's swatch article we read covers the product page. Kalles also has its own Color Swatch section; check the collection settings, and see Collection pages below.

  7. Check it on a real product page

    Save, then open a product in a private browser window and on your phone. Click each swatch and confirm the price, photo and stock message change with it. If Kalles shows plain text buttons instead, go back to the linking step: the option is probably not linked to the Color category metafield yet.

Route 2

A swatch app.

The theme's own swatches cover the product page. Rubik Variant Images & Swatch lists ThemeForest themes under Works with, GLO Color Swatch Variant Image adds collection-page swatches, and OP Color Swatch Variant Images restyles the picker.

  1. Duplicate Kalles first

    In Online Store > Themes, open the menu beside Kalles and choose Duplicate. Set up the app on the copy, preview it, and publish the copy only when the swatches look right. Your live store keeps working while you test.

  2. Install the app and start its trial or free plan

    Install the app from the Shopify App Store and approve the access it asks for. Every app suggested on this page had a free plan, a free listing or a free trial of 7 to 30 days when we checked on October 23, 2026, so you can test before you pay.

  3. Switch on the app embed

    Open the theme editor on your copy (Online Store > Themes, then Customize or Edit theme), click the App embeds icon in the left sidebar, switch on the app's embed and click Save.

  4. Match each color name to a swatch

    In the app's own settings, give each color name a hex value or a small image. Apps read your option values as text, so Navy on one product and Navy Blue on another need two swatches. Tidy the names first and you only set each color once.

  5. Avoid two sets of swatches

    If the app draws its own swatches, remove the swatch style from the Variant Picker block in Kalles.

  6. Preview a product page and a collection page

    Use the theme editor preview, then a phone, to check both page types in Kalles. If the app adds collection-page swatches, click one on a product card and confirm the card's photo or link changes to that color.

Apps that fit Kalles

Swatch apps for Kalles, from each App Store listing on October 23, 2026
AppFromRatingWhat it does
Rubik Variant Images & Swatch $25/month 5.0 (495 reviews) Best known for showing only the selected color's photos, with swatches included and ThemeForest themes named under Works with, but paid plans start at $25 a month.
GLO Color Swatch Variant Image $9.90/month 4.9 (1,906 reviews) A dedicated swatch app whose free plan already covers collection-page swatches and hiding sold-out options; image swatches start on the $9.90 Silver plan.
OP Color Swatch Variant Images $11.90/month 5.0 (802 reviews) Replaces your theme's text picker with color and image swatches plus stock badges; pricing follows your Shopify plan, from $11.90 a month.

Prices and ratings change often; check the listing before you install. This site is not affiliated with any of these publishers.

Alternatives: Swatchy (Color Swatches) and FB Variant Image, Color Swatch both have free options, and Color Swatch Pug covers collection pages. None of these listings names ThemeForest themes except Rubik's (checked October 23, 2026).

Route 3

Editing the theme code.

You don't need to edit code for swatches in Kalles. Kalles 5 reads the Shopify Metaobject Color through its Variant Picker block.

Collection pages.

Product card swatches from native data aren't documented for Kalles in the article we read. The theme's own Color Swatch section, filters or an app can fill the gap.

  1. Add color filters with swatches (optional)

    Open the Search & Discovery app, go to Filters > Add filter, choose Color with the type Category metafield, then open Manage values and turn on Include swatch. For patterns, turn on Use images when available so the filter shows each entry's image.

  2. Or add an app for card swatches

    GLO Color Swatch Variant Image lists collection-page swatches on its free plan. Test on a duplicate of Kalles first.

Kalles at a glance.

The theme's facts from the Shopify Theme Store and The4's documentation, checked October 23, 2026. Anything we could not confirm says so.

Full Kalles profile Check images against Kalles' sizes
Kalles: theme facts
Theme Kalles
Vendor The4
Price $89 ThemeForest regular license, including Envato's buyer fee, checked October 23, 2026. Prices on ThemeForest can change without notice.
Free or paid Paid
Where it is sold Sold on ThemeForest
Status Current theme
Online Store 2.0 Yes
Current version 5.4.2 (May 22, 2026)
Native color swatches Yes
Variant picker block Variant Picker
Swatch setting Assign a product category and a Color option (Shopify Metaobject Color), then Theme editor > Product page > add the "Variant Picker" block; swatch type: Product page > Main product > Variant picker > Color selector type
Swatches on product cards No setting documented
Swatch documentation The4's documentation
Last checked October 23, 2026

Swatch problems on Kalles, and fixes.

  • Swatches not showing

    Work through three checks in order: the product has a category that includes Color, its Color option is linked to the Color category metafield, and the swatch setting is on in Kalles. In Kalles, check the Variant Picker block is in Main product and that the product has a category and a Color option using the metaobject color.

  • Wrong colors

    A native swatch takes its color from the entry in Content > Metaobjects, not from the color's name. Open the entry, correct the hex value and save, and every product linked to it updates at once. If two products show different shades of the same color, they're probably linked to two separate entries, so point both at one.

  • Pattern or image swatches

    Upload a square image to the color's entry. Crop it to the fabric or finish itself rather than a product photo, because at swatch size a busy photo turns into a blur. Multicolor has no preset hex value, so it always needs an image.

  • Out-of-stock variants

    How a sold-out color looks is decided by the variant picker in Kalles, so test it: set one color to zero stock and open the product. If you'd rather hide sold-out colors completely, Color Swatch Pug and GLO Color Swatch Variant Image both list that option (checked October 23, 2026).

  • Speed

    Native swatches are drawn by Kalles itself, so they add no app script to your pages. A hex swatch costs nothing extra to load; an image swatch adds one small image per color, so keep those files small. The swatch loading speed guide shows how to measure a collection page before and after a change.

Kalles swatch questions.

Does Kalles support Shopify's native swatches?

Yes. The4's Kalles 5 docs use the Shopify Metaobject Color with a Variant Picker block on the product page.

Why isn't Kalles in the Shopify Theme Store?

It's sold on ThemeForest. On October 23, 2026 the regular license was $89, including Envato's buyer fee, and themes.shopify.com had no Kalles page.

Can Kalles use its own swatches instead?

Yes. The4 documents a Color Swatch section in the theme as well as the metaobject method. Native swatches are easier to manage across many products.

Which Kalles version do I need?

The4 doesn't name a first version. The newest Kalles 5 changelog entry we found was 5.4.2 from May 22, 2026, and ThemeForest showed a last update of August 25, 2026.

Which swatch apps work with Kalles?

Rubik Variant Images & Swatch lists ThemeForest themes under Works with. Other apps don't name themes, so test on a duplicate during the trial.

Related guides and tools.

Themes like Kalles

Checked

Sources

Make the swatch files.

Turn your colors into hex values, swatch images and a printable sheet, ready for Shopify.

Open the swatch generator All theme guides