Swatches for products with multiple options (like Style and Color)

When your products have both styles and colors, and you set them up as separate products, you may want to show swatches for both of them.

For example:

• Use pill/button swatches for styles (like Straight or V-neck)
• Use color or image swatches for colors (like Black, Blue, Green)

Here’s what it looks like:

How to set this up

To achieve this, you’ll need to create 3 product groups. One for Style and two more for Color of each style. This setup ensures only unique swatch values show on the product page.

Step 1: Create a style group (covering all colors)

This group includes all styles (e.g., Straight, V-neck) for all colors.

Group setup:

• Title: Basic t-shirt / Style (use product name with “Style” suffix)
• Option name: Style
• Position: 0 (necessary to display style swatches above colors)
• Displayed on: Product widget (to hide Style buttons on collections)
• Show only unique swatches: ✅ Yes

Assign swatch names with styles for each product in the group and select Pill / Button swatch type. In this example styles are Straight and V-neck.

Step 2: Create color groups for each style

Next, create two separate groups, one for each style’s colors.

• Group 1: Basic t-shirt Straight / Color
• Group 2: Basic t-shirt V-neck / Color

Add only products of this style in the group and assign swatch names to them. You can use any swatch types for them. Repeat it for each group.

Step 3: Verify results

Once you complete these steps, go to the product page. You should now see:

• Style buttons (Straight, V-neck) — no duplicates
• Color swatches — only for the selected style

Need help?

If you run into any issues, please contact us and we’ll help you.