Configure color swatches

Our app provides a feature to show up the custom color swatches on the collection page and search page. To set up this function, you must follow 2 steps below.

• Step 1: Set color values for each color option.
• Step 2: Configure to display on the collection page and search page.

Setting color values

Steps to configure

1. From the app’s dashboard, click Color Swatch under the Filter section.
2. In the color filter option tab, set up color for each filter option value.
3. In the dropdown, choose a color type for each value. This app provides 4 options: One Color / Two Color / Image / Text.
4. Select color code (if choosing One Color / Two Color option) or upload a color image (if choosing Image option) for each value.
5. Click Save to finish.

Question: There has no swatch option for me to configure. Why is that?

You should have at least one filter option with Swatch / Swatch-text style.

Displaying color swatch

Configure color swatch shape

This app allows you to show up color swatches in a Round / Square shape or even hide them.

Steps

1. From the app’s dashboard, click Product Layout under the Filter section.
2. Scroll to the Color Swatch box.
3. Select an option: Hidden / Show – Squares / Show – Round.
4. Click Save to finish.

Show up color swatch underneath products

This app allows you to show up color swatches in three types.

• Color swatch
• Variant image: See this guide to learn more.
• Text

Steps

1. From the app’s dashboard, click Settings under the Filter section.
2. Scroll to the Color Swatch box.
3. In the Product Options: Variant image dropdown, choose options to display as the variant image.
4. In the Product Options: Color swatch dropdown, choose options to display as the color swatch (such as color value).
5. In the Product Options: Text dropdown, choose options to display as text (such as size value).
6. Click Save to finish.