Dawn: Possible to change the display size only of 2nd/3rd product images?

Store Design
1

Does anyone know if it’s possible and how to change the display sizes on a product page only for secondary images? I’d like them to look more like thumbnails in comparison to the main image.

Thanks in advance for any help!

2

Hi @killerpresets ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

ul#Slider-Gallery-template--18045865689366__main >li:last-child > div {
    height:200px;
    width: 200px;
    
}
ul#Slider-Gallery-template--18045865689366__main >li:last-child{
    max-width:fit-content;
}

PageFlyVictor_0-1677607661074.png
PageFlyVictor_0-1677607661074.png833×585 509 KB

Note: You can decrease or increase the width value to match your store.

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Thanks very much for replying. I couldn’t find theme.css in assets. When I search all folders, only layout>theme.liquid and assets>theme.editor.js appears in the search results.

4

@killerpresets ,

Oh sorry about that, I made a mistake and re-edited the previous answer. You can add it to section-main-product.css

5

Works great!

Thank you for taking the time to help!

6

Is it possible to have those other smaller images align center under the main image as opposed to align left? I tried messing with the code to do it but no luck.

7

You can try this code below:

ul#Slider-Gallery-template--18045865689366__main >li:last-child{
    display: contents !important;
    
}
8

Yes! Thank you so much!