How to use Swatches in Broadcast

When using color variants in your product setup, st will Broadcadisplay the color variants options as swatches on Product pages:

The swatches also appear on Collection pages in the Quick View popup:

Broadcast will detect if you any have variant options setup as:

"Color" or "color" 

Note: If you're using a different language or spelling like "Colour", there are notes at the bottom of this article on how to detect a different spelling. 

If you have any of these as your variant type, Broadcast will then try and match the color you've assigned your variants with swatches:

Color Names

Broadcast can easily detect simple color names and convert to swatches. There are a total of 140 color names Broadcast can detect, all other more complex names will be represented by a default grey color swatch. You can upload your own custom color names and graphics as described below. Here is a full list of color names that will automatically be converted to swatches: 

Swatch Color Names

Matching Colors and using Custom Color Names

Since there are a limited number of CSS Color names, not all colors will match well. Here's an example where we've added Gold as a color variant which is a valid CSS color name:

Next, we've added Rose Gold as a color way, notice how similar these two colors appear:

Rose Gold is not an actual CSS Color so the swatch that's displayed is almost the same as Gold. 

In this case, we can add a custom image to display a custom swatch color for Rose Gold.

To do that, we need to have an .PNG image file to match your color. You can crop part of an actual product image if you like to show texture or the exact color. 

For our Rose Gold example, I'll simply crop out a portion of my product and make a small .PNG image like:

The swatch image can be a small file 85x85 or 100x100 pixels will work fine.

I'll name this file:


Notice I've used a hyphen between the words. Shopify needs you to add hyphens when you have a space or special characters. 


If your custom color is "Nutmeg/Red" the correct filename would be:


Note: Be sure when naming your image files, use lowercase characters only like the above example. Mixed case can cause swatches to not appear. 

Adding Custom Swatch Images

For our Rose Gold example, We can upload the rose-gold.png image file to the Assets folder in the Code Editor:

From the Assets folder, choose Add a new asset:

Click on Choose File and browse on your computer to the file, then use the Upload asset button to complete:

Now when we view our product, the swatch has picked up our custom image for that Rose Gold color option:

The collection Quick View popup will also display the correct swatch color:

You can apply this to for any image color. Be sure you replace spaces and special characters with a hyphen in the filename and use .PNG as the image format. 

Turning off Swatches

You can turn off swatches and replace with the standard select dropdown option:

The setting is found under Theme settings -> Product gird:

In the Product grid options, uncheck the Enable color swatches checkbox to turn off:

Color and Colour spelling

If you have some products that have a variant label as "Color" and some as "Colour", you can add an extra line of code to catch both types.

Use the code editor. From the Snippets folder, open product-form.liquid:

Add a couple blank lines after this include swatch line and before the endif line:

Add this code below that line:

{% include 'swatch' with 'Colour' %}


Save the file:

Changing the spelling of Color for other languages

For languages that need to have swatch support with a different spelling, you can change the code in the swatch.liquid file which is in the Snippets folder:

Modify the spelling to match your variant label spelling in the product setup. 


You will also need to change the product-form.liquid to include the new spelling:

Modify the spelling to match your variant label spelling in the product setup:

Save the file:

Modify the code at your own risk. Invisible Themes will not provide any warranty or support for code changes. Please work with a developer or Shopify Expert to ensure proper customization. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.

Make a duplicate (backup) of your theme first

Pro tip: Always make a duplicate of your theme before performing code changes. 

Example - Live published theme:


For draft unpublished themes, use the actions link for that theme:

Choose duplicate:

Swatches for collection and product page (Theme Version 1.7.2 to 1.8.X)

To make it easier to work with swatches on the 1.7.2 version of the Broadcast theme what you need to do is enable the swatches from the Theme Settings.

After you have gone through these steps, it is time to modify the code in the product-grid-item.liquid and theme.scss.liquid files.

In the product-grid-item.liquid you must add this code snippet between </div> and {% if settings.quickview_enable %}

This is how it should look.

In the theme.scss.liquid you must add this code snippet at the bottom of the theme CSS code.

After you have done this you can start adding .png images for your swatches in the assets folder as explained in the documentation.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.