Color swatches

Add visually appealing color and color swatches

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

Color swatches can be used when product variants have colors
Product grid listing on Collection page

How to activate:

Enable color swatches under Product grid in the Theme settings:

Color swatches can be used when product variants have colors

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

Swatches are generated using these variant color names

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

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:

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.

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:

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.

Modify swatches.json in the Assets folder.

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.

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.

PreviousTransparent headerNextProduct page layout options

Last updated