Color swatches allow sellers to present the available colors of the items on the product page. This Add-On enables the potential buyers to visualize the color attributes of the products and increases the likelihood of conversions.

In this article:

Activate Color Swatches Add-On

Add Color Swatches to your Product Options


Activate Color Swatches Add-On

STEP 1

Go to your Shopify Admin, select Online Store.

Go to your Shopify Admin, select Online Store.

STEP 2

Select your 3.0 theme and click on Customize.

Select your 3.0 theme and click on Customize.

STEP 3

Click on Theme Settings.

Click on Theme Settings.

STEP 4

Go to Debutify add-ons.

Go to Debutify Add-Ons.

STEP 5

Click on Color swatches to enable this add-on.

Click on Color swatches to enable this add-on.

STEP 6

Click on Save to confirm changes.

Click on Save to confirm changes.

STEP 7

Under Theme Settings, navigate Color Swatches. Tick Enable color swatch on the product grid.

Note: Swatches on the product grid show the number of color swatches that are available for a particular product.

For instance, if a store is using a non-English language, instead of Color, they prefer Colori, and then they should enter this name in the Color variant option.

STEP 8

Click on Save to apply changes.

Click on Save to apply changes.

Add Color Swatches to your Product Options

STEP 1

Exit Theme Settings and click on Color Swatches.

Exit Theme Settings and click on Color Swatches.

STEP 2

Click on Add Color swatch.

Click on Add Color swatch.

STEP 3

Enter the color name and tap the checkered icon to choose a color from the HTML color chart.

Enter the color name and tap the checkered icon to choose a color from the HTML color chart.

STEP 4

You have an option to choose either a color shade from the HTML color chart or an image from your device, the library or free images. Click Select image.

You have an option to choose either a color shade from the HTML color chart or an image from your device, the library or free images. Click Select image.

STEP 5

Click on Save to apply changes.

Click on Save to apply changes.

STEP 6

To add the color swatch into the product option, go to Products, and select All Products.

To add the color swatch into the product option, go to Products, and select All Products.

STEP 7

Choose the specific product where you want to add the new color swatch.

Once the product is selected, go to the Variant section, select Add variant.

Choose the specific product where you want to add the new color swatch.  Once the product is selected, go to the Variant section, select Add variant.

STEP 8

Add the details of the new variant. Enter the exact spelling of the color swatch as written in the theme editor. Tap Save to apply changes.

Add the details of the new variant. Enter the exact spelling of the color swatch as written in the theme editor. Tap Save to apply changes.

After saving, you may view the new color swatch on the product page.

After saving, you may view the new color swatch on the product page.

This is an example of a product page with a recently added color swatch.

This is an example of a product page with a recently added color swatch.


Tip: You can pick a color using online HTML color picker tool: https://www.w3schools.com/colors/colors_picker.asp

Did this answer your question?