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

> <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. 😊


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.globo.io/filter/~/changes/69/product-grid-management/show-product-options-under-product-cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.