# 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. {% stepper %} {% step %} #### **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.
{% endstep %} {% step %} #### 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.
{% endstep %} {% step %} #### Make sure you are using **Source: Shopify Settings** Ensure that the **Source** option is set to **Shopify Settings**.
{% endstep %} {% endstepper %} ## 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: {% stepper %} {% step %} #### Access App Settings Access **Ecombe Page Builder app** -> **Preferences** -> **Swatch color** then click **Add Swatch** to add new Swatch.
{% endstep %} {% step %} #### 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.
{% endstep %} {% endstepper %} ## 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 {% hint style="info" %} Have a question? Contact us via **in-app live chat**. We'll reply in few minutes. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.ecombe.com/editor-and-functions/editor-features/how-to-setup-color-swatches.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.