As it was once wisely stated by Benjamin Franklin: time is money. This is even more truthful and less abstract when it comes to e-commerce stores. Being able to quickly showcase your product's advantages (its images, features, price, etc) will help your customers form their opinion more quickly in regards to what they do and don't want and, subsequently, will help you make more sales.

Bearing that in mind, most Shopify themes nowadays allow additional images of a product to be displayed when the user hovers over the main product image. This is an excellent feature, however, you may want to have control over your theme and feature other product images on hover instead of only the second image. Perhaps your products' best images are the third one, not the second and so on and so forth.

Today I will be showing you how you can achieve the same results with just some quick copy and paste code snippet.

Step 1: adding the code

1. From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code > Sections > card-product.liquid
   
   
   
2. press CTRL + F (or CMD + F on Mac) to open the search bar and search for exactly this (spaces included):
   
   and show_secondary_image
   
   You'll find a <img tag below it. Select it as the image shows, from <img until the first > sign you find:
   
   
   
3. Delete everything that is selected. This is how it should look like:
   
   
   
   4. Now paste the following code where you deleted it:
   
   
   
   And click on “save”, at the top right.
   
   This is how it should look like:
   
   

Step 2: choosing which image to show

Very well, your code is all set! To choose which image to show, simply change the number on the right to the line “second_image_number”. So, if you'd like to display the fourth image of your products on hover, it would look like this:

{% assign second_image_number = 4 %}

If the image is not available, the hovering function will simply show the very first image.

Conclusion

In conclusion, displaying other product images on hover is an excellent feature that is worth A/B testing to have concrete results whether it will work for your specific business. Generally it does tend to enrich the website's user experience, increase sales, and help customers make informed purchase decisions. Having control over your theme and easily choosing what image to display without the need to hire developers or install apps is a must.

– How to make slideshow images stop cutting off
– How to add a collection with tabs section to any theme (copy/paste, no apps, blazing fast)