Skip to main content

Color swatches

This guide describes how to show color swatches for product variants on the product page and on product cards.

Lotio reads the swatch color or image from Shopify's option values, so you set the colors once in the admin and the theme displays them everywhere.

Set up swatch colors in Shopify​

  1. On your store's Shopify admin page, from the left-side menu, select Products, then select a product with a color option.
  2. In the Variants box, select the pencil icon next to the color option name and connect the option to Shopify's standard Color category metafield.
  3. For each option value, select the value and set its swatch color or upload a swatch image, then select Save.

Step 3

Configure swatches in Theme settings​

  1. Open the Theme editor (Sales channels > Online store > Themes > Customize).
  2. Select the Theme settings tab in the sidebar and open Swatches:
    • Swatches name: the option name the theme treats as swatches (default Color). Enter the translated names separated by commas if you sell in several languages (for example Color,Couleur,Colour).
    • Variant images: when enabled, a variant's own image is used as its swatch instead of a flat color.
    • Width and Height: the size of each swatch in pixels.

Step 2

  1. Open Variant pickers to style the option buttons around the swatches:
    • Variant width: Fit sizes each button to its content, Fill stretches the buttons across the row.
    • Appearance: Label color, Background color and Border active color, each with an opacity slider and a custom color field.
  2. Select Save.

Enable swatches on the product page​

  1. In the Theme editor, select Products from the page selector and open the product template.
  2. Select the Product information section, then select its Variant picker block (add one from Add block if it is missing).
  3. Configure the block:
    • Style: choose Buttons. Swatches are not shown in Dropdowns style.
    • Swatches: turn on to replace the button text with the swatch color or image for options listed under Swatches name.
    • Show selected value: shows the selected option value next to the option label.
    • Direction, Alignment, Option spacing and Option value spacing: control how the options are laid out.
  4. Select Save.

Step 3

Show swatches on product cards​

  1. In Theme settings > Product cards, turn on Show swatches.
  2. Under Variant option links set:
    • Maximum swatches to show: how many swatches appear on a card before a "+N" counter.
    • Variant images: use the variant image instead of a flat color on cards.
  3. In each section that lists products (for example Main collection or Featured products), open the Variant group and set Option name to the option you want on the cards (default Color). Clicking a card swatch switches the card image to that variant.
  4. Select Save.
tip

If a swatch shows as a plain label instead of a color, check that the option name matches one of the names in Swatches name exactly, and that the option value has a color or image assigned in the admin.