Color swatches (legacy)
Add visually appealing color and color swatches
Last updated
Add visually appealing color and color swatches
Last updated
A very brief primer on what you need to know about the new system. .
If the color is set to white, the swatch will show an extra border.
You can edit the swatch color in the shopify product admin, and updating a color reference will update it for all products using that color.
When editing a swatch you have the ability to select a color or an image. Images will override colors. If both are set, the image will show.
Once that's done we can "Connect metafield" and select "Color" from the dropdown:
Once your swatches are confugured, Pipeline will display color variants as swatches on product pages and collections. The design for the new swatch system and the legacy system is identical. We don't recommend using them together but they are visually identical.
Legacy swatches will be supported until Pipeline V8.0.0
Manage color swatch settings under the Product grid in the Theme settings:
Pipeline will detect if your variant label is Color or Colour and automatically display swatches
To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values:
Trigger words are the variant label names in your product setup, these are matched with the Language editor:
Quick access to the Language Editor:
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:
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:
If your variant color name is not listed in the above list, a default grey color swatch will be used:
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:
Change to a darker black:
With Pipeline, you can upload your own custom swatch images and display them on product and collection pages:
How to:
Create a small square image (60x60 or 100x100 for best results)
Upload to the Assets folder
Modify swatches.json to include your color name and image
For the JSON file, your multiword variant can look like this:
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:
The new swatches in Shopify are powered by Shopify's . To enable swatches, you'll need to put your product in a category. In the image below we will update from an old category to the new kind that supports swatches:
Not all categories support color swatches. You can see a list of categories that have "Color" swatches . Once the color metafield is connected, you'll be able to edit swatches in the Shopify admin, add images, and manage colors more easily.
If your products have color names other than the listed colors in the , you can add your own color names and values or upload images to the Assets folder:
To find additional HEX color codes, visit:
