# Swatches (Updated)

Broadcast makes swatches simple. The theme supports solid color swatches, variant images, and siblings. Let's discover these swatch types and how to use them with your store. 

* **Solid color swatches -** Pick solid colors to help customers find products and variant options. Broadcast lets you customize the color to match your variant color name. 
* **Swatch images -** Match images in your Shopify image library to variant names. Similar to solid color swatches, you can map images directly to variant names. 
* **Siblings -** Display product images as variant options. This option is ideal for earlier versions of Broadcast and requires each variant option to be a separate product. While this is a more complex method of setting up your products, it provides a professional look to collection and product pages. 
* **Variant images -** This option displays the image associated with a product variant to help shoppers choose the right variant. You'll need Broadcast v5.6 or higher for this feature. 

## Solid color swatches

* Configure your swatch options in the Theme Settings -> Swatches. Here, you can customize the solid color swatches to appear in Regular or Large sizes and the shape, Circle or Square:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/oJTk78wQvakKJsSDvSfZ/solid%20color%20swatches%20with%20settings.jpg" alt=""><figcaption></figcaption></figure>

* We've included HEX color codes that you can customize directly in the Theme Settings. Each variant name can be mapped to a custom HEX color code for the perfect solid color swatch.&#x20;

### Customize colors

Here's how we can **customize** the **colors** and match them with the names used for our variants:

{% embed url="<https://www.loom.com/share/d1e34e16a04b416ab7750a6945fc0f55?sid=240a282c-40dd-4cef-8cbc-4a513dca0f75>" %}

We can use a site like Color Hunt to find HEX color codes easily:

{% embed url="<https://colorhunt.co/>" %}

* Broadcast can automatically detect 140 color names. A default grey color swatch represents all other more complex names. Here is a full list of color names that will automatically be converted to swatches:[ Color names list](https://groupthought.com/pages/swatch-color-names). You can easily override the colors, as shown in the above video.&#x20;

### Trigger words

* The **trigger** word for color swatches is configured in the Content Editor. By default, Broadcast uses variant types "**Color and Colour**" to trigger swatches.&#x20;

If your store uses different labels for the variant name, you can trigger swatches with a custom name:

{% embed url="<https://www.loom.com/share/4d80d66e00d9458ea23b81d0f3fb2f74?sid=00103756-607c-4d20-8a9d-2662d86312b9>" %}
How to **trigger swatches** for varant names **other** than **Color and Colour**
{% endembed %}

## Swatch images

Similar to customizing the colors for swatches, you can also use images to represent a swatch color. An image from your Shopify content library is used. **Instead** of using a **HEX** color code, the **filename** of your **image** is used in the swatch settings:

{% embed url="<https://www.loom.com/share/a70c2fc6f2a64f36b7697795e81b77d2?sid=57c293fb-ac1b-498f-85e0-95f5a517e30d>" %}
**Video overview on using images instead of a color code**
{% endembed %}

## Siblings

The Siblings feature is a fully integrated feature that displays **product images** as **swatches** in the product grid and product pages:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/yjiEv3DP6JMNGdbh1Dl6/Siblings%20grid%20main.jpg" alt=""><figcaption></figcaption></figure>

* The feature requires each variant option to be configured as a separate product, resulting in a much richer shopping experience for customers.&#x20;
* **Product images** are displayed **as swatches** on **both** the collection grid and product pages.

#### Learn more&#x20;

There are several steps involved with the Siblings feature; we have an entire section to cover them:

{% content-ref url="../../siblings" %}
[siblings](https://broadcast.presidiocreative.com/broadcast-v5/siblings)
{% endcontent-ref %}

## Variant Images

Broadcast can also display images with a feature called Variant Images. This option shows the associated variant image as a variant option on the product form:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/7BMgr9z0w2qkYNFDMuax/variant%20images%20main.jpg" alt=""><figcaption><p><strong>Variant images can be used as variant options</strong></p></figcaption></figure>

* Variant images were introduced in Broadcast 5.6. Be sure your theme has been updated to use this feature.&#x20;
* The variant images feature is **best suited** for measurements or **sizes:**

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/nCp29E3wdUbyRv7opcBT/variants%20with%20images.jpg" alt=""><figcaption></figcaption></figure>

* It can be configured for color use but **won't** display in the **product grid**. Here are some important steps about the feature:

{% embed url="<https://www.loom.com/share/86b2e2a8dae546d5bc98276cd859c07a?sid=e89ca1f7-ec9e-4241-ba72-199b14ddc35c>" %}

#### Learn more

Full details about variant images:

{% content-ref url="variant-images" %}
[variant-images](https://broadcast.presidiocreative.com/broadcast-v5/products/product-pages/variant-images)
{% endcontent-ref %}

***

## Earlier versions of Broadcast

The following instructions are for Broadcast 5.0 and earlier.&#x20;

{% hint style="info" %}
If you are using Broadcast 5.0 or earlier, please follow the instructions below to customize swatches
{% endhint %}

#### Customizing

If your products have color names other than the listed colors in the [Color names list](https://groupthought.com/pages/swatch-color-names), 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:

![](https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/aPYh1v35PWSQcJfHKjZe/json-1.png)

{% hint style="success" %}
To find additional HEX color codes, visit the link below.
{% endhint %}

{% embed url="<https://colorhunt.co/>" %}

#### Add custom images to the assets folder

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

![Collection filter panel](https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/R3ioLCpvvDoxvlvJlglv/Screen%20Shot%202021-08-19%20at%2011.51.09%20AM.png)

![Product page form](https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/2rafbmDDIIe3pJ6NPQ86/Screen%20Shot%202021-08-19%20at%2011.51.54%20AM.png)

How to:

{% hint style="success" %}

* 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
  {% endhint %}

#### Video tutorial

{% embed url="<https://www.loom.com/share/198a4cc8f532425ead917042fe2a452f>" %}

Reference from the video:

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

#### Avoid spaces in the filename

{% hint style="info" %}
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'.
{% endhint %}

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.&#x20;

#### 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:

{% embed url="<https://www.loom.com/share/7481c11353324bc38018bc95017fbe6b>" %}
More tips on adding custom images
{% endembed %}

#### Disabling swatches

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

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/v38lsKLZHvJLWtbzUPaK/theme-settings-swatch-toggle.jpg" alt=""><figcaption></figcaption></figure>