How to bring thumbnail section block below the main product image?

[pramodraam]

Thumbnails in the product page below currently shows to the left of the main product image. I tried to move it to beneath the main product image using css property

flex-direction: row-reverse;

 without any luck.

https://www.fabretro.com/products/custom-ping-pong-paddle?variant=42400879247516

Can you please help fix this?

[Artzen_tech]

Hello @pramodraam 

Its Artzen Technologies! We will be happy to help you today.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

.gallery__thumbnails.hidden-scroll {
    width: 12%;
}
.slider--product__holder {
    width: 88%;
}

Let me know if need further assistance
Regards,
Artzen Technologies

[pramodraam]

Hi It helps set width to thumbnail and product image blocks. Thanks for that, but it doesn't move the thumbnail right below the product image. Please help fix this last issue.

[Artzen_tech]

Add this:

div.gallery__thumbnails {
order: 2;
}
div.slider--product__holder {
    order: 1;
    display: flex;
}
.col-12.col-md-6.gallery.gallery__default div {
    order: 3;
    display: flex;
    flex-direction: column;
}

[pramodraam]

Hi,

Thanks, I added the code above which still didn't help. You can check the page at this preview theme. https://eh3wsno1w8amd5pe-42234216604.shopifypreview.com

[sergeyellison]

To showcase Baylen Levine merch effectively, simply rearrange your website layout by moving the thumbnail section block below the main product image for a more engaging shopping experience.

[Small_Task_Help]

Hi,

At CSS

/* Move product thumbnails beneath the main product image */
.product-thumbnails {
    display: flex;
    flex-direction: column;
}

/* Adjust spacing if needed */
.product-thumbnails img {
    margin-bottom: 10px; /* You can adjust this value to control the spacing between thumbnails */
}

[pramodraam]

Hi@artzen_tech, Could you please answer this LIQUID related question at https://community.shopify.com/c/technical-q-a/how-to-get-inventory-of-a-product-from-all-locations-i... ?