> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/tutorials/categories/hover-image-in-listing.md).

# Setting up a hover image in the listing

With ThemeWare® you show a second product image in the product listing as soon as your customers move the mouse over a product tile. This lets you reveal the back, a detail or the product in use – without opening the product page.

{% hint style="info" %}
**Note**: You maintain the hover image per product via a custom field and enable the effect in the theme configuration.
{% endhint %}

***

## Requirements

* a product you want to assign a second image to
* a suitable image for the hover effect in the Shopware media manager

***

## Step 1: Enable the hover effect in the theme

> "Theme Manager" => your ThemeWare® theme => "Listing pages" tab => "Product box" block => "Product image" section

Set the **"Hover effect"** configuration to **"crossfade images (Custom field)"** and save your changes.

***

## Step 2: Add the hover image to the product

> "Catalogues" => "Products" => select product => "Specifications" tab => "Custom fields" section => your theme's custom field set

In the **"Hover image"** custom field, select the desired image from the media manager and save the product.

***

## Result

When your customers hover over a product tile in the listing, the cover image gently crossfades into the hover image. If nothing shows up, clear the Shopware cache once.

{% hint style="success" %}
**ThemeWare® Tip**: Use the same aspect ratio for the cover and hover image so the transition stays calm. Extensions that modify the product image themselves can interfere with the "crossfade images" option – in that case, simply choose a different hover effect.
{% endhint %}

***

## Further information

You can find all details about the custom field in the ThemeWare® manual:

{% embed url="<https://docs.themeware.design/additional-features/custom-fields/products/general/hover-image>" %}
ThemeWare® Manual ⇒ Hover image
{% endembed %}