# Color swatches (legacy)

{% hint style="info" %}
Shopify has released support for swatches that can be edited from the product page, making this feature unnecessary. Pipeline released support for Shopify native swatches in version 7.5.0 and Pipeline will maintain support for legacy swatches until version 8.0.0
{% endhint %}

## New swatches

**A very brief primer on what you need to know about the new system.** [Shopify Docs Here](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields).

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FFTWQ4eHEjCNXUcZVb486%2Fimage.png?alt=media&#x26;token=ba663edf-014b-4f12-93e3-021d3d9d8002" alt=""><figcaption><p>You can now edit the color swatches from the product page</p></figcaption></figure>

\
\
If the color is set to white, the swatch will show an extra border.&#x20;

<div align="left"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fk0PkvkVuRxmvLJdblDLU%2Fimage.png?alt=media&#x26;token=3b7893b8-968e-4592-b489-994970f5a6cd" alt="" width="188"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FgO6XWxheIDj2y8QaJBzs%2Fimage.png?alt=media&#x26;token=0d3fbd10-4b0b-4de4-b976-e35871e69b93" alt="" width="183"><figcaption></figcaption></figure></div>

You can edit the swatch color in the shopify product admin, and updating a color reference will update it for all products using that color.&#x20;

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fn3oqNHs1tvDdh6s0lp5B%2Fimage.png?alt=media&#x26;token=7db876a5-a40a-412e-8eb9-3aaec5f548bc" alt=""><figcaption></figcaption></figure>

When editing a swatch you have the ability to select a color or an image. Images will override colors. If both are set, the image will show. <br>

### Migrating to the new system

{% hint style="info" %}
To enable swatches, put your product in a category. Once categorized, you can connect your "Color" product option to the Color metafield for that type of product.&#x20;
{% endhint %}

The new swatches in Shopify are powered by Shopify's [categorization system](https://shopify.github.io/product-taxonomy/). To enable swatches, you'll need to put your product in a category. In the image below we will update from an old category to the new kind that supports swatches:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FHpbdXjr3tXsA992Kipax%2Fimage.png?alt=media&#x26;token=40d2e2d4-f0cf-444a-b14d-c4d0576b48c7" alt=""><figcaption><p>Retired categories will not enable swatches. You'll need to update to the new categories. </p></figcaption></figure>

Once that's done we can "Connect metafield" and select "Color" from the dropdown:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fx1nuhnELyzanNoWL2HFY%2Fimage.png?alt=media&#x26;token=ebb03c7e-ffba-4f99-b728-3256006177c5" alt=""><figcaption><p>The "Connect metafield" button will only show once a category has been selected. </p></figcaption></figure>

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FBMh7G2geT9zuTsexnTNG%2Fimage.png?alt=media&#x26;token=8022732d-1674-4be6-99b7-48e44714f9f3" alt="" width="159"><figcaption><p>Select "color"</p></figcaption></figure>

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fhzc7qrKtaY92qvh29lAE%2Fimage.png?alt=media&#x26;token=87bde107-0366-48cc-a71a-43b5326f9bd6" alt=""><figcaption><p>If your color names are standard, the swatches will be mapped automatically. </p></figcaption></figure>

Not all categories support color swatches. You can see a list of categories that have "Color" swatches [here](https://shopify.github.io/product-taxonomy/releases/unstable/attributes/?attributeHandle=color). \
\
Once the color metafield is connected, you'll be able to edit swatches in the Shopify admin, add images, and manage colors more easily.&#x20;

### Compatibility and upgrade window

Once your swatches are confugured, Pipeline will display color variants as swatches on product pages and collections. The design for the new swatch system and the legacy system is identical. We don't recommend using them together but they are visually identical.&#x20;

![Color swatches can be used when product variants have colors](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-Mj-cF_J6lAj-3OfoUHq%2F-Mj4Xx_DM2LbjqPshiKz%2FScreen%20Shot%202021-09-08%20at%206.14.01%20AM.png?alt=media\&token=7de771e6-2f1c-4b44-ac05-bbeef45ab9d1)

![Product grid listing on Collection page](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-Mj-cF_J6lAj-3OfoUHq%2F-Mj4YnXxfmD8qcyU4UFy%2FSep-08-2021%2006-17-45.gif?alt=media\&token=27691afb-7e1a-4d1c-bfa3-764c4858e30f)

Legacy swatches will be supported until Pipeline V8.0.0

***

## Legacy swatch documentation

Manage color swatch settings under the Product grid in the Theme settings:

![Color swatches can be used when product variants have colors](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-Mj-cF_J6lAj-3OfoUHq%2F-Mj4_SGyIOFIuTCYuBC_%2FSep-08-2021%2006-25-10.gif?alt=media\&token=4aadfba7-fdd1-426b-abea-36d6983a07bc)

{% hint style="success" %}
Pipeline will detect if your variant label is `Color` or `Colour` and automatically display swatches
{% endhint %}

### Customize the trigger words

To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values:

![Change trigger words by using the Language Editor](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-Mj-cF_J6lAj-3OfoUHq%2F-Mj4ai8reloUOlz2Ayp4%2FScreen%2520Shot%25202021-08-19%2520at%25201.25.29%2520PM.png?alt=media\&token=519431f6-86bd-42ea-bee4-70dd45602c13)

Trigger words are the variant label names in your product setup, these are matched with the Language editor:

![Tip: Products that have two color variants like "Top" and "Bottom" can be added to this list.](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5fa35d4bcff47e0017d2ebd5/file-LUmZIomcVP.jpg)

Quick access to the Language Editor:

![Click on the three dot ellipsis icon at the top of the Theme Edtior](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-Mj4zRNE3pDKNdMcle_D%2F-Mj507S0Hi9uZ6-ny8ua%2FScreen%20Shot%202021-09-08%20at%208.24.03%20AM.png?alt=media\&token=7985f453-f128-4026-89c7-128c424456c7)

### Swatch color names

Pipeline can easily detect simple color names and convert them to swatches. There are a total of 140 color names Pipeline 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:&#x20;

{% embed url="<https://groupthought.com/pages/swatch-colors>" %}
Click to view list of supported default color names
{% endembed %}

Swatches are generated using the variant color names. If you have simple color names or color names that are listed in the above list, Pipeline will display that color on the product page as a swatch:

![Swatches are generated using these variant color names](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5f98cca752faff0016af447b/file-iBM1tkmGuG.jpg)

If your variant color name is not listed in the above list, a default grey color swatch will be used:

![](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5f98dd21c9e77c001621c25a/file-WEQyLICa2V.jpg)

## **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://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-Mj50Cnm0Mjdr_BvZSZ7%2F-Mj51mosCg2cwptPdHHl%2FScreen%20Shot%202021-09-08%20at%208.32.49%20AM.png?alt=media\&token=6da3cd12-4971-4860-8554-af3a0c6251a0)

For example, to change the color displayed for Ink, we can change the HEX value of `#696969`:

```
    {
      "ink": "#696969"
    },
```

Change to a darker black:

```
    {
      "ink": "#323232"
    },
```

To find additional HEX color codes, visit:  <https://colorhunt.co>

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

### Add custom images to the assets folder

With Pipeline, you can upload your own custom swatch images and display them on product and collection pages:

![Product page form displaying swatch image](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-Mj50Cnm0Mjdr_BvZSZ7%2F-Mj5N-zvbY_ZBINOc5QV%2FScreen%20Shot%202021-09-08%20at%2010.00.48%20AM.png?alt=media\&token=a2f3c70c-6e4a-4782-b591-43b50146dc50)

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

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

We demonstrate uploading a custom image to use as a swatch:

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

Reference from the video:

```
    {
      "Sea Jungle": "sea-jungle.png"
    },
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pipeline.groupthought.com/products/product-pages/color-swatches.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.