Latest

Swatches

Product variant swatches

the Broadcast will display swatches for color variants in collection filtering and the product form on product pages.

Broadcast will detect if your variant label is Color or Colour and automatically display swatches. You can also add your own trigger words to this list.

Customize the trigger words

To customize the trigger words that activate swatches, use the Language Editor (Edit default theme content) and add or modify the values:

You can add more trigger words that will help use swatches for other options.

The result is the same and you can use different custom swatches as well.

Colors

Broadcast can easily detect simple color names and convert them 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: Color names list.

New - Broadcast 5.1 and above

If you've downloaded Broadcast 5.1 or newer, please follow these instructions for customizing swatches.

Swatches are now easier to manage and control. All the settings for color swatches around are found under Theme settings -> Swatches.

Key changes

  • Color codes are now managed under Theme settings.

  • Swatch Images are now used from the Shopify files.

  • Siblings can now use a color swatch instead of a product image.

Video walk-through on all swatch changes in Broadcast 5.1:

To find additional HEX color codes, visit the link below.

Older versions of Broadcast, before v5.1

The following instructions are for Broadcast 5.0 and earlier.

If you are using Broadcast 5.0 or earlier, please follow the instructions below to customize swatches

Customizing

If your products have color names other than the listed colors in the Color names list, you can add your own color names and values or upload images to the Assets folder:

Add custom color names and values to swatches.json

Use the swatches.json file located in the Assets folder to add your own custom names and HEX color values:

To find additional HEX color codes, visit the link below.

LogoColor Palettes for Designers and Artists - Color Huntcolorhunters

Add custom images to the assets folder

Upload your own custom swatch images and display them on product and collection pages:

How to:

  • Create a small square image (60x60 or 100x100 for best results)

  • Upload to the Assets folder

  • Modify swatches.json to include your color name and image

Video tutorial

Reference from the video:

    {
      "Stripes": "stripes.jpg"
    },

Avoid spaces in the filename

We recommend if your image has spaces, replace them with an underscore or dash: Instead of 'Light Navy.png' use 'light_navy.png' or 'light-navy.png'.

For the JSON file, your multiword variant can look like this:

    {
      "Light Navy": "light_navy.png"
    },

The variant name can have spaces. However, we recommend for the filename of the image, use an underscore or dash instead of a space.

Video tutorial - More tips for custom images

In this short video, we'll look at filenames and an example of creating a custom image for a swatch:

Disabling swatches

Swatches can be toggled on and off in the Theme settings from the Swatches tab:

PreviousFAQ AccordionsNextVariant images

Last updated