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
- From the app’s dashboard, click Color Swatch under the Filter section.
- In the color filter option tab, set up color for each filter option value.
- Select color code (if choosing One Color / Two Color option) or upload a color image (if choosing Image option) for each value.
- 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
- From the app’s dashboard, click Product Layout under the Filter section.
- Scroll to the Color Swatch box.
- Select an option: Hidden / Show – Squares / Show – Round.
- 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
- From the app’s dashboard, click Settings under the Filter section.
- Scroll to the Color Swatch box.
- In the Product Options: Variant image dropdown, choose options to display as the variant image.
- In the Product Options: Color swatch dropdown, choose options to display as the color swatch (such as color value).
- In the Product Options: Text dropdown, choose options to display as text (such as size value).
- Click Save to finish.