Configure color swatches

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

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

Displaying color swatches on the filter sidebar

Configure color swatch values

Steps to configure

1. From the app’s top navigation bar, click Color Swatch under the More dropdown.
2. In the color filter option tab, configure the color swatch values for each filter option.
3. Select the color code (if choosing the One Color / Two Color option) or upload a color image (if choosing the Image option) for each value.
4. 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 or Swatch-text Display Type.

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 top navigation bar, click Settings under the Filter section.
2. Scroll to the Swatches box.
3. Select an option: Hidden / Show – Squares / Show – Round.
4. Click Save to finish.

Display color swatches underneath products

NOTE: This function is only available with the APP’S PRODUCT GRID template.

a) Show up color swatches with variant images

Steps

1. From the app’s top navigation bar, click Settings under the Filter section.
2. Scroll to the Swatches box.
3. In the Display Type dropdown, choose Variant Image option.
4. Click Save to finish.

b) Show up color swatches with color values

Steps

1. From the app’s top navigation bar, click Settings under the Filter section.
2. Scroll to the Swatches box.
3. In the Display Type dropdown, choose Color Swatch option.
4. Click Save to finish.