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

batulkr
Excursionist
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:

Untitled.png

 

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!

0 Likes
gina-gregory
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 %}

 

0 Likes