Color Swatches allow you to display product color variants as visual color or image swatches in your Shopney mobile app, creating a more engaging and intuitive shopping experience for your customers.
Instead of showing color options only as text, customers can see available colors directly and select them more easily while browsing products. Color Swatches can be displayed using either circle or square shapes and are supported on both the Product Detail Page and the Quick Add to Cart screen.
By using Color Swatches, you can:
Display color variants visually instead of text
Improve the shopping experience
Help customers identify colors faster
Keep your mobile app experience aligned with your Shopify store
Now, let's walk through how to enable Color Swatches, customize their appearance, and display them in your mobile app!
How Color Swatches Will Appear in Your App
Once you've enabled Color Swatch, your customers will see product color variants displayed as visual color or image swatches instead of plain text. These swatches will appear on supported products throughout your mobile app, making it easier for customers to identify and select their preferred color.
Depending on your settings, color swatches can be displayed in either a circle or square format and will be available on both the Product Detail Page and the Quick Add to Cart screen.
Step-by-Step Guide to Enable Color Swatches
1- Go to the Customization section
In your Shopney Dashboard, go to the Design page(1) and then open the Customization section(2).
2- Enable Color Swatch and choose a shape
On the Customization page, simply enable the Color Swatch toggle(1) and choose your Color Swatch shape (2).
š Important Note
For Color Swatches to work visually, the product color data must be properly set up in Shopify.
How to set up Product Color Data on Shopify
1- Go to the Products Page and find your product
On your Shopify Admin page, go to Products. Afterwards, open the product you want to configure the variants of.
2- Connect Your Color Option to Shopify's Color Metafield
On the same product page, locate the Color product option(1). Click on the dynamic source (database) icon next to the Color field (2) and select Shopify's Color category metafield (3). Ensure each color variant is assigned a real color value through Shopify's color metafield and not only just text.
For more information on this, you can also check here.
All done! Now you know how to enable Color Swatches, customize their appearance, and display product colors visually throughout your mobile app!
Need Help?
If you encounter any issues, our support team is here to assist you:
Contact our support team via live chat in your Shopney dashboard
Visit our Help Center
Related Articles