# Show product option underneath products

✨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).

> <mark style="color:red;background-color:red;">**Note:**</mark> <mark style="color:red;background-color:red;"></mark><mark style="color:red;background-color:red;">This feature only works if your collection page uses the app’s</mark> <mark style="color:red;background-color:red;"></mark><mark style="color:red;background-color:red;">**Product List layout**</mark><mark style="color:red;background-color:red;">.</mark>

### ⚡️**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).<br>

   <figure><img src="https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2FuTYkQwyipC0e0v0qAndi%2Fimage.png?alt=media&#x26;token=d3a6db88-c121-489c-aca6-30648001e3b5" alt=""><figcaption></figcaption></figure>
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**.

<figure><img src="https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2FMRCvhYg20mhej9T38iRE%2Fimage.png?alt=media&#x26;token=ffe5af3e-09a4-47f7-9709-8c5bca9bad14" alt=""><figcaption></figcaption></figure>

***

### ⚡️**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.

<figure><img src="https://2009335375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKmtdB4I84W3J8hc91H4S%2Fuploads%2FJ6TbPESRJNH5kqif8v6Z%2Fimage.png?alt=media&#x26;token=9e7c25dd-24fd-41a8-9973-31074175b210" alt=""><figcaption></figcaption></figure>

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