Dawn 8.0.0 change image layout position on product page

Store Design
,
1

Hi Community

I need to change the product image thumbnail carousel position on the Dawn theme 8.0.0. See image. I need the small carousel images in the middle as most of the products only have 2 or 3 images. Thanks

Joegr7_0-1677249715651.png
Joegr7_0-1677249715651.png1815×786 231 KB

2

Hi @Joegr7 ,

This is Richard 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:

@media screen and (min-width: 990px) {
    .product--thumbnail .thumbnail-list {
        display: flex !important;
        justify-content: center !important;
    }
    .thumbnail-slider .thumbnail-list__item {
        width: 15% !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

3

@PageFly-Richard Hi Richard, it did not work, unfortunately. Do you know why?

4

Hi @Joegr7 ,

I’m sorry to hear that. Please give it a try with this new solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.aio.min.css->paste below code at the bottom of the file:

@media screen and (min-width: 990px) {
    .product__media-wrapper .product__media-list {
        flex-wrap: nowrap;
        justify-content: center;
    }
    .product__media-item {
        width: 20% !important;
        flex-grow: unset;
    }
}

PageFlyRichard_0-1677514683721.png
PageFlyRichard_0-1677514683721.png1285×807 93.6 KB

I hope it would help you
Best regards,

Richard | PageFly