Organize variant swatches into sections

Split variant colors into labeled sections, assign values, and choose the section order.

Split a long list of variant colors into labeled sections on your product pages, such as Light and Dark or Solid and Pattern. These sections organize values within one Shopify option; you do not need to create product groups.

Create sections

  1. Open Variant swatches in Color Swatches.

  2. For the option you want to organize, such as Color, use Color or image as its Swatch Style, then select Configure.

  3. Select Enable sections. If sections are already enabled, select Manage sections.

  4. Enter a name in New section name, then select Add section. Repeat for each section. Use a different name for each one.

  5. Drag the handle beside each section to set the order, then select Save in Manage sections.

Assign colors to sections

  1. Back on the option page, choose a section from the dropdown beside each value. For example, assign White and Beige to Light, and Black and Navy to Dark.

  2. Select Save on the option page to save the assignments.

  3. After your changes finish syncing, open a product that uses this option and check the sections.

Sections are configured for the option across your store. Each product shows only its own option values. Values left as Unsectioned appear first under the original option name, such as Color. Sections with no values for that product are not shown.

If swatches are not visible yet, follow Set up variant swatches and Enable swatches in your theme.

Change or remove sections

Select Manage sections to rename or reorder sections. To remove one, select the delete icon beside it, then Save. Its values become Unsectioned.

To remove all sections for the option, select Disable in Manage sections and confirm. This removes the section names and assignments, but keeps the variant values and their swatches. If you enable sections again later, you will need to recreate the sections and assign the values again.

Did this answer your question?
๐Ÿ˜ž
๐Ÿ˜
๐Ÿ˜