Solved

Can anyone assist with the Brooklyn theme hover effect on Shopify?

UrbanB
Tourist
6 0 0

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? 

Accepted Solution (1)
Tejas_Nadpara
Shopify Partner
1118 222 552

This is an accepted solution.

@UrbanB 

 

Done! check it now! 🙂

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help

View solution in original post

Replies 31 (31)

Tejas_Nadpara
Shopify Partner
1118 222 552

@UrbanB 

 

Follow the instruction as per the guide:

https://avada.io/shopify/devdocs/modify-the-code-for-your-product-images.html

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
UrbanB
Tourist
6 0 0
Dear Tejas,

I actually followed the link provided but I could not get it to hover to
the second image at all. Also, I saw many other people posting on the
community that mentions the link does not work for the Brooklyn theme?

But when i followed this link:
https://community.shopify.com/c/Shopify-Design/Hover-Effect-doesn-t-work-in-Brooklyn-Theme/td-p/3883...,
i managed to get the hover, but both images became very light coloured so i
just reverted everything to original for now.

Is there any other guide I can follow?

Kind Regards,
Tresa Lee
Tejas_Nadpara
Shopify Partner
1118 222 552

@UrbanB 

 

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

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
UrbanB
Tourist
6 0 0
Dear Tejas,

Thanks for your help.

Store URL as below:
https://urbanbeautylashes.com/?_cd=335f7a55293833f6c768802d4bc57242f68edb56d694402489842149a634dc85&...


password: laowhe

Kind Regards,
Tresa Lee
Tejas_Nadpara
Shopify Partner
1118 222 552

@UrbanB 

 

I sent you request for the Shopify collaborate account, accept it so I can add hover effect.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
UrbanB
Tourist
6 0 0
Dear Tejas,

I've accepted the collaboration account, sorry for the late reply.

Love & Regards,
Urban Beauty Team | *https://urbanbeauty-ny.myshopify.com
*
Tejas_Nadpara
Shopify Partner
1118 222 552

This is an accepted solution.

@UrbanB 

 

Done! check it now! 🙂

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
UrbanB
Tourist
6 0 0
Dear Tejas,

Thanks for the help! Saw it, it works! but the 2nd image seems a bit
squashed, is there any way to help fix it?

Kind Regards,
Tresa Lee
Tejas_Nadpara
Shopify Partner
1118 222 552

@UrbanB 

 

I did little change for images, check it now.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
UrbanB
Tourist
6 0 0
Dear Tejas,

Thanks for the assistance! It works well now.

Kind Regards,
Tresa Lee
ihusny
Visitor
1 0 0

Hello Teja, Could you help me do the same on my site please??

maddam
Excursionist
12 0 5

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

LienJ
Visitor
2 0 0

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?

SerDumpsALot
Visitor
2 0 0

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

maddam
Excursionist
12 0 5

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:
Screen Shot 2021-07-13 at 11.16.19.png

VS original view:
Screen Shot 2021-07-13 at 11.16.33.png

Do you know how to fix this?

maddam
Excursionist
12 0 5

Sorry link has expired. So here is a new one: https://nsbh5kwd0zdztkas-46687486101.shopifypreview.com

franciebakerie
Visitor
2 0 0

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 ? 

https://franciebakerie.myshopify.com/

Mathias08
New Member
4 0 0

Hello, 

I tried your solution but it didn't work..

Could you help me ? 

 

Thanks for you help and have a nice day ! 😄

Tejas_Nadpara
Shopify Partner
1118 222 552

@Mathias08 

 

Send me an email, I will help you to fix it.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
duymd14
Visitor
2 0 0

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

BeccaBelgrave
Tourist
8 0 3

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!

kristinmatias
Visitor
3 0 0

Hi, I exactly followed the instructions but the code doesn't seem to work on mine. Any kind of help would be great!

Sdesuan
Excursionist
48 0 10

Hi Tejas, 

 

Could you please help me with the same problem? 

 

My webpage is sdesuan.com

 

Thank you very much! 

Jaafarhana
Tourist
4 0 6

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.

franciebakerie
Visitor
2 0 0

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 !

 

MRahman14
Visitor
1 0 0

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

Tony0803
Visitor
2 0 5

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?

www.no5florist.com

thank you in advance!

Peachilashes
Tourist
10 0 2

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.

Hannah_M
Excursionist
11 0 6

Perfect! Thanks.

TresorL
Tourist
4 0 2

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 

Kamilemacke
Visitor
1 0 0

Hi, it doesn't work for my Brooklyn theme (it isn't live yet), could you please help?