Show product options under product cards

Showing product options directly below each item on your collection pages makes it easier for customers to see available choices, improving their shopping experience. With the Smart Product Filter & Search app, you can display product options in three styles:

✅ Variant Images – Displays product variants as small images. ✅ Color Swatches – Shows variant colors using color blocks. ✅ Text Labels – Displays options as simple text (e.g., sizes: S, M, L).

Note: This feature only works if your collection page uses the app’s Product List layout.

1. Show Product Options as Variant Images

🎯 Best for products with different colors, patterns, or styles represented by images.

1. Ensure each variant has an assigned image in Shopify Admin (Go to Products → Select a product → Assign images to each variant).

   
2. Open Smart Product Filter & Search from your Shopify admin.

3. Click Filter → Product Grid tab.

4. Make sure you're using an App Template layout.

5. Scroll to Swatches → Click Add Swatch Option.

6. Select the product option (e.g., Color) and set the style to Variant Image.

7. Click Save.

---

2. Show Product Options as Color Swatches

🎯 Best for products with multiple colors where visual color blocks are more useful than images.

1. Open Smart Product Filter & Search.

2. Click Filter → Product Grid tab.

3. Make sure an App Template layout is selected.

4. Scroll to Swatches → Click Add Swatch Option.

5. Select the product option (e.g., Material) and choose Color Swatch as the style.

6. Click Save.

💡 You may need to define the color swatch values manually in the app settings.

---

3. Show Product Options as Text Labels

🎯 Best for size options (e.g., S, M, L) or other simple choices that don’t require images or colors.

1. Open Smart Product Filter & Search.

2. Click Filter → Product Grid tab.

3. Ensure the App Template layout is active.

4. Scroll to Swatches → Click Add Swatch Option.

5. Choose the product option (e.g., Size) and set the style to Text.

6. Click Save.

---

Final Result

By following these steps, your collection pages will display product options directly below each product, making it easier for customers to browse and choose their preferred variants.

If you have any questions, feel free to reach out to our support team. 😊