Configuring Color Swatches Using Named Colors (OS 3.0 Themes)

Color swatches let customers pick a product's color variant from a visual palette instead of a text list. OS 3.0 themes generate these swatches using named colors — standardized CSS color keywords, such as red, navy, or coral, each mapped to a specific hexadecimal code — so a product's color variant values display as the correct swatch color automatically. 

This guide explains how named colors work, how color swatches display on the Collections and Products pages, how to configure them using the Variants selector component, and provides a full reference chart of supported color names and their corresponding hex codes.

Storefront Effect of Color Swatches in OS 3.0 Themes

OS 3.0 themes use named colors to power the Variants selector component, which displays a product's color variants as a swatch palette. Customers see these swatches on both the Collections page and the Products page, and they can also be added to other product-related components (for example, Featured product). 

This section focuses on the Collections page and the Products page, where customers most commonly encounter color swatches. The following sections describe the customer-facing effect on each.

On the Collections Page

• Hovering over a color swatch updates the product image to preview that color.
  
• Clicking a color swatch on a product card on the Collections page takes the customer to the Products page for that color variant.
  

On the Products Page

• When a customer arrives from the Collections page, the color they clicked is already selected.
• Clicking a different color swatch on the Products page updates the page the same way — the URL changes to reflect that color's SKU, and the swatch becomes selected.
  
• The customer selects a size, then clicks Add to cart to add the product to their cart — selecting a color and size alone does not add it automatically.
  

Configuring Color Swatches on the Collections Page 

The Variants selector is a product card component that displays a product's color variants as a swatch palette and lets customers select a color and, if applicable, another variant attribute such as size, before adding the product to their cart. To add and configure the Variants selector on the Collections page:

1. In the theme editor, select the Collections page from the page selector. In the left-hand layer menu, go to Product list > Product cards > Product info area, then add the Variants selector component.
2. Once this component is added, color variants display as a swatch palette on product cards, and the other variant attribute (such as size) appears when a customer hovers over the product image.
3. Configure the following settings for the Variants selector component:
   
   • Palette style: Square, Round, or Rounded rectangle
   • Swatch maximum display quantity: Drag the slider or enter a number directly to set how many color swatches display, from 1 to 6.
   • Swatch display method: Display only 1 line, Scroll left and right, or Tiled display
   • Swatch display size: Small, Medium, or Large
   • Desktop display specifications / Mobile display specifications: Turn these on to show the other variant's attribute (such as size) as text next to the swatches. Each toggle applies independently to desktop and mobile.
   • Specification dimensions: Small, Medium, or Large — sets the size of the specification text shown when display specifications are enabled.
4. Click Save to apply your changes.

Configuring Color Swatches on the Products Page

On the Products page, the Variants selector is a built-in component under Product information — unlike on the Collections page, it doesn't need to be added manually. 

To configure it:

1. In the theme editor, select the Products page from the page selector. In the left-hand layer menu, go to Product > Product section > Product information, then select Variants selector.
   
2. Turn on Enable color palette. Once enabled, the color palette displays as a tile view by default. Configure the following settings for the Variants selector component:

• Palette style: Sets the shape of the color swatches (for example, Square).
• Title typography: Sets the font style used for the variant option title (for example, Body 3).
• Variant out-of-stock style: Sets how out-of-stock variants are indicated (for example, Half-width slash (grayed out)). This setting applies to text and image buttons only — color swatch buttons don't support it.
• Variant selected style: Sets how the selected variant is highlighted (for example, Border highlight).
• Display size: Sets the size of the color swatches (for example, Medium).
• Desktop layout: Sets the layout direction on desktop (for example, Horizontal layout).
• Mobile layouts: Sets the layout direction on mobile (for example, Vertical layout).

3. Click Save to apply your changes. 

Named Color Reference Chart for OS 3.0 Themes

The tables below list every named color supported by OS 3.0 themes, along with its corresponding hex color code. These names follow the standard CSS Color Module keyword list, so the same names and values apply consistently across your storefront.

Standard Named Colors

Extended Named Colors