Color swatch

A grid of color chips, with adjustable chip size, slider layouts, and a live color preview for text.

A grid of color chips that shows every color at once, making it easy for customers to compare and choose.

Use it when your color palette is fixed and reasonably short. For a long list of named colors, use Color dropdown for a more compact layout. If customers need to choose any color, use Color picker.

What customers see

A grid of chips, each a single color or split into two. Hovering displays the value's name, and the selected chip is marked. For many colors, you can display them as a slider instead.

All the colors at once — the reason to choose a swatch grid over a dropdown.

Basic

Setting	What it does
Label / Name	Customer-facing text, and the name on the order.
Required field	Blocks add to cart until a color is chosen.
Hidden label	Hides the label.
Swatch style	Color or Image. Starts on Color.
Option values	The colors, each with a Color column — one color, or two for a split chip. See Working with option values.
Allow multiple	Lets the customer choose several colors.
Min selections / Max selections	Shown once Allow multiple is on.
Help text	Guidance for the whole option.
Default value	Preselects a color.
Conditional logic	Show or hide based on other choices.

Advanced

Setting	What it does
Add-on quantity / Quantity	How add-ons scale — including Mixed quantity when multiple is on.
Swatch color width / Swatch color height	The chip size in pixels. Both start at 32.
Enable custom layout	Unlocks the layouts below.
Layout type	Expand, Collapse, or Slider.
Scroll type, Scroll height, Number of option values	Scroll area for the Expand and Collapse layouts.
Number of rows, Swatches per row, Show navigation arrows, Show indicators, Slider style	Slider layout settings.
Color preview	Previews the chosen color applied to a text option.
Select text box	Which text option the preview applies to.
Not allow deselect	Stops the customer clearing their choice. Single-select only.
Direction style	Vertical or Horizontal.
Out of stock options	How sold-out colors look. Blur works particularly well here.
Help text position	Where the option-level help text sits.
HTML class / Column width	Styling hook and field width.

Chip size

Swatch color width and Swatch color height are specific to this type. Image swatch has its own equivalents.

Both default to 32 pixels, which suits a standard color chip. Increase them when colors are subtle or similar to each other, or make them rectangular for something like a fabric strip.

Larger chips push the Add to cart button further down the page. With more than about a dozen large chips, use the slider layout.

Personalizer

Supported as an image layer. Each color value can have an image, usually a photograph of the product in that color, that is drawn onto the product photo when the value is selected. The settings are image shape, background mode, size, position, rotation, crop area, and customer controls. See Image layers.

Add-on pricing

Prices are set on each color. A common setup is to offer standard colors for free and charge extra for premium finishes.

Linking each color to an add-on product gives it its own inventory, which Out of stock options then uses. This is the simplest way to make a color temporarily unavailable without editing the option set. See Stock and inventory.

Color swatch or Color dropdown?

	Color swatch	Color dropdown
All colors visible	Yes	No
Names visible	On hover	Beside each chip
Search	No	Yes
Slider layout	Yes	No
Vertical space	More	One line
Best for	Under twenty colors	Twenty or more, or named colors

Examples

Twelve paint colors

Setting	Value
Label / Name	Frame color
Swatch style	Color
Swatch color width / height	40 / 40
Out of stock options	Blur
Not allow deselect	On
Required field	On
Each value	Linked to a generated add-on product for stock

Forty colors as a slider

Enable custom layout on, Layout type set to Slider, Number of rows 2, Swatches per row 6.5, and Show navigation arrows set to Show.

Two-tone finishes

Each value is set to a two-color split chip.

Thread color with a live text preview

Color preview on, with Select text box set to your engraving text option.

Notes

• Available on all plans. The slider layout may not be available on all plans.

• Works in Shopify POS.

• Colors are set on each value in the values table.

• Value names are displayed on hover. Mobile customers may not see them at all, so use Color dropdown when the names carry important information.

• Colors displayed on screen may not exactly match the physical product. Mention this in the help text if color accuracy matters.