All Collections
Add-Ons
Shopping Enhancers
How to Add Color Swatches in the Debutify Theme?
How to Add Color Swatches in the Debutify Theme?
A guide on how to add Color Swatches in the Debutify Shopify theme.
Marang Marekimane avatar
Written by Marang Marekimane
Updated over a week ago

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.

In this article:


How to Enable the 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 Debutify Shopify theme and click on Customize.

Select your Debutify Shopify 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.

How to 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?