Nothing on a product page communicates options more clearly and efficiently than visual colour swatches. Dropdowns that say “Colour: Black / Navy / Forest Green” require customers to imagine each option. Colour swatches show them instantly — and that visual clarity directly reduces variant confusion, lowers wrong-order returns, and speeds up the buying decision. In 2026, swatches are not a premium feature. They are an expectation. If your Shopify theme still uses plain text dropdowns for colour and size selection, you are leaving money on the table.
Why Colour Swatches and Variant Display Matter for Conversions
Research from e-commerce UX studies consistently shows that visual variant selectors — colour swatches, image swatches, size tiles — reduce the cognitive effort required to choose. Less effort means faster decisions and higher conversion rates. For apparel, footwear, accessories, and home décor brands, where colour is a primary purchase driver, poorly implemented variant display is one of the single biggest conversion killers on a product page. There is also an inventory signal benefit: when all colour options are shown at a glance, customers are more likely to buy an available colour if their first choice is out of stock — reducing lost sales from stockouts.
How Granivio Handles Colour Swatches and Variants
Granivio treats variant display as a first-class feature, not an afterthought. Here is what you get natively:
- Inline colour swatches on product pages — circular or square swatches rendered directly on the product page, replacing text dropdowns for the colour option. Selecting a swatch updates the product images dynamically so customers immediately see the chosen colour in all photo angles.
- Swatches on collection pages — Granivio can display available colour options directly on product cards in collection and search results grids. This means shoppers can see all colour choices before even clicking into the product page, reducing unnecessary page loads.
- Size tiles — size options are presented as clickable tiles rather than dropdowns, with crossed-out tiles for out-of-stock sizes so customers know availability without any ambiguity.
- Swatch-to-image mapping — when a colour swatch is selected, the main product image gallery updates to show images associated with that variant, giving customers an accurate preview of what they will receive.
- Custom swatch colours — the theme editor lets you assign specific hex colours or swatch images to each colour option, so your “Dusty Rose” swatch looks exactly like dusty rose, not a generic pink.
Themes like Simple and Basic that use standard Shopify dropdowns for all variants require either coding to convert to swatches or a third-party swatch app. Granivio eliminates both the development cost and the app fee.
Setting Up Variant Swatches in Granivio Without Code
Getting colour swatches working in Granivio is straightforward. Your product variants in Shopify need to use the option name “Colour” or “Color” — Granivio detects this automatically and renders it as a swatch selector. For custom swatch images, upload swatch photos via the theme editor’s colour settings. For Indian apparel brands that carry many traditional colour names — Mehendi Green, Turmeric Yellow, Sindoor Red — using swatch images rather than colour fills is the better choice since these colours do not map to standard hex values intuitively.
Try Granivio Free
Give your customers the visual variant experience that converts. Try Granivio free and set up your colour swatches in the theme editor today. For full configuration and catalogue setup, OneOnic can help you get everything perfect before launch.
Frequently Asked Questions
Do colour swatches in Granivio update product images automatically?
Yes. When a customer selects a colour swatch in Granivio, the product image gallery updates to display images tagged to that variant, so shoppers see the accurate colour representation in all available photo angles.
Can Granivio show swatches on the collection page grid?
Yes. Granivio can display available colour swatches on product cards within collection pages, allowing shoppers to see colour options without navigating to the individual product page. This is particularly effective for fashion and lifestyle brands.
How do I add custom swatch colours in Granivio?
Through the Shopify theme editor you can assign a specific hex colour code or upload a swatch image for each colour option. This allows precise colour representation for unique brand or product colours that do not have a standard web colour equivalent.
Need Expert Help Building Your Shopify Store?
OneOnic has built 100+ Shopify stores across India for furniture, fashion, home decor, tiles, candles, and more. We handle design, development, SEO, and growth.
