Set up color swatches

Color Swatches replace plain text color names with small, visual color circles — letting your customers see actual colors at a glance instead of reading words like "Navy" or "Terracotta." This makes browsing and choosing product variants faster and more intuitive.

Color Swatches appear in two places across your store:

• On the product page, swatches act as interactive selectors. Customers click a color circle to pick their preferred variant. The selected swatch gets a highlighted border with a white dot in the center. If a color is out of stock for the chosen size, its swatch appears crossed out with a red diagonal line.

• On product cards (collection pages, search results, featured product grids), swatches give customers a quick preview of available colors without opening the product page. Clicking a swatch on a card takes the customer directly to that color variant's product page.

On this page

1. Define your color palette
2. Enable Color Swatches on product pages
   • 2.1 How the theme detects color options
   • 2.2 Changing the trigger word
3. Add Color Swatches to product cards
4. Verify your setup
5. How swatch display priority works
6. Swatch visual states

1. Define your color palette

Before swatches can appear anywhere in your store, you need to tell the theme which colors to display and what they look like. This is done once in Theme Settings and applies globally.

How to access

1. From your Shopline admin, go to Online Store > Design.
2. Under Current Theme, click Design (or Customize).
3. In the Theme Editor, open Theme Settings (gear icon in the sidebar).
4. Scroll to the Color swatches section.

How to define colors

In the Color swatches text field, enter your colors using this format — one color per line:

ColorName: ColorValue

For example:

Beige: #E5DCC8
Black: #2B2B2B
Blue: #91ADDE
Brown: #9A7B63
White: #F6F6F6

Supported color value types

HEX codes — The most common option. A HEX code is a 6-character string starting with # that represents a specific color. You can look up any color's HEX code by searching "color picker" on Google.

Rose: #D8A0A4
Navy: #4A5875
Olive: #9FAF7A

Image URLs — For colors that can't be captured by a single solid color, such as transparent, textured, wood grain, or patterned swatches. Upload an image (128 × 128 pixels recommended) and paste its URL.

Transparent: https://img-va.myshopline.com/image/store/.../color-transparent.webp?w=128&h=128

Gradients — For multi-color products. A gradient value displays multiple colors in a single swatch circle.

Multi: conic-gradient(#B7DE91 0% 33%, #F6F6F6 33% 66%, #D66762 66% 100%)

The example above creates a swatch divided into three equal segments: green, white, and red.

2. Enable Color Swatches on product pages

With your color palette defined, you now need to turn on Color Swatches in the Variant Picker block on your product page template.

How to set it up

1. In the Theme Editor, navigate to a Product page template.
2. Find and click the Variant picker block in the block list.

3. Configure the following settings:

   

Settings explained

Picker type

• Button — Displays options as clickable buttons. This is required for Color Swatches to work.
• Dropdown — Displays options in a dropdown menu. Color Swatches are not available with this option.

Enable color swatches

This toggle only appears when Picker type is set to "Button." Turn it on to activate swatch display.

Color swatch type

This setting only appears after enabling Color Swatches. It controls what the swatch circle shows:

• Color — Displays the solid color, image, or gradient you defined in Theme Settings (Step 1). This is the most commonly used option.
• Variant — Displays a thumbnail of the actual variant product image as the swatch. For example, if your blue sofa variant has a product photo, the swatch will show that photo instead of a plain blue circle. This helps customers preview how each color looks on the actual product.

2.1 How the theme detects color options

The theme uses a trigger word to decide which product option should display as swatches. By default, this trigger word is "Color" (and it also recognizes "Colour" automatically). Any product option whose name contains the trigger word will render as color swatches instead of plain text buttons.

For example, if a product has two options — "Color" and "Size" — only the Color option gets the swatch treatment; Size remains as plain buttons. Options like "Fabric Color" or "Body Colour" would also be detected, since they contain the trigger word.

2.2 Changing the trigger word

The trigger word is part of the theme's Default Text — a set of built-in text strings that you can customize directly without touching any code.

To change it:

1. From your Shopline admin, go to Online Store > Design.
2. Under Current Theme, click the "..." menu, then select Edit default theme content (or Edit language).
3. Navigate to the Products tab.
4. Scroll down to the General section.

5. Find the "Color swatch trigger" field and change the value.

   

You can enter multiple trigger words separated by commas. For example, if your products use different naming conventions, you could enter:

Color, Shade, Finish

This tells the theme: "Display swatches for any option whose name contains Color, Shade, or Finish."

3. Add Color Swatches to product cards

Product cards are the individual product tiles shown on collection pages, search results, and featured product sections. Adding swatches here lets customers see available colors at a glance while browsing.

How to set it up

1. In the Theme Editor, open a page that displays product listings (e.g., a Collection page).
2. Click on a product card, then find the Color swatches block (or add it if it's not already there).

3. Adjust the settings:

   

Settings explained

Color swatch count

A slider from 1 to 6. This controls the maximum number of swatch circles shown per product card. If a product has more colors than this number, only the first ones are displayed. For example, setting this to 3 for a product with 5 colors means only the first 3 swatches appear on the card.

Color swatch type

Same as on the product page:

• Color — Shows swatches from your defined color palette.
• Variant — Shows variant product image thumbnails.

Click behavior

When a customer clicks a swatch on a product card, they are taken directly to the product page with that specific color variant pre-selected.

4. Verify your setup

After configuring everything, preview your store in the Theme Editor to make sure swatches display correctly. Use this checklist:

• Color palette is defined in Theme Settings > Color swatches.
• Product option names contain the trigger word (default: "Color" or "Colour" — customizable in Default Text).
• Variant Picker block is set to Picker type = "Button" with "Enable color swatches" turned on.
• Color swatches block is added to product cards (if you want swatches on collection pages).
• All color names in your swatch config match the product option values exactly.

5. How swatch display priority works

When rendering a swatch, the theme looks for the best available visual in this order:

1. Image attached directly to the option value — highest priority.
2. HEX color attached directly to the option value.
3. Value from your Color Swatches config in Theme Settings — this is the most common source.
4. Automatic fallback — if no match is found, the theme takes the last word of the color name and attempts to find a matching image file (e.g., "Dark Navy" falls back to "navy").

6. Swatch visual states

On product pages, swatches provide clear visual feedback to help customers interact confidently:

Swatch visual states on product pages

State	What it looks like
Default	Color circle with a subtle border. On desktop, hovering shows a tooltip with the color name.
Selected	Border expands outward with a white dot in the center.
Unavailable	Faded out with a red diagonal line across the swatch. Cannot be clicked.
Hover	Border gently expands outward, creating a subtle zoom effect (desktop only).

---

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our website for assistance.