How can I reposition the product image thumbnails to the left side of the main product image?

[Xhehdy]

Hi everyone,

I’m looking to adjust the layout of my product pages. Currently, the thumbnails are positioned below the main product image. I’d like to move them to the left side of the main product image instead. Can anyone guide me on how to achieve this through Shopify’s customization options or by editing the theme code? Any detailed steps or code snippets would be greatly appreciated. Thanks in advance!

[BSS-TekLabs]

• Hello.
• Our team is ready to help you.
• Please share your website address and access password (if necessary) so we can check and assist you.

[Xhehdy]

Here is my website address

https://www.glamaura.world/products/2023-spring-and-summer-womens-new-fashion-v-neck-ruffled-waist-slimming-silk-printed-a-line-dress

There is no password required

[BSSCommerce-B2B]

Hi @Xhehdy ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css or section-main-product.css. And add this code snippet to the end of the file.

media-gallery#MediaGallery-template--22661505712424__main {
    flex-direction: row-reverse;
    display: flex;
}

slider-component#GalleryViewer-template--22661505712424__main {
    height: auto;
    width: 100%;
}

slider-component#GalleryThumbnails-template--22661505712424__main {
    flex-direction: column;
}

ul#Slider-Thumbnails-template--22661505712424__main {
    flex-direction: column;
    margin-right: 20px;
}

ul#Slider-Thumbnails-template--22661505712424__main li {
    margin-bottom: 10px;
    cursor: pointer;
    width: 50px;
    height: auto;
}

.product--thumbnail_slider .slider-mobile-gutter .slider-button {
    display: none !important;
}

Step 3: Save your code and reload this page.

=>> The result:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[Xhehdy]

Here’s the working preview from your code

[Xhehdy]

Thanks for the help! That worked perfectly. Not to be too disturbing I have another question:

I’d like to improve my store shopping experience by allowing users to select images just by hovering over the thumbnails, instead of clicking them. Is there a way to implement this functionality through Shopify’s customization options or by editing the theme code? Any guidance or code examples would be greatly appreciated. Thank you!

[BSSCommerce-B2B]

Hi @Xhehdy ,

We’re happy to see that our suggestion helped you solve the issue

Thanks for mark solution and give us like. This is greatly motivate us to contribute to our community.

And with this your requirement, You absolutely can allow users to select images just by hovering over the thumbnails, instead of clicking them, follow my instructions:

Step 1: Go to Admin → Online store → Theme > Customize:

Step 2: Go to Product page > Product information > Change the option image zoom to Click and Hover:

In this step, with options Click and hover, allowing users to select images just by hovering over the thumbnails, instead of clicking them.

Step 3: Save and reload product page.

And the result, this issue I think will be resolved

I hope these instructions will help you. If they are helpful, please give us to like and mark as the solution.

Have a nice day sir!

[Xhehdy]

Sorry, but this isn’t working. The click and hover only affected the product image, not the thumbnail, I still have to click on the thumbnail to show the next image.

[BSSCommerce-B2B]

Hi @Xhehdy ,

Sorry for misunderstanding your request.

For this requirement, I haven’t thought of an optimal solution yet.

I am leaving this comment to explore and wait for other solutions from other experts to solved this problem “allowing users to select images just by hovering over the thumbnails, instead of clicking them (hover zoom on thumnails)”.

Alternatively, you can write a new post on the community to directly address this issue.

Have a nice day, sir!

Good luck!

[Xhehdy]

Okay, thanks for your help

[rojiee]

hello, i followed this but it didn’t apply the changes, why?

[skatingtoolman]

I tried this, but the smaller thumbnails still appear below the main image. See below:

[MRamzan]

Display in the left side:

Product Images to the Left side of Main Image in Shopify

[sunbriteapparel]

Thanks!!! This is what I was looking for and it worked!!