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

Technical Q&A
, , ,
1

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?

2

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 tag

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

Let me know if need further assistance
Regards,
Artzen Technologies

3

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.

4

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.

5

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;
}
6

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 */
}
7

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

8

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-in-product/m-p/2236406#M138770 ?