Skip to main content
All CollectionsWidgetsShopping Enhancers
How to Use Color Swatches in the Debutify Theme?
How to Use Color Swatches in the Debutify Theme?

A guide on how to use Color Swatches Widget in the Debutify Shopify theme.

Micah Quinto avatar
Written by Micah Quinto
Updated over 2 months ago

What is the Color Swatches Widget?

The Color Swatches Widget is a useful tool for displaying a variety of colors in a visually appealing way. It is commonly used on websites to showcase different color options for products or design elements.

Customizing the Color Swatches Widget

The great thing about the Color Swatches Widget is that it can be customized to fit the design of your website. You can change the size, shape, and color of the swatches to match your branding or design aesthetic.


How to Enable/Disable the Color Swatches Widget?

The enablement or disablement of widgets depends on the version of your Debutify Theme. Please follow the correct guide based on your theme version:

How to Enable or Disable the Debutify Theme Widgets on versions 7.1 and above?

STEP 1

Access your Shopify Admin's Theme Library to open the theme customizer.

STEP 2

Click on the Theme settings icon.

Click on the Theme settings icon.

STEP 3

Scroll down and locate the Debutify Widgets tabs. You’ll find the following categories:

  • Debutify Free Widgets

  • Debutify Paid Widgets

Expand the relevant widget category by clicking on the arrow next to the tab name.

STEP 4

To enable a widget, check the box next to the widget name. To disable it, simply uncheck the box.

How to Enable or Disable the Debutify Theme Widgets between versions 6.0 and 7.0.2?

STEP 1

Sign in to your Debutify Theme Login Portal at platform.debutify.com, and navigate to the Widgets section.

STEP 2

Choose your widget from the Widgets menu, either by searching or filtering by category.

STEP 3

To enable or disable your chosen widget, click on the toggle switch.

STEP 4

  • To enable the widget, confirm by clicking Enable in the confirmation message that appears.

  • To disable the widget, confirm by clicking Disable in the confirmation message that appears.

Note: Enabling or disabling widgets on Debutify Login Portal is available only in Debutify Theme versions 6.0 to 7.0.2. Please make sure your theme is within this version range to access this feature.


How to Manage the Color Swatches Widget Settings?

STEP 1

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 2

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.

STEP 2

Click on Add Color swatch.

STEP 3

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

STEP 4

Choose 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 to the product option, go to 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, and 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.

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?