# Color swatches

Pipeline can display color variants as swatches on product pages and collections:

![Color swatches can be used when product variants have colors](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5fa30b48cff47e0017d2ea08/file-PG6PWM9uyP.jpg)

![Product grid listing on Collection page](/files/-MN036XMT6XAwoIUhiIi)

#### How to activate:

Enable color swatches under Product grid in the Theme settings:

![Color swatches can be used when product variants have colors](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5fa3121a4cedfd00165ad3c0/file-zxYN1x2nK4.gif)

**Swatch color names**

Pipeline can detect a large number of variant color names and convert them into color swatches. There are over 120 color names built-in to Pipeline. A more advanced step allows you to change the color values, names and add your own custom images and color names.

Full list of color names that will automatically be converted to swatches: 

[Groupthought Swatch Color Names](https://groupthought.com/pages/swatch-colors)

![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)

**Language support for variant name**

Pipeline has a Language Editor setting to check which variant name is used for colors. For English, the variant names used are "Color" and "Colour". These values can be changed in the Language Editor.  Other languages will have their own value. You can easily modify and add additional names using the Language Editor:

Use " **Edit languages**" to update Swatches:

![](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5fa34945cff47e00160b6d4a/file-kHvcv99Zbo.gif)

Swatch language options are under General. Use commas to separate multiple variant names:

![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)

## **Custom colors and images**

*Advanced optional features*

Custom color names, color values and swatch images can be used for your variant colors by modify a file in your theme. 

#### How to:

{% hint style="info" %}
This advanced step requires you to use the Code Editor in your Shopify Admin. Always make a duplicate of your theme before making any changes in the Code Editor. This is an important step and should not be skipped. Any type of mistake can result in your store not functioning correctly and unable to sell products. If you are not familiar with using the Code Editor, please request assistance from a Shopify Expert. 
{% endhint %}

![](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5fa31a5246e0fb0017fc8dc9/file-omN5iq0MHp.gif)

Modify `swatches.json` in the `Assets` folder. 

![](https://s3.amazonaws.com/helpscout.net/docs/assets/591c8a010428634b4a33375c/images/5fa31b95cff47e0017d2ea9f/file-j2KzmUXNVD.gif)

In `swatches.json`, you can replace the name to match your variant color name. For example "cream" can be changed to "Vanilla Cream" to match your store variant name. The color value is a hex color code. You can modify the color code value by looking up hex color code from the color picker in the Theme Editor color settings. If you use both "Cream" and "Vanilla Cream" in your store, replace the name of another unused color entry and modify the hex property value. 

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

Custom swatch images can be used for variant colors. Upload a swatch image in SVG, PNG or JPG to the `Assets` folder. The swatch image filename is used as the property value. See "Demo Image" as an example in the first entry of `swatches.json`. 


---

# 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/pipeline-5/products/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.