For the complete documentation index, see llms.txt. This page is also available as Markdown.

Create a single-option group

Step-by-step: build a single-option group where one thing — like Color — changes between your products, group name to publish.

Use this when one thing changes between your products — like Color, scent, material, or pack size. Each value links to exactly one product. Not sure this is the right type? See Group types.

Single-option group editor with the live preview panel on the right
The single-option group editor, with a live storefront preview alongside.

Group details

The internal Group name (up to 255 characters) — used only inside the admin; customers don't see this. The field shows placeholder text like Hoka Tecton X 3 — Women's until you type your own.

Options and values

Add one option (e.g. Color) and one value per product variation (e.g. Red, Blue, Green).

"Each value links to one of your products."

  • Option name — the label shoppers see (e.g. Color). Rename per language via the storefront language switcher.

  • Values — add, rename, and drag to reorder. Each value has a swatch that represents it visually:

Swatch type
What shows

First image

The linked product's first image.

One color

A solid color you pick.

Two colors

A split two-color swatch (e.g. for dual-tone products).

Custom image

An image you upload.

📸 Screenshot placeholder — a value row with the swatch type dropdown open.

Appearance

Each option chooses a style per surface — On product page and On product card — from your style library, or Hidden to skip that surface. New options come prefilled with your default styles, so picking a ready-made style that fits is usually all you need — Customize jumps into the style editor when you want finer control.

Linking products

Each product row simply gets a value — pick which value (e.g. which color) that product represents. A Swatch type column appears next to it only when the option's chosen style is a swatch style; with button, tab, or dropdown styles there is nothing to swatch, so the column is hidden.

Product list with a value assigned to each row
Every linked product gets its own value name — here the option uses a button style, so no swatch column is shown.

The product picker searches your catalog with infinite scroll, and disables archived products and products already in another group. A value with no product linked leaves the group incomplete.

Live preview

A sticky preview pane renders your actual widget with tabs for Product page and Product card. It updates as you type and reflects the selected styles — what you see is what ships.

Saving and publishing

  • Publish group (create) / Save group (edit) — the primary action.

  • More actions menu: Set as active, Set as draft, Delete.

  • A save bar guards unsaved changes when you navigate away.

Validation errors

If something is invalid (missing option name, duplicate value names, a product already taken…), the editor shows a critical banner at the top plus inline field errors, and scrolls to the first problem. Fix and save again.

Group editor validation banner with an inline field error
Fix the flagged fields — the banner and inline errors point to exactly what's missing.

After saving, storefront data syncs in the background — allow a minute or two before checking your live store.

Next

Last updated

Was this helpful?