Color swatches
Add visually appealing color and color swatches
Last updated
Add visually appealing color and color swatches
Last updated
Pipeline can display color variants as swatches on product pages and collections:
Enable color swatches under Product grid in the Theme settings:
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
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:
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.
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.
