Product Thumbnails

Shopify Discussion
1

Hello All,

I’m hoping someone can help. I currently have the Dawn theme and all the product photos are large and it causes a weird scroll issue with the page. I’d like to format it so I have the main product image and then below it the thumbnail images that customers can click on to view it in the main product image location. Does anyone know how to modify this?

2

hello @DoubleMulligan
It needs to modify theme files to show proper main product image under that thumbnails will be show there.

3

Hello @DoubleMulligan try this code

1 Go to Shopify Admin > Online Store > Themes.

2 Click Actions > Edit Code on your Dawn theme.

3 Open sections/main-product.liquid.

4 Find this code inside the media gallery section:

class="product__media-wrapper"

Add this CSS inside your base.css (or theme.css):

.product__media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product__media-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.product__media-thumbnails img {
    width: 80px; 
    cursor: pointer;
}

thankyou

4

Hello,

The Dawn theme offers the layout you described natively, you just have to modify the section settings.

Go to Online store → Themes → Customize and then open the product template. Click on the Product information section and change the Desktop layout to Thumbnails:

htmlBurger_0-1738223374558.png
htmlBurger_0-1738223374558.png301×995 40.5 KB

This will do the work.