I want to reduce the thumbnail size on product page

Store Design
, , , , , , , ,
1

I want to reduce the thumbnail size on product page. Right now my product page thumbnails are too big like as below:

thumbnails.JPG
thumbnails.JPG649×438 22.1 KB

want to change it like below too small I want to keep the look minimal that’s why:

thumbnail.JPG
thumbnail.JPG500×527 42.2 KB

2

Hi @swayurindia

Could you share your product page URL to check?

3

In the below product page link there are more than 4 thumbnails I want all the thumbnails to shown in one row. Reduce the size of the thumbnail as well.

https://www.swayur.com/products/sri-sri-tattva-cows-pure-ghee-1-l

4

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after element
5

The code is working properly.

1 Like
6

Happy I could help

7

IS NOT WORKING PROPERLY*
:disappointed_face:

MISTAKENLY I WROTE THAT IT’S WORKING.

8

Hi, @swayurindia .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

.thumbnail-list {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 0px; /* Adjust the gap between images as needed */
}

.thumbnail-list img {
    max-width: 100%;
    height: auto;
    display: block;
}
ul#Slider-Thumbnails-template--17910297526565__main li {
    max-width: 80%;
}

Result:

websensepro_0-1703848658516.png
websensepro_0-1703848658516.png1351×478 323 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

9

this code is not working