# Display chosen variant image after filtering

Enhancing your Shopify store by displaying the selected variant's image on collection pages can significantly improve the shopping experience. The **Smart Product Filter & Search** app offers a simple way to enable this feature.

### ⚡ **Important! Don’t Miss This:**

📌 **App Layout Requirement:** This feature **only works when the app layout is enabled**.

### **1. Enable the Display of Selected Variant Images**

#### **Access the App Settings:**

* From your **Shopify admin**, go to **Apps** → **Smart Product Filter & Search**.

#### **Navigate to Product Grid Settings:**

* In the app's left-hand sidebar, click on **Filters**.
* Select the **Product Grid** tab.

#### **Adjust General Settings:**

* Scroll down to the **General Settings** section.
* Check the box labeled **Display price and image of variants that match the filters**.

<figure><img src="/files/tr6nZixDWwJEOTIHxDFf" alt=""><figcaption></figcaption></figure>

### **2. Configure Color Swatches Under Products**

#### **Scroll to Swatches Settings:**

* Keep scrolling to find the **Swatches** section at the bottom of the settings page.

#### **Set Up Color Product Options:**

* Define the **Color Product Option** to ensure the correct variant images are displayed.
* ⚠️ *Note:* This feature only works with the **Variant Image/Color Swatch** display type.

#### **Save Your Changes:**

* Click **Save** to apply the new settings.

<figure><img src="/files/sBbFEr9eSpYxQr0i1EcT" alt=""><figcaption></figcaption></figure>

***

By following these steps, your collection pages will dynamically display images corresponding to the selected product variants, giving customers a more interactive shopping experience.

💬 **Need Help?** Contact us at **<contact@globosoftware.net>** – we’re happy to assist! 😊


---

# 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/display-chosen-variant-image-after-filtering.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.