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.

Ronin 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 color option name and connect the option to Shopify's standard Color category metafield.
  3. For each option value, set its swatch color or upload a swatch image, then select Save.

guide-color-swatches-3.webp

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). The field accepts several names separated by commas for multi-language stores (for example Color,Couleur,Colour).
    • Variant images: when enabled, a value's uploaded swatch image is shown instead of its flat color.

guide-color-swatches-2.webp

  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 the option named in 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.

guide-color-swatches-pdp-3.webp

note

Swatches are turned on in the Variant picker of the product.product-2 and product.product-3 templates and off in the default product template. The Featured product section has the same Variant picker block.

caution

On the product page, the Variant picker shows swatches only when the option name matches the whole Swatches name field. If you enter several comma-separated names, product cards still pick them up, but the product page picker falls back to text buttons. Keep a single name in the field if you want swatches on the product page.

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: show the value's swatch 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 Display option: First option uses the product's first option, Manual uses the option you type in Option name (for example Color). Each card swatch links 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 Swatches name exactly, and that the option value has a color or image assigned in the admin.