Organize variant swatches into sections

Sections split a long list of variant values into labeled groups on the product page. Instead of one flat row of swatches, shoppers see them grouped under headings like “Core colors” and “Limited edition”.

Reach for sections when a single option has a lot of values, say 20+ colors, and a flat list gets hard to scan.

Enable sections

1. Open Color Swatches and go to Variant swatches.

2. Click Configure on the option you want to organize, like Color.

   

3. In the page actions (top right), click Enable sections.

   

Create your sections

1. Click Manage sections in the page actions.

2. Type a section name, like Limited edition, and click Add section.

   

3. Add as many sections as you need.

4. Drag to reorder them. This sets the order they appear on the storefront.

5. Click Save.

   

Assign values to sections

Each option value row now has a section dropdown. Pick a section for each value.

Values left as Unsectioned appear first on the product page, under the original option name. Use the All sections filter next to the search box to focus on one section at a time while you assign. Click Save when you’re done.

How it looks on the storefront

Swatches render in this order:

1. Unsectioned values, under the original option name (e.g. “Color”).
2. Each section in the order you arranged, under its own heading.

Empty sections, with no values assigned, are hidden automatically.

Turn sections off

1. Click Manage sections.
2. Click Disable at the top of the dialog.
3. Confirm.

This clears the section assignments but keeps your option values and their swatches. You can re-enable sections later and start fresh.

Note

A few things worth knowing:

• Keep section names short. They show as headings on the product page.
• You don’t have to section everything. Unsectioned values display normally at the top.
• Sections are per option. You can section Color and keep Size as a flat list.
• Changes sync to the storefront within a few minutes.