I am trying to hide the media thumbnails of products.
I was able to get the display to set for none for on larger screens, but then when it goes to a smaller screen the thumbnails are still there. I am using the theme Origin.
Attached are pictures of the large screen (how I want it to be) and the small screen (that needs to be fixed, I’d also like it to show only 1 image, rather than being able to swipe across to see the other images)
My goal is to have the customers select the style (t-shirt, long sleeve, or hoodie (using the Hulk Product Options) to show the correct image)
Hi Hopecrawford,
Depending on what settings your theme allows you configure, you may find the solution within the customiser.
However, if that isn’t possible and you are simply looking to hide the three images on mobile, you should be able to fix this by adding some css to your stylesheet.
To achieve this, you will need to use a @media query (similar to the example below)
@media only screen and (max-width: 768px) {
.YOUR CLASS NAME GOES HERE {
display: none;
}
}
If your store is live and you can send over a link, I’ll try to flesh out the full code and paste it here.
Let me know how you get on.
Kind regards
Iain
VUMO Digital
Hi there, can you provide a password to access the site, please.
Thanks!
If you add the following code to your theme’s stylesheet, it should work:
@media screen and (max-width: 749px)
.thumbnail-slider .thumbnail-list.slider {
display: none;
}
}
I have tried adding it to:
theme-editor.js
section-main-product.css
theme.liquid
product-thumbnail.liquid.
none of it has worked correctly.
am I not putting it in the right section?
Hi there,
As it is CSS, there should be a master stylesheet within your theme files but if you cannot locate it, you can always add the custom css within the customiser ‘product page’.
The following article should help:
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Kindest regards
Iain
