Custom Color Swatches

Author: An Do 7296 views

The Custom colors swatch extension is used to add colors to product variants. As you know, Shopify only allows you to add images for variants but does not allow you to add colors. For example, your product has some color options, and you want to add specific colors to your variants like the Pink, Orange, or Gray variants instead of using images. Or In some cases where you do not want to display the product thumbnail but want to use the color for the variant, this extension will allow you to do that.

Note: When you finish installing the Custom Color Swatches extension and finish configuration, it will automatically show when you publish. You can use this extension on Free plan (with limited access). Upgrade now to unlock full EComposer Color Swatches’s Functionality

This extension can be used on pages like the product, collection page, or elements where you have variants displayed.

1. How to Install the Extension

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Custom colors swatch extension.
Step 3: Click Details and install the extension on your store.

2. Customize

Step 1: Go to Shopify admin > Edit Product > scroll down to find the Variants tab, then start adding the colour for your product. If you need more details about what a Variant is from Shopify, please read more details here.

Step 2: Open CRO Extensions and locate the Custom colors swatch extension.

Go to Settings > Add swatch color (Enter the color name and pick your preferred color)

If you need to remove a color, click the Trash Bin icon on the right side. Once finished, click Save.

If it is **‘Blue’** in Shopify, enter **‘Blue’** (with a capital B), not **‘blue’**

Step 3: To apply the changes you made above, navigate to Picker type > Color picker, then enter your Variant name to display the colors.

(The Variant name should match your Shopify variant name, for example: Color, Colour, or Size.)