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 left navigation bar, click Filters.
2. Choose the Color Swatch tab.
3. In the color tabs, configure the color swatch values for each filter option.
4. 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.
5. Click Save to finish.

Question: There is 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 color swatches in a Round / Square shape or even hide them.

Steps

1. From the app’s left navigation bar, click Filters section.
2. Go to Product Grid tab.
3. Scroll down to the Swatches box.
4. Select an option: Squares / Circle in the Style field.
5. 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 left navigation bar, click Filters section.
2. Go to Product Grid tab.
3. Scroll down to the Swatches box.
4. In the Display Type dropdown, choose the Color Swatch option.
5. Click Save to finish.