FROM CACHE - en_header

Resize thumbnails under product picture [debut theme]

Solved
Plattio
Tourist
10 1 0

Hello, how can i change the size of the thumbnails under the produt picture in the debut theme?

Plattio_0-1603625914598.png

 

 

 

Accepted Solution (1)

Accepted Solutions
OpenThinking
Shopify Partner
311 76 108

This is an accepted solution.

Paste this code at the very bottom of your assets/theme.scss.liquid file.

.product-single__thumbnails-item--medium {flex: 0 0 25%}

Edit 25% with the the percentage you want (higher numbers bigger image and vice versa)

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

View solution in original post

Replies 6 (6)
OpenThinking
Shopify Partner
311 76 108

This is an accepted solution.

Paste this code at the very bottom of your assets/theme.scss.liquid file.

.product-single__thumbnails-item--medium {flex: 0 0 25%}

Edit 25% with the the percentage you want (higher numbers bigger image and vice versa)

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Plattio
Tourist
10 1 0

Thank you so much!

marisapress
New Member
2 0 0

Hi! When I input this code the images look like this:

Screen Shot 2021-03-05 at 11.44.08 AM.png

 

Any ideas?

teddyCN
New Member
1 0 0

Thanks for your help!

manishk
Tourist
5 0 1

Add these 2 properties to these 2 classes in file theme.css

.product-single__thumbnail {
height: 100%;

width: 100%;
}
.product-single__thumbnail-image {
height: 100%;
width: 100%;
}

maron1209
Excursionist
23 0 5

Hi, when I resize the thumbnails with 100% width and height the images get pixelated. Does anybody experienced the same and have a way to fix this?