Displaying Swatches on Collection Grids: A Step-by-Step Guide
Want to reduce clicks and help customers find what they need faster? Enabling swatches on your collection pages allows shoppers to see available colors, sizes, or materials directly from your product listings.
Why Enable Collection Page Swatches?
By default, most Shopify themes only show a single product image on the grid. By turning on swatches in the Product Variant Options app, you:
Speed up browsing: Customers don't have to click into every product to see if their size is in stock.
Showcase variety: Immediately highlight your full color palette or material range.
Increase "qualified" traffic: Users who click through to the product page are more likely to buy because they already know their preferred variant is available.
How to Enable Swatches on Your Collection Page
The app makes it incredibly simple to mirror your product page styling or create a unique look for your grids.
1. Access the Collection Page Settings
Navigate to the Collection Page Settings tab in your app dashboard. This is your dedicated area for managing how variants appear on search results and collection grids.
2. The One-Click Sync (Recommended)
If you have already spent time styling your product pages, you don’t need to do the work twice.
Locate the Apply Product styles to all toggle at the top of the page.
Click on it.
The Result: The app will automatically mirror the "Display Styles" (e.g., Circular Swatch) and "Swatch Types" (e.g., Variant Image) you configured for your product pages.
3. Manual Configuration
If you prefer a different look for your collection pages (for example, using simple Buttons on the grid but Polaroid Swatches on the product page), keep the toggle off and manually assign styles:
Identify the Option: Find your option name (e.g., "Color").
Choose Display Style: Select your preferred layout from the dropdown (Square, Circular, Pill, etc.).
Select Swatch Type: Choose between Color/Custom Image for brand colors or Variant Image to show the actual product thumbnail.
Customizing the Visual Look
To ensure your collection swatches don't look cluttered, you can fine-tune their size and spacing.
Go to the Customize Styles tab.
Select the Collection Page toggle at the top.
Click Customize next to the style you are using (e.g., Circular Swatch).
Adjust the borders and active states to ensure the swatches stand out clearly against your collection page background.
Pro Tip: Keep collection page swatches slightly smaller than product page swatches. This maintains a clean, professional look and prevents the product grid from feeling overcrowded.
Troubleshooting: Swatches Not Appearing?
If you’ve enabled the settings but don’t see swatches on your live site:
Check the Script: Ensure the app script is enabled in your Shopify Theme Settings > App Embeds.
Check the Active Badge: In the Customize Styles tab, look for the green Active badge to confirm your chosen style is live.
Need Help?
Our support team is dedicated to helping you build a beautiful storefront:
Live Chat: Available directly within the app dashboard.
Email Support: wecare@keficommerce.com