How to Change Product Image on Hover in Magento and Liven Up Your Product Presentation

13 Jul 2016

It seems that shoppers want it all – every possible incentive there is, abundance of detailed images and descriptions, same day shipping and much more. And as a store owner – you have to be out there – listening.

When it comes to all the things that can make your store great, Magento is the right choice since it offers abundance of options coming out of the box.

One of them, and certainly, one of the most prominent ones, is that it offers possibility to add as many attributes as you need, combine them as you wish, and bring your product presentation to the next level.

And in today’s blog post we will reflect on an attribute cleverly pretending to be something far more exciting, as it helps store owners bring their products closer to customers in an aesthetically amazing way, bridging the gap between online and offline even more.

Office set up

Also, we will show you why it is always a clever idea to showcase your products differently every once in a while. Not only that, we will show you how to set everything up on your store in a matter of minutes.

Talking UX

According to Baymard institute:

“(…) our usability benchmarks reveal that just 6% of e-commerce sites display additional textual information on hover, and only 18% show additional images on hover. In other words 76% of e-commerce sites don’t utilize this powerful hover state.”

Furthermore, numerous usability studies conducted by Baymard Institute reveal and conclude that you most definitely shouldn’t miss out on adding possibility to hover over product images on your product catalog page.

You have numerous alternatives when it comes to ways you can use hover on your simple product view page as well.

But it is not only about turning creativity mode on. It is about giving your customers what they need.

It has to be functional and you should always strive to use it with one purpose only – to enhance the way your products are displayed and make the entire experience easier and more enjoyable for your customers.

You can always choose to show your product on white background versus showing it on a live model. That is exactly how TopShop decided to show off their offer.

Your customers need to see your product on a white background, but as soon as they realize what it is that you are offering, they would want to see more.

This is where pictures on live models save the day! And by using hover image – you can have both.

TopShop hover image on product catalog
If you are selling something that needs to showcase different positions such as modular furniture for example, you can also put hover image into a good use.

Take a look how Innovation Living used it to demonstrate different possibilities of their sofas and daybeds. Hovering over products will show you different positions of sofas and let customers conclude instantly is it something that you need.

It will save time for your buyers as they can become fully aware of basic product functionalities right there in catalog overview page, and decide which are the products that deserve more attention.

Innovation living product catalog
You can also go one step further and use it to show inner pockets or product features that could not be easily spotted.

Images like these might do a great job in helping you achieve this.

Inner pockets - details

Another great idea is to use hover image on your simple product view and show details of your product to customers.

They will most certainly appreciate taking a better look and make their decision faster, even though buying online.

Here is a great example of showing details – jumpsuit made by Unlimited.

Hovering for product details

And when creativity takes over, your options are limitless.

Forever 21 nails it by showing Instagram feed and making it possible for customers to simply hover and shop entire look.

It is simply amazing and for so many reasons – they will engage the entire Instagram community of shoppers to post about their brand, they will publish it on their web site and give ideas to visitors by showing real life customers wearing it.

On top of it – they make it possible for visitors to complete purchase with a couple of clicks. Amazing!

Forever 21 landing page

In case you wish to emphasize great product packaging, and you do not wish to burden your simple product view with more images – use hover image.

Lush does this perfectly so no wonder they are always among great examples when it comes to usability.

Hover lush catalog product overview

How to set up hover image in Magento?

Small note: it is an out of the box functionality that requires minimal coding in order to set up.

Start by hovering over Catalog item in main menu, scroll to Attributes and choose Manage Attributes menu item.

Managing attributes in Magento

What we need to do next is to create new attribute.

In order to do so, simply click on Add New Attribute orange button located in the upper right corner of the page.

Add new attribute in Magento

Start filling out the fields by adding attribute Code and Scope. Be sure to choose Media Image when filling out Catalog Input Type for Store Owner field, and select to which type of products on your store you wish to see it applied (simple, configurable etc.)

Here is how it looks like:

Adding hover image attribute to store in Magento

Now go ahead and save your attribute by clicking orange Save button located in the upper right corner of the page.

One more thing left to do – assign your new attribute to an attribute set.

Once more, start from the beggining and navigate to Catalog and choose Manage Attribute Sets.

Once you’re there, simply drag and drop hover image attribute to attribute set Image. Take a look at the screenshot for better understanding.

How to assign attribute to attribute set in Magento

First part is – done. Good job!

Now you only need to upload two images of your product depending on what you wish to showcase.

Choose product you wish to assign hover image to, and have in mind the way Magento will define position of images uploaded across your online store.

Magento will position your images in the following way:

Checking small image radio button will determine the image that will be shown in product listing page.

Choosing base image will determine which image will show in product detail page and marking thumbnail image radio button will determine the image for cart page.

Now that you have new image that will serve as a hover image, we suggest you check small/base/thumbnail image for the first image and hover image radio button for the image that will be presented once customers hover with mouse over a product.

Same as in screenshot below:

Setting up hover image in Magento admin panel

Congrats, you are done adding hover image to your product!

In the end…

Offering more insight regarding product, either through another image, either through more information given to a customer when an image is hovered – is something that is highly recommended.

From the technical point of view it is easy to set up, and not to mention that it is highly recommended by UX researchers. Meaning – no reason you should ignore it.

Certainly, your store can survive without it, but merging inspiration and hover functionality can mean your customers will be delighted with shopping experience on your online store. Which is all you need to kick off your success story!

  • Was this helpful?
  • Yes   No
  • Back