> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/filter/product-grid/show-product-option-underneath-products.md).

# 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="/files/g5As40ygV2SPove0XOHe" 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="/files/tWgsTqHYTekX250Kp4s1" 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="/files/ovIiD31Kqx8sPmPuIDAI" alt=""><figcaption></figcaption></figure>

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