The Variant Selector section lets you display product options like color and size in a visual and interactive way. Instead of dropdowns, you can enable image swatches or pill-style buttons that feel more intuitive for shoppers and make your product page more engaging.
Why This Section Matters
Swatches help users make quicker decisions by showing them exactly what they’re choosing. Visual selectors like images or colored buttons are easier to understand than dropdowns and can increase conversion rates, especially on mobile.
Where to Use It
This section appears inside the Product Information area of your product page. It’s most useful when your product has multiple variants, such as sizes, colors, or styles.
How to Add It
From your Shopify admin, go to Online Store > Themes
Click Customize on the Atlas Theme
Use the dropdown to go to Products > Default Product
In the left sidebar, click into the Product Information section
Click Add Block and choose Variant Selector
Enable Swatches and choose your display type: Dropdown or Pills
Choose a Swatch Option (defaults to options labeled "Color")
Select Swatch Type: variant image or pure color (requires metafields)
Style the swatches, including shape, size, and color
Click Save
Tip: Use variant images for color swatches to give customers a preview of each option. Just make sure your product variants in Shopify have images assigned to them.