Jun 01, 2026

How to set up color swatches in Be Yours since the version 8.0.0

How to Set Up Color Swatches in Be Yours

If you are using Be Yours version 8.0.0 or later, you can display product color options as visual swatches on product pages and product cards.

Color swatches help customers quickly understand available colors, patterns, or styles without reading every option value. In Be Yours, swatches can be displayed using Native, Variant images, or Custom swatch sources.

Preview

Without color swatches	With color swatches
Watch preview	Watch preview

STEPS:

1. Understanding Swatch Sources

Be Yours supports three swatch sources:

Source	Description	Best used when
Native	Uses Shopify's native swatch data from product option values. The swatch can be a color or image configured in Shopify admin.	You want to use Shopify's built-in swatch system.
Variant images	Uses the image assigned to each variant as the swatch.	Each color variant already has its own image.
Custom	Uses the theme's color swatch configuration or matching image files uploaded to Shopify Files.	You want to manually control swatch colors or use custom swatch images.

Recommended setup:

Use case	Recommended source
You want Shopify-managed color/image swatches	Native
You want swatches to match variant images	Variant images
You want to define swatches manually in the theme	Custom

2. Enabling Swatches on Product Pages

To display color swatches on product pages:

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
Open a product template, such as Default product.
Open the Product information section.
Click the Variant picker block.
Set Type to Pills.
Under Color swatch, choose the Swatch source.
Choose the Swatch shape.
Click Save.

Available swatch source options:

Swatch source	Description
Variant images	Uses the image assigned to the product variant.
Custom	Uses theme settings and uploaded swatch images.
Native	Uses Shopify's native swatch data.

Available swatch shape options:

Swatch shape	Description
Circle	Displays swatches as round buttons.
Square	Displays swatches as square buttons.
None	Disables the swatch display for the variant picker.

To display swatches, make sure Swatch shape is not set to None.

3. Setting Up Native Shopify Swatches

Native swatches use Shopify's built-in swatch data. This method is recommended if you want to manage swatch colors or images directly in Shopify admin.

From your Shopify admin, go to Products.
Open the product you want to edit.
Make sure the product has a proper Product category selected.
In the Variants area, add or edit the product option, such as Color.
If Shopify offers a category metafield connection, connect the option to the color-related category metafield.
Add the option values, such as Black, White, Blue, or Red.
Edit each option value and assign a color or image swatch.
Click Save.

After setting up the native swatches in Shopify admin:

Go to Online Store > Themes > Customize.
Open the product template.
Open Product information > Variant picker.
Set Swatch source to Native.
Choose the swatch shape.
Click Save.

Native swatches only display when Shopify provides swatch data for the option values. If the swatches do not appear, check that the option values are connected correctly in Shopify admin.

4. Setting Up Variant Image Swatches

Variant image swatches use the image assigned to each variant.

This is a good option when each product color already has its own product image.

From your Shopify admin, go to Products.
Open the product you want to edit.
In the Variants area, open each variant.
Assign the correct image to each color variant.
Click Save.

Then enable variant image swatches in the theme:

Go to Online Store > Themes > Customize.
Open the product template.
Open Product information > Variant picker.
Set Swatch source to Variant images.
Choose the swatch shape.
Click Save.

Example:

Color value	Variant image
Black	Assign a black product image to the Black variant.
White	Assign a white product image to the White variant.
Blue	Assign a blue product image to the Blue variant.

If a variant does not have an assigned image, the swatch may not display the expected image.

5. Setting Up Custom Swatches

Custom swatches use the theme's swatch configuration or image files uploaded to Shopify Files.

This method is useful when you want to manually define the exact swatch color or image.

Step 1: Set the swatch source to Custom

Go to Online Store > Themes > Customize.
Open the product template.
Open Product information > Variant picker.
Set Swatch source to Custom.
Choose the swatch shape.
Click Save.

Step 2: Set up the color swatch trigger

The color swatch trigger tells the theme which product option should be displayed as swatches.

From your Shopify admin, go to Online Store > Themes.
Click the ... menu next to your theme.
Click Edit default theme content.
Search for trigger.
Find Products > Color swatch trigger.
Enter the option name used by your products.

Example:

Product option name	Color swatch trigger
Color	Color
Colour	Colour
Couleur	Couleur
Farbe	Farbe

The trigger must match the product option name. For example, if your product option is named Colour, the trigger should include Colour.

Step 3: Add custom swatch configuration

Go to Online Store > Themes > Customize.
Open Theme settings.
Open Color swatches.
Find the Configuration field.
Add one swatch rule per line.
Click Save.

Format:

Color name:Swatch value

Examples using HEX colors:

Black:#000000
White:#ffffff
Red:#ff0000
Navy Blue:#1f2a44

Examples using image file names:

Black:black.png
Navy Blue:navy-blue.png
Gold:gold-texture.png

Each rule must be written on its own line.

6. Using Custom Swatch Images

To use image files as custom swatches:

From your Shopify admin, go to Content > Files.
Upload your swatch image files.
Go to Online Store > Themes > Customize.
Open Theme settings > Color swatches.
Add the file names in the Configuration field.
Click Save.

Example:

Black:black.png
Navy Blue:navy-blue.png
Rose Gold:rose-gold.png

Image file naming rules:

Option value	Recommended file name
Black	`black.png`
Navy Blue	`navy-blue.png`
Rose Gold	`rose-gold.png`
Light Grey	`light-grey.png`

Rules to follow:

Use lowercase file names.
Replace spaces with hyphens.
Avoid special characters when possible.
Use common image formats such as PNG, JPG, or WebP.
Make sure the file name in the configuration matches the uploaded file name.

If you do not add a custom rule, the theme can also look for an uploaded image file that matches the option value handle.

Example:

Navy Blue

The theme will try to find:

navy-blue.png

7. Custom Swatch Priority

When Swatch source is set to Custom, Be Yours checks swatch values in this order:

Product-specific swatch image.
Swatch rule in Theme settings > Color swatches > Configuration.
Matching image file uploaded to Content > Files.
Color value fallback.
Blank swatch fallback.

1. Product-specific swatch image

The theme first checks for a product-specific image file using this format:

product-id-color-name.png

Example:

123456789_black.png

2. Swatch configuration

If no product-specific image is found, the theme checks the swatch configuration.

Example:

Black:#000000

or:

Black:black.png

3. Matching uploaded image file

If no custom configuration is found, the theme checks for an image file that matches the option value.

Example:

Black

matches:

black.png

4. Color value fallback

If no image is found, the theme may use a valid color value as the swatch background.

5. Blank swatch fallback

If no image or valid color value is available, the swatch may appear blank.

8. Enabling Swatches on Product Cards

Product card swatches are controlled separately from the product page variant picker.

To enable swatches on product cards:

From your Shopify admin, go to Online Store > Themes.
Click Customize.
Open Theme settings.
Open Product tiles.
Enable Swatches feature.
Choose the Swatch source.
Choose the Swatches position.
Choose the Swatches size.
Set the Maximum swatches to show.
Click Save.

Product tile settings:

Setting	Description
Enable swatches feature	Displays swatches on product cards.
Swatch source	Choose Variant images, Custom, or Native.
Swatches position	Display swatches at the top or bottom of the product card.
Swatches size	Choose small, medium, or large swatches.
Maximum swatches to show	Limit how many swatches appear on each product card.

If a product has more swatches than the maximum number, the theme will show a + count linking to the product page.

9. Recommended Setup

For most stores, we recommend one of the following setups:

Store setup	Recommended source
You are already using Shopify native option swatches	Native
Each variant has a clear product image	Variant images
You need full control over exact colors or pattern images	Custom

Setting	Recommended value
Type	Pills
Swatch source	Native, Variant images, or Custom
Swatch shape	Circle or Square

Setting	Recommended value
Enable swatches feature	Enabled
Swatch source	Match the product page source
Swatches position	Top or Bottom
Swatches size	Medium
Maximum swatches to show	4

Troubleshooting

If color swatches do not appear correctly, please check the following:

Make sure the product has more than one variant option value.
Make sure the option name matches the Color swatch trigger when using Custom or Variant images.
Make sure Swatch shape is not set to None on the product page.
Make sure Swatches feature is enabled in Theme settings > Product tiles if you want swatches on product cards.
If using Native, make sure the option values have native swatch data in Shopify admin.
If using Variant images, make sure each variant has an assigned image.
If using Custom, make sure each rule in the swatch configuration is written on its own line.
If using custom image files, make sure the file names match the option values.
If a swatch image does not appear, check that the file has been uploaded to Content > Files.
If the wrong option is displayed as swatches, check the Color swatch trigger in Edit default theme content.
Clear your browser cache and refresh the storefront.
Make sure you are using the latest version of the Be Yours theme.

Need Further Assistance

If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.