Color swatches are thumbnail images used to represent particular colors, patterns, etc. for product variants. Swatches are available as a variant display option for the product page, as well as the product grid and tag filters on the collection page.
Activate swatches for Turbo, Retina, Flex, Superstore, Responsive, Parallax, and Vino.
Align your variant titles with the standard colors or replace colors by customizing swatch colors and images.
Turbo
- Open theme editor (Edit theme)
- Open Theme settings
- Open PRODUCTS
- Adjust the Option style to Selectable boxes
- Save
To activate color swatches for collection pages, enable Show color swatches in the Product grid portion of the Theme settings
Retina
Enable and customize color swatches by adjusting the Products portion of the Theme settings.
- Open theme editor (Edit theme)
- Open Theme settings
- Open PRODUCTS
- Enable Show color swatches
- Save
Flex
Enable color swatches by adjusting the Product form portion of the Theme settings.
- Open theme editor (Edit theme)
- Open Theme settings
- Open PRODUCT FORM
- Enable Show color swatches
- Save
Superstore
- Open theme editor (Edit theme)
- Open Theme settings
- Open PRODUCTS
- Identify the Swatch trigger
- Activate Enable color swatches
- Save
Responsive and Parallax
Select the variant style
In the Product grid portion of the Theme settings, activate swatches by clicking Color swatches below Options style.
Collection page
To enable color swatches on collection pages, click to enable the Show color swatches setting below Collections and search results.
This will display the color swatches below product thumbnail images on collections and search results.
Customize swatch colors and images
Vino
Vino works with Shopify’s built-in swatch feature and also offers its own swatch option within the theme. To learn how to configure either option, refer to this guide.
Product page
In the theme editor, select Products > Default product from the page dropdown. Under the Product section in the left sidebar, click on the Variant picker block and activate Enable color swatches.
Collection page / Search results page
To activate color swatches for collection and search result page, turn on Enable color swatches in the Product tiles portion of the Theme settings.
Collection filters
In the theme editor, select Collections > Default collection from the page dropdown. In the left sidebar, click on Product grid and activate Enable color swatches.
Earn extra revenue by referring Turbo, Flex, and Superstore!
You can earn commissions on referred sales of Turbo, Flex, and Superstore when you join our affiliate program in PartnerStack!
Affiliate Program Benefits:
- Earn 15% commissions - Receive up to 15% commission for each sale made through your referral link. This is a fantastic opportunity to generate additional revenue while helping your clients elevate their online presence.
- Exclusive access to our themes -As an affiliate, you'll gain insider access to our top-selling themes, including Turbo, Flex, and Superstore, which are known for their adaptability, robust features, and exceptional design.
- Dedicated support and resources - We provide our affiliates with dedicated support, marketing materials, and all the resources needed to successfully promote our themes.