Product swatches make options visual and interactive, helping customers quickly choose variations (color, size, style), reduce confusion, and boost conversion rates.
1. Product Color Swatch
There are two ways to add color swatches to products: by using Shopify metaobjects or by adding custom colors directly through the Color Swatch section in the theme. We recommend using Color Swatch section in case your store has a large number of products that need to be assigned colors.
1.1. How to use color swatch by Shopify Metaobject
The Color metaobject allows you to add colors more flexibly and give them custom names, compared to only using the basic colors available in product variants such as red, pink, or black.
You can go to Shopify Admin → Products to start adding colors to your products.
Step 1: Select Category for the product
You can choose a suitable category for your product first. This is a required step in order to display the color metafield and connect it with the Color Metaobject.
Please help me to see the video below:
Step 2: Add Colors to Products
In the Variants section > click Add options like size or color > Select Color as the option type.
Please help me to see the video below:
Once you have completed the steps correctly, please go to Theme editor > Product page > add "Variant Picker" block to show color swatch
1.2. Show color by Color swatch section of the theme
To access this section, go to Theme editor > Template > Products > only-config
Step 1: Add variant color for the product
This step is similar to the first step in adding colors with a Metaobject, but instead of creating a color via Metaobject, you will simply add the color name as shown in the image below.
Step 2: Configure color trong Color swatch section
Enter a color name: Type the name into the color name box. The color name must exactly match the option values added in your product variants.
Choose a color or upload an image: Select a color from the picker or upload an image to display as the swatch.
Copy the color code: Click Copy color code.
Please help me to see the video:
Step 3: Create Metaobject and add the copied code
Go to Shopify settings → Metafields and metaobjects → Metaobject definitions => Add definition. Fill in the following information:
Name (required): Theme Swatch
Type: theme_swatch
Then click "Add field" in Fields section and set up as follows:
Type: JSON
Name (required): Colors
Required field: Checked
Click 'Add' > click 'Save'. Please follow this video:
Add the Copied Color Code
Go to Shopify admin > Content > Metaobject > find Theme swatch, then click "Add Entry" and paste the copied color code. Please help me to see the video
1.3. Show Color Option With Different Name
The theme supports default option names like color, colors, couleur, colour. If you use a different name (e.g., Slides Color), you can define it so the theme recognizes it as a color option and displays the color/image correctly.
Please go to Theme editor > Edit Theme default content > add the word "Slides Color" to Color section
2. Product Image Swatch
You can add image color for product at Shopify admin > Products, then add product image for each color variants. Please help me to see the video:
3. Other product Swatch Types
Apart from Color and Image, the theme also supports the following types. Go to Product page > Main product > Variant picker > Color selector type to configure the swatch types, please follow this video:
You can also change the size of the color variant by the option "Color selector size"
4. Show Product Color Swatch On Multiple Languages
For multi-language stores , add the option name in each language (e.g., Japanese: 色) to the theme’s recognized list. This ensures swatches appear correctly and translate with your translation app. If the color option name is not added in all languages, swatches will not display.
You can go to the Translation &Adapt app to translate the option names. Please follow this video.
