Product variant swatches provide customers with a visual way to select between product options, such as different colors. Instead of displaying only the option name, swatches can represent each available option visually on product pages and product cards.
Before you begin
Before enabling swatches in Tailor, make sure the product has variants configured in your Shopify admin.
- In your Shopify admin, go to Products.
- Select the product you want to edit.
- In the Variants section, add or review the product’s options and option values.
- Make sure the product includes the color options you want customers to select.
- Click Save. Set up variants for colors
To use swatches, at least one product must contain product variants with the option name "Color". Confirm this is the case before continuing.
Enable for product pages
In the theme editor (Edit theme), use the page selector to open Products, then Default product.
Click the toggle beside Product page to reveal its blocks.
Click the Variant picker block to customize its settings.
Activate Enable color swatches.
Enable for the product grid
In the theme editor (Edit theme), open the Theme settings, then Product grid.
Under Color options, select Display as swatches.
Enable for featured product section
In the theme editor (Edit theme), click the toggle beside the Featured product section to reveal its blocks.
Click the Variant picker block to customize its settings.
Activate Enable color swatches.
Share your experience with Tailor
Your feedback is crucial! Help make Tailor better by sharing your thoughts.
What to provide:
- Pain points: What's not working for you?
- Missing features: What should we add to Tailor?
- General feedback: Any other ideas?
How to provide feedback:
- Fill out our quick and easy form.
- Details help us improve, so the more specific, the better!