> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-box-bundle-builder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/visual-editor/product-list/hover-to-show-second-image-in-product-list.md).

# Hover to Show Second Image in Product List

## What Is This Feature?

The **Hover Second Image** feature allows you to display a **second product image** when customers hover over an item in the product list in the box.

👉 This creates a more dynamic shopping experience by showing different angles, lifestyle shots, or close‑ups without requiring customers to click into the product page.

**Demo Example:**

* [Build Your Own Smoothie Box](https://easify-box-bundle-builder.myshopify.com/products/smoothies-1)
* When customers hover over the product image (on desktop) or tap the image (on mobile), the **second image** is displayed.

![](/files/04fd55e769e56aef076052a7a7907b004b925e38)

## How to Enable Hover to Show Second Image

{% stepper %}
{% step %}

### Prepare Your Images

* Upload at least **two images per product** in your Shopify product admin.
* The **first image** will be the default (shown in the product list).
* The **second image** will be displayed on hover.
  {% endstep %}

{% step %}

### Configure in Theme Settings

* Go to your **Visual Editor** and open the **Theme Settings** tab.

![](/files/de9e24cc3e42e73474d87a7ce54547193cbd2d11)

* Navigate to the **Product Card** tab.

![](/files/781cc7ae922616977d442b164c7e3651a3bbd432)

* Change the setting from **Content** to **Image**.

![](/files/e7f0c178e7047c7222be19cc44f2ade383af00f0)

* Enable the switch: **Show second image on hover**.

![](/files/158ab1e9fa9271afbed52e6b76a90dbf59e25ee0)

* **Save** the box to preview or view it in your store.
  {% endstep %}
  {% endstepper %}

{% hint style="warning" %}
**Note**: This feature is unavailable when 'Display variants as individual products' is enabled for your product list
{% endhint %}

## 💬 Need Help?

If you run into any issues or have questions, feel free to reach out via our **in-app 24/7 live chat**. We’re always here to help!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/visual-editor/product-list/hover-to-show-second-image-in-product-list.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.