A dropdown hides every choice behind a tap. The shopper opens it, reads a list of words like "Heather Grey" and "Dusty Rose", picks one, and only then sees what it looks like. Swatches put the choices on the page as small color chips, pictures or buttons, so the shopper can compare at a glance. For colors, patterns and materials, that is almost always the better experience.
That does not mean every option should become a swatch. Below is how to decide, how to set swatches up in a modern Shopify theme, and the cases where a dropdown still wins.
Why swatches beat dropdowns
- Shoppers scan colors faster than words. "Sage" and "Olive" mean different things to different people. A chip settles it.
- Every choice is visible without a tap. Shoppers notice colors they would never have opened a dropdown to find.
- Selection is obvious. A highlighted chip makes the current choice clear, and the product image can change with it.
- They are easier on phones. Well-sized swatches are simpler to hit with a thumb than a small dropdown arrow. Our guide to the mobile variant picker covers sizing in detail.
Setup
In Dawn and other recent Online Store 2.0 themes, swatches for variant options work like this:
- Open the product and edit the Color option.
- Connect the option to Shopify's color category metafield, so each value (Red, Navy, Forest) is linked to a color or a pattern image.
- In the theme editor, open the product page template, select the variant picker block and set the style to swatches or pills.
- Check that each swatch matches the real product color on a phone screen.
Older themes may need a code change or an app. If your swatches are for personalization choices rather than variants, such as thread color for embroidery or text color on a mug, a personalizer app handles them as fields. The help article on how to add color swatches to a product walks through it in Print It My Way, where swatches are available on the lower plans along with text fields and dropdowns.
Types
- Color chips: a solid circle or square of color. Best for plain colors.
- Image swatches: a small photo of the fabric, wood grain or print pattern. Best for anything a flat color cannot show, like "Walnut" or "Floral".
- Button groups: text in a tappable box, often called pills. Best for sizes and short text choices.
Which control for which option
| Option | Typical values | Best control |
|---|---|---|
| Shirt color | 4 to 15 | Color chips |
| Wood or fabric finish | 3 to 8 | Image swatches |
| Size S to XXL | 5 or 6 | Buttons |
| Shoe size in half sizes | 15 to 20 | Dropdown |
| Font style for a name | 4 to 8 | Image swatches showing each font |
| Country, team or school | 30 or more | Searchable dropdown |
When dropdown wins
Use a dropdown when the values are text that gains nothing from a picture, and there are many of them. Shoe sizes 5 to 13 in half sizes is the classic case: 17 buttons take up a lot of screen for no real benefit. Dropdowns also save space on product pages that already have several options. For very long lists, a searchable dropdown is better still; see our guide to long option lists UX.
Common mistakes
- Swatch colors that do not match the product. A bright red chip on a brick-red shirt leads to returns. Sample the color from your product photo.
- Tiny swatches. Small chips look tidy on desktop and are hard to tap on a phone.
- No label. Show the color name on hover or below the swatch row once selected. It also helps screen reader users.
- Sold-out colors that vanish. Removing them hides useful information. A crossed-out swatch tells the shopper the color exists. Our guide to hiding sold-out variants explains both options.
If you are comparing apps for this, our roundup of the best Shopify color swatch options apps looks at real color chips and image swatches side by side.
Frequently asked questions
Are swatches better than dropdowns on Shopify?
For visual choices like color, pattern and material, usually yes, because shoppers can compare at a glance. For long lists of plain text values, such as shoe sizes in half sizes, a dropdown is often cleaner.
How to switch from dropdown to swatches?
In Dawn and other recent Online Store 2.0 themes, connect the Color option to Shopify's color category metafield and set the variant picker style in the theme editor. Older themes may need a code edit or an app.
Best swatch size for mobile?
Aim for about 44 to 48 pixels with some space between swatches. Smaller chips lead to missed taps and the wrong color being selected.
Can I have both swatches and dropdowns?
Yes, and many stores should. For example, use buttons for Size (5 values), swatches for Color (10 values) and a dropdown for a long Material list (20 values).
Do swatches affect page load?
Plain color chips add almost nothing. Image swatches load small images, so keep them compressed and small in file size.
How to handle sold-out swatches?
Show sold-out swatches crossed out or faded instead of removing them. Shoppers then know the color exists but is unavailable right now.
Best app for swatch customization?
Print It My Way and Bold Product Options both offer swatches, and Dawn supports native swatches for variant options. Use an app when you need swatches for personalization choices, not just variants.
Do swatches work on Shopify Basic?
Yes. Every Shopify plan supports metafields and theme customization, so swatches work on Basic too.
Related reading
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.
- Shopify Help Center: Product variants
- Shopify.dev: Metafields overview
- Shopify.dev: Product variant limits
- Shopify Help Center: Line item properties (customization)
Try it free on Shopify
Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install Print It My Way