Liquid, JavaScript, themes, sales channels
Hi,
I've tried looking through the forums, youtube, reddit and attempted to add hover function so that when the mouse hovers over, the 2nd image shows instead. However I could not do them successfully without causing some distortion to the images or layout or completely blanked images.
Was wondering if anyone can help me with this?
Solved! Go to the solution
This is an accepted solution.
Done! check it now! 🙂
Cheers,
Tejas
Follow the instruction as per the guide:
https://avada.io/shopify/devdocs/modify-the-code-for-your-product-images.html
Thank you,
Tejas
Send me your store URL, I will send the request for the Shopify collaborate account so I can access the theme file and fix it from my side.
Thank you,
Tejas
I sent you request for the Shopify collaborate account, accept it so I can add hover effect.
Thank you,
Tejas
This is an accepted solution.
Done! check it now! 🙂
Cheers,
Tejas
I did little change for images, check it now.
Thank you,
Tejas
Hello Teja, Could you help me do the same on my site please??
Hi,
I would love to do the same on my site: https://maddamstore.com/collections/phone-necklaces
Please let me know how to proceed.
Thanks
Hi i've been trying to do the same but i'm getting the same error.
is there something i should do differently then the walktrough implies?
Hey I posted a video on how to do this on the Brooklyn Theme
How to get Shopify Brooklyn Theme Hover Over Effect Product Code For Free! - YouTube
Hey mate,
Thanks for the video and tutorial. I've tried it on my Brooklyn site, but now the images on the page grid are very small.
Preview here: https://h9zu6i3r40ip3de4-46687486101.shopifypreview.com
Or below:
VS original view:
Do you know how to fix this?
Sorry link has expired. So here is a new one: https://nsbh5kwd0zdztkas-46687486101.shopifypreview.com
Hi ,
I need help to add the hover effect on my product images , I tried every thing and it seems I am not able to do so . Is it because i have the Brooklyn theme ?
Hello,
I tried your solution but it didn't work..
Could you help me ?
Thanks for you help and have a nice day ! 😄
Send me an email, I will help you to fix it.
Thank you,
Tejas
Hi Tejas, Could you please help me with this problem adding hover effect to Broocklyn Theme. Here is my shop https://leder-schmidt-2020.myshopify.com
Thank you so so much
hey @Tejas_Nadpara
I'm pretty sure I've read through every article regarding getting a hover effect on product images using Brooklyn theme to no avail.
Coming across this post was promising, is there a way you could look at my theme and spread your magic on my store as well?
Store: https://lizanneshome.com/
PW: Angrycat
Thank you so much in advance!
Hi, I exactly followed the instructions but the code doesn't seem to work on mine. Any kind of help would be great!
Hi Tejas,
Could you please help me with the same problem?
My webpage is sdesuan.com
Thank you very much!
Hi guys
I followed Tejas steps and it works so hope this helps you guys,
1. First step just copy the reveal code here to your theme.scss.liquid
https://gist.github.com/carolineschnapp/63fd3c4327a466174aa8
2. Then find your "product-grid-item.liquid"
2. Search {% if featured_image.src== blank %} in the code
3. It will look something like this
{% if featured_image.src== blank %}
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
{% else %}
4. add this code below that line
<div class="reveal">
5. so it will look like this
{% if featured_image.src== blank %}
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
{% else %}
<div class="reveal">
4. Then find this code (which is after the above code)
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
data-image>
5. then add this code below
<img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
6. so the finish will look like this
<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
{% if featured_image.src== blank %}
<img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
{% else %}
<div class="reveal">
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
data-image>
<img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
</div>
</div>
Save, you are done.
OH MY GOD ! THANK YOU SO MUCH !!! this helped me so much , I spent a week trying to figure how to add the hover effect on my theme !
Hi @Jaafarhana ,
I have tried the steps and hover seems to work, however during the effect the last product image is shown in front of the first one. So there are 2 images at the same time there. Any suggestions how to solve?
Thanks
Mahmud
Hi there
I'm being searching all over the internet but could not figure out how to add the hover effect, could you please help me out?
thank you in advance!
Hi Jaafarhana,
I used your code to add the hover effect. However, when I hover over the image, the hidden photo comes up for a fraction of a second and then disappears. I've tried adjusting the opacity and playing around with the code, but I don't know how to fix this issue.
Perfect! Thanks.
Hi Tejas!
Could you please help me put the hover effect on my store? It's Brooklyn theme.
My store url: https://tresorlingerie.myshopify.com/
I hope to hear from you as soon as possible
Hi, it doesn't work for my Brooklyn theme (it isn't live yet), could you please help?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024