How to use Swatches in Broadcast

When using color variants in your product setup, Broadcast will display 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 swatches can easily detect simple color names. The theme will automatically match any valid CSS color names with a color swatch. Here's a reference of CSS colors names for you to view:

http://www.colors.commutercreative.com/grid/
https://www.w3schools.com/colors/colors_names.asp
https://www.quackit.com/css/css_color_codes.cfm

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:

rose-gold.png

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

Example:

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

nutmeg-red.png

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' %}

Example:

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. 

PART 2

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:


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:

OR

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

Choose duplicate:


Note:
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.

Still need help? Contact Us Contact Us