Change the thumbnails at the bottom of the product picture to the left side in dawn theme

[GeeMan88]

Hi there,

Does anyone know how to change the thumbnails at the bottom of the product picture to the left side of the product picture on PC view?

[Small_Task_Help]

Hi,

You need to work on HTML structure (Product Template) and CSS

Locate the Thumbnail Section and Move Thumbnails

Code example

<div class="product-gallery">
    <div class="product-thumbnails">
        <!-- Thumbnail images here -->
    </div>
    <div class="product-main-image">
        <!-- Main product image here -->
    </div>
</div>

Update CSS Styles

.product-gallery {
    display: flex;
    align-items: flex-start;
}

.product-main-image {
    flex: 1;
}

.product-thumbnails {
    width: 20%; /* Adjust as needed */
    margin-right: 20px; /* Space between thumbnails and main image */
}

.product-thumbnails img {
    display: block;
    margin-bottom: 10px; /* Space between thumbnail images */
}

and Adjust Media Queries