How can I hide thumbnail images on product pages using code?

Store Design
,
1

Hello I am using the refresh theme, when I input my thumbnail to my products I had to resize them to fit in the featured product boxes. But when I click on the product to go to the product page the thumbnail is still there and because I resized it, it doesn’t fit in the screen properly. I would like to hide the thumbnail photos on the products page for all of them. Is there a specific code that will do this? Thanks.

2

therachiro.com

3

Hi

I am trying to help you.
Paste this code into your CSS file

.thumbnail-slider {
display: none !important;

}

Thanks & regards
Sandeep

4

hello thank you for the reply, I inserted this into base.css is that correct? Because it did not work for me.

5

Hi,
Paste it in the “section-main-product.css” file in the bottom.

Thanks
Sandeep

6

Thank you for another reply. This hid all of my product pictures except for the first image. Any other solutions? Thanks

7

@TheraChiro

give us the store URL and the screenshots related with what you want to do? We will help you.

8

www.therachiro.com

9

It wasn’t allowing me to send the screenshots, but I just need to hide the product thumbnail on the product page screen for all 4 of my products.

10

@TheraChiro

are You want to hide thumbnails on both desktop and mobile on product page?

11

yes, correct

1 Like
12

@TheraChiro

Ok got it but here an issue with your theme. The main product image slider is not embedded in your theme then if we hide the all thumbnails on product page then how to show all images on product page without slider.

We give a suggesting you, currently you using the dawn theme and in the dawn theme bulid a feature to show all the images of the product then you can use this feature of dawn theme.

else we need to add a custom slider for the product images. so please tell me what you will do?

13

I am using refresh theme not dawn.

1 Like
14

There’s no way to just hide the thumbnail images in product page?

15

ok but refresh theme also have this feature.

16

Yes only this way or make slider on desktop.

17

If you or someone else needs this still. Add this to the section-main-product.css file.

.product__media-item:not(:first-child) {
display: none;
}

The above code will hide all thumbnails except for the selected options thumbnail.