Turn hover on an item to click for mobile devices

Solved
New Member
4 0 0

We have an amended version The Look theme which enables the Lookbook feature. Currently the "+" is triggered by a hover so we can't get the product hover on mobiles or ipads. I have ben trying to enable it to have a click function on mobiles so it will display but haven't had any luck - through CSS files, or the liquid template for the lookbook. 

 

Website is : https://northampton.net.au/pages/lookbook

 

Hoping someone may have some hints. 

0 Likes

Success.

Shopify Expert
2514 423 533

Hi @Northampton 

Add this Js in Asset->theme.js file a bottom

$(document).on('click','.rev-btn',function(){
    if($(window).width() <= 767 ){
        $('.block-image  .prod-item').css({ 'opacity' : '0', 'visibility' : 'hidden' });
        $(this).find('.prod-item').css({'opacity' : '1','visibility' : 'visible','transform' : 'translate(-50%, 0%)'});
    }
})
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
4 0 0

Thanks @Jasoliya

 

There was no "theme.js" file, however I created a new asset and I placed the code where you suggested however it still does not respond to click on mobile devices. 

 

0 Likes
Shopify Expert
2514 423 533

You can add this Js in any other Js file in asset section.  which theme you have? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
4 0 0

@Jasoliya 

 

We have an amended version "The Look" by ArenaTheme. I also tried adding the code to another Js file in the asset section and still no go. 

0 Likes
Shopify Expert
2514 423 533

In which Js file you have added, i will check it from front end 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
New Member
4 0 0

@Jasoliya 

 

I added it to the jquery.plugin.js but I just re-refreshed the page and it is now working on mobile devices! Not sure why it didn't work the first time but now it has. Thank you so much for your help!

0 Likes
New Member
9 0 0

Hey, I used to have too many issues with Shopify so I decided to hire a developer so that I do not need to worry about this and more focusing on sales and this helped me save my time and also revenue of my store too. I can recommend you if you need 

Skype:frontend.developers

https://www.webrexstudio.com/

 

Thanks

0 Likes