What are swatches and shades?
The Beautify theme is crafted for color-centric shopping experiences, where visual nuance and shade accuracy build customer confidence. Whether choosing a foundation that matches skin tone, a new lipstick or the perfect fabric choice, shoppers rely on precise visual cues to make informed decisions.
On the product page, Beautify supports this journey with color swatches, intuitive filtering by shade families and a second dual swatch selector showing the full color name. On collection pages, swatches can be shown in product cards and filters.
Video guide available
Swatch pickers and shade selector on a product page
Swatches on a product card
What are swatches?
Swatches are small visual indicators displaying product colors. Instead of listing colors only as text, swatches provide a more intuitive and engaging way for customers to interact with the available choices.
- Swatch
A circle of color shown in the variant picker, on the product card and in the product filter. The color is taken from a Shopify color category metafield. - Dual swatch picker
An additional dropdown shown above the circle swatches. This displays both a swatch and also lists the color name. The dual swatch picker makes it easier for customers to find a color name and is particularly useful when a product has many similar shades. - Product image swatch
Beautify's combined products / sibling products can display Shopify swatches or show a square or circular product image swatch if the product doesn't have a color option using color category metafields. Refer to the combined products guide for more information.
How to set up swatches
The Beautify theme supports Shopify's native swatches for use on the product page and product cards.
Steps
- Open the Theme Editor, and click on Theme Settings > Swatches.
- Choose Swatches to display to be Shopify. (Selecting None will hide variant swatches.)
Shopify swatches use a color category metafield. Shopify have a color swatch category metafield guide which explains how to set these up.
Steps
- From your Shopify admin, go to Products and click the product that you want to edit.
- In the Variants section, click the Color option
- Connect to a color category metafield. The option values are automatically filled with any entries you have already added to the category metafield. You can select more option values or create new ones. If you want to add custom option values, then click Edit, and then click Add new entry.
Note
How to show the dual swatch selector
The dual swatch selector is an additional dropdown which lists out the color names together with a swatch to make it easier for customers to find the color that they usually purchase. This is particularly useful when there are many similar colors and a visual swatch might not be sufficient to identify the correct product.
Steps
- Open the Theme Editor, and navigate to the Product template.
- In the Variant picker block, select Show dual swatch selectors.
How to show a product image swatch
Product image swatches can be displayed for products using the Beautify combined products method. This method links together sibling products using metafields and/or metaobjects. Refer to the combined products guide for more information.
Steps
- In the Shopify admin, create the combined products to be linked. Do not add a color option.
- Follow the set up steps required to group together the sibling or combined products. Refer to the combined products guide for more information about setting up the metafields or metaobject required to link the products together.
- Select Enable Combined products in Theme settings to turn on the Beautify combined products feature and add the required references to the metafields/metaobject.
- Choose whether to Show combined swatches on product cards.
- Set the preferred Combined products selector size and shape to control the swatch used on the product page.
What is the shade picker?
The shade picker is used to refine by shade directly on the product page, helping customers zero in on their perfect match. A row of shades is displayed above the color swatches on the product page. This can be used to filter the swatches. This shade filter is particularly helpful when there are a lot of shades.
The shade picker uses metafields. Visually the shade picker will look the same for standard products with color variants or combined products where each color is a separate product, but the setup is subtly different.
Variant swatches: To categorize variant swatches into shades, create a variant metafield with namespace and key 'theme.shade' and set this on the relevant variants.
Combined products swatches: To categorize combined products into shades add a product metafield with namespace and key 'theme.shade' and set this on the relevant products.
Note
How to setup the shade picker for a product with color variants
Steps
- In the Shopify admin area, create Single line text variant metafield with the namespace and key 'theme.shade'. Choose the type One value.
- In the Shopify admin area, go to Products and open the product variant where you wish to filter by shade.
- Scroll down to the Variant metafields section and enter the label text required for that specific variant in the relevant metafield.
How to setup the shade picker for Beautify's combined products
Beautify’s Combined products feature offers a smart solution for grouping individual products into a unified, variant-style display. This type of feature is often known as sibling products, connected products or product grouping. It’s especially valuable for stores that showcase multiple color options. Each color can be presented as a separate card on collection pages, while on the product page the color picker behaves in the same way as for a standard product with variants. Refer to the combined products guide for more information.
As each color is created as a separate product, the setup for the shade picker also needs to be at product level.
Steps
- In the Shopify admin area, create Single line text product metafield with the namespace and key 'theme.shade'. Choose the type One value.
- In the Shopify admin area, go to Products and open the product where you wish to filter by shade.
- Scroll down to the Product metafields section and enter the label text required for that specific product in the relevant metafield.
Tip
How to video guide
FAQs
What are Beautify combined products?
The Beautify theme supports a method of combining, connecting or creating sibling products which allow the presentation of separate products as if they were variants. This makes it possible to show all the colors of a product as cards on the collection page and to have seamless switching between products on the product page. Refer to our combined products guide for more information.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us