Show color swatch for filter option

Color swatches help shoppers easily filter products by color. Instead of just seeing text (like "Red"), they’ll see a colored circle or image swatch. This makes the shopping experience more visual and engaging.

---

🛠️ Step 1 – Set the Swatch display type for the filter option

1. Open the Smart Product Filter & Search app from your Shopify admin.

2. Click on Filter in the left sidebar.

3. Click the filter sidebar you want to edit.

4. Click the ✎ button next to the Filter Option you want to edit

5. In the Display Type, select Swatch/Swatch-text mode.

---

⚡️ Step 2 - Choose the filter option to set color swatch value

1. From the app’s left navigation bar, click Filters.

2. Go to the Color Swatch tab.

3. In the color tabs, select a filter option to set the color swatch values.

   

🎯 Step 3 – Choose Swatch Mode

Set how each swatch value should display (color code, image, or text).

Mode	Description
🎨 Color code	Show a simple color circle (e.g., red, blue, green).
🖼️ Image	Show an image as the swatch (e.g., fabric texture or pattern).
🧾 Text	Show the color name as plain text (useful for unusual names).
🌀 Dual colors	Combine two color codes in one swatch (e.g., striped items).

Step 4 – Save Your Settings

After making your changes, scroll to the top or bottom of the page and click Save.

---

💡 Tips for Best Results

• Make sure your product options are labeled consistently (e.g., "Red", not "red" in one product and "Red" in another).

• For color codes, use valid hex values (e.g., #FF0000 for red).

• For swatch images, keep the image size small and square for better display.

---

💬 Need Help?

Have questions or need help setting it up? Contact our support team: 📩 [email protected]