Color Swatches allow sellers to present the available colors of the items on the product page. The Color Swatches add-on enables the potential buyers to visualize the color attributes of the products and increases the likelihood of conversions.

When customizing the color swatches, make sure the color name matches the color swatch name.

The Color Swatches add-on is available in Debutify 3.0.0 Shopify theme and later versions.

STEP 1

Go to your Shopify Admin, select Online Store.

STEP 2

Select your Debutify Shopify theme and click on Customize.

STEP 3

Click on Theme Settings.

STEP 4

Go to Debutify add-ons.

STEP 5

Click on Color swatches to enable this add-on.

STEP 6

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.

STEP 1

Exit Theme Settings and click on Color Swatches.

STEP 2

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.

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.

STEP 5

Click on Save to apply changes.

STEP 6

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.

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.

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.

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