Color swatches

Story can display color variants as swatches on product pages and collections:
Color swatches can be used when product variants have colors

Collection filtering helps customers find items by color:
Product grid listing on Collection page
Multiple swatches can be selected for greater control. For example, clicking on both red and blue in the filters would show all products that match the colors red and blue. 
How to use
Manage color swatch settings under the Theme settings -> Product grid. By default, swatches are enabled:
When enabled, Story will detect if your variant label is Color or Colour and automatically display swatches
When unchecked or disabled, the swatches turn into variant option boxes:
Customize the trigger words
To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values:
Open the Languge Editor (Edit languages)
Change the trigger words under General -> Swatches
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.
Swatch color names
Story 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: 
Swatch Color Names
groupthought
Click to view list of supported default color names
Swatches are generated using the variant color names. If you have simple color names or color names that are listed in the above list, Story will display that color on the product page as a swatch:
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:
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:
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​
Color Palettes for Designers and Artists - Color Hunt
colorhunters
Adding custom swatch images
With Story, you can add your custom images to represent swatch colors. We have a full tutorial on how to add custom images and display them as swatches on our Pipeline theme support page:
https://pipeline.groupthought.com/products/color-swatches#add-custom-images-to-the-assets-folder​
The process is exactly the same when using with Story theme. 
Learn how to add custom images:
Color swatches
|  Pipeline theme
There is a 3-minuite video with full walk-through on how to add custom images

Unique product tabs

Next - Products

Inventory countdown

Last modified 4mo ago

Copy link

Outline

How to use

Customize the trigger words

Swatch color names

Customizing

Add custom color names and values to swatches.json

Adding custom swatch images