How to make the links show an image when hover on dropdown menu?

33 1 1

Hello everyone!

My client demands a hover effect that will show the picture of the related products when the mouse hovers on the link. In order to explain better, I created an image file:



We are using Prestige Theme. What kind of a way can I follow in this case? I am afraid assigning the links of the pictures to every single product will end up with tones of code, which would affect the speed of website dramatically.

Thanks in advance!

Shopify Expert
710 48 175

One idea is to add the images to the Files section in Settings with a filename format that is a "handleized" version of the link title. So for a link title of "Alba Vera", save an image called "alba-vera.jpg", maybe add a prefix to it as well so it's easier to identify what it's for. "nav-alba-vera.jpg" Then you can do something like this:

{% for link in linklists.main-menu.links %}
  {% assign link_image = link.title | handle | prepend: "nav-" | append: ".jpg" %}
  <img src="{{ link_image | file_img_url: "200x200" }}">
{% endfor %}