Custom Color Swatches

Author: An Do 7204 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. Install the Custom Swatch Colors extension

When you come to this extension, it will allow merchants to set the colours for Product Variant colors, and easier for you to get the extension with a click on the “Install now” button. If some situations where you no longer need this extension, you can also go to this button to “Uninstall” it. Please continue reading for more details below.

Go to Extensions → Find in the list or search for the extension
When you find it, click Install now.
Then go to Elements → Extension.
Drag/Drop it into the position that you prefer.

2. Custom Colors Swatches Settings

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: Now, you open Extension settings -> Settings -> Add item to enter the Color name and pick the color that you prefer. You should enter the same name as the one you set in Shopify, including uppercase, lowercase, and spaces.

When you hover to the right side, you can view a Trash Bin icon, so you can delete it there. After done, click Save.

If the Color name is Blue, then you should enter “Blue” in the setting, not “blue”

Step 3: To display what you have done above, go to Picker type > Color picker > Enter the Variant name to start displaying the colours.

=> Variant name here could be: Colour, Size, etc.

Notice: Make sure to type exactly the color option’s name here. The name must be the same as the name you typed in Shopify Admin > Products , including uppercase, lowercase, and space

2.3 Import/ Export Settings

Here, you can export the colour variants as a JSON file and then import it to other stores if you have some stores with the same products and variant options.