How to setup Color swatches

This article introduces what Color Swatches are and guides you on how to display Color Swatches on an Ecombe page.

What are Color Swatches

Color Swatches are a visual way of displaying product variants or options. Most commonly shown as color blocks, circles, or small images. Allowing customers to choose by seeing rather than reading text.

Specifically, Color Swatches help to:

• Simplify the variant selection process by making it easy for customers to compare and choose the desired color or style at a glance.

• Provide instant visual feedback, as selecting a swatch updates the main product image to reflect the chosen option.

• Enhance visual appeal and interactivity, making the product page feel more engaging and modern.

• Reduce cognitive load and decision fatigue by presenting options visually instead of relying on text-based lists.

• Improve layout efficiency, since swatches take up less space than text labels or dropdowns, especially when many options are available.

• Represent colors and patterns more accurately, ensuring the product’s appearance on the website stays consistent with the brand’s aesthetic.

In summary, Color Swatches are a visual method for presenting product variants that improves usability, clarity, and overall user experience on a product page.

Where do Ecombe Color Swatches get their data from?

Ecombe provides two data sources for displaying Color Swatches:

• Shopify Settings

  Ecombe Color Swatches pull data directly from the product variants configured in your Shopify Admin.

• App Settings

  Ecombe Color Swatches use data configured in Ecombe App Settings.

  Please refer to this article to learn how to add swatches in Ecombe App Settings.

How to display Color Swatches from Shopify Settings

To display Color Swatches, you need to enter the exact name of the product option (for example: Color, Colour) that should be displayed as swatches.

1

Find the product option name

In Shopify Admin, go to Products → Select a product.

You will see the product option name that can be displayed as Color Swatches.

Please remember the exact option name or copy it to use in the Color Swatches field in the Ecombe Editor.

2

Insert the option name into the Color Swatches field in the Ecombe Editor

Put the product option name into the Color Swatches field in the Ecombe Editor.

3

Make sure you are using Source: Shopify Settings

Ensure that the Source option is set to Shopify Settings.

How to display Color Swatches from App Settings

To display Color Swatches using App Settings, select Source: App Settings.

[Screenshot]

After selecting this option, Color Swatches will be displayed based on the swatches configured in Ecombe Swatch settings.

Here is how to set up Color Swatches via App settings:

1

Access App Settings

Access Ecombe Page Builder app -> Preferences -> Swatch color then click Add Swatch to add new Swatch.

2

Add Swatch

• Click to Color Swatch Box to add color swatch. You can use the color picker or insert the color code.

• Click to Image Swatch Box to add image swatch. To add an image swatch, copy the image link from your Shopify store and paste it into the Image link input field.

Common issues

When should I use App Settings?

If your store has many products, using Swatches from Shopify Settings requires manually editing each product to add variant options, which can be very time-consuming.

Instead, you can use Ecombe Swatch Colors. With this method, you only need to configure swatches once in Ecombe Preferences, saving significant time compared to editing each product individually.

Please refer to this article to learn how to add swatches in Ecombe App Settings.

What is the difference between Variant Image and Variant Style: Color / Image?

What is Variant Image

Variant Image refers to the image assigned to each product variant.

This option allows the swatch (variant selector) to display the actual product image for each variant.

What is Variant Style: Color / Image

The Variant Style: Color / Image option allows the swatch selector to be displayed as:

• Color swatch: solid colors such as blue, red, yellow, etc.

• Image swatch: fabrics, textures, or patterns.

How to use

• Choose Variant Image if:

  • You want the swatch to display real product images

  • You don’t want to prepare separate swatch assets

• Choose Variant Style: Color / Image if:

  • You want the swatch to display specific colors or patterns

  • You want a clean and consistent swatch design

Have a question?

Contact us via in-app live chat. We'll reply in few minutes.