Comment on page
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
Manage color swatch settings under the Product grid in the Theme settings:
Color swatches can be used when product variants have colors
Pipeline will detect if your variant label is
Color or Colour and automatically display swatchesTo 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
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.
Quick access to the Language Editor:
Click on the three dot ellipsis icon at the top of the Theme Edtior
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:
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, Pipeline 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:
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:
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"
},
With Pipeline, you can upload your own custom swatch images and display them on product and collection pages:
Product page form displaying swatch image
How to:
- Create a small square image (60x60 or 100x100 for best results)
- Upload to the Assets folder
- Modify
swatches.jsonto include your color name and image
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"
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.
We demonstrate uploading a custom image to use as a swatch:
Reference from the video:
{
"Sea Jungle": "sea-jungle.png"
},
Last modified 4mo ago