Hiding Thumbnails on Mobile Only

Highlighted
New Member
2 0 0

I'm trying my hand at eCommerce and noticed most of my traffic is mobile.  I also noticed that the huge block of thumbnails that come before the add to cart options is moving my call to action too far from the initial landing on the product page.

How do I, someone who learned HTML in 1998 and who hasn't used it since, hide thumbnails ONLY for mobile viewers?

0 Likes
Highlighted
New Member
2 0 0

Any thoughts?

0 Likes
Highlighted
Shopify Expert
2684 67 792

Adam, it looks like all your product images are attached to the variants, so can be seen by selecting appropriate dropdown, so user can see all of them without thumbnails.

In this case you can add this code to the bottom of your theme.scss.liquid   Asset

/* --tim: hide thumbnails on screens less then 480 pixels wide (on mobile) */
@media screen and (max-width: 480px){
    ul#ProductThumbs {
        display: none;
    }
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
2 Likes
Highlighted
New Member
3 0 0

What if I want to hide the thumbnails on mobile but only to those products who have variants?

While still displaying the thumbnails if product doesn't have variants?

0 Likes
Highlighted

Hello @Adam_Wilkinson 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes