Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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

pramodraam
Shopify Partner
77 2 9

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?

Replies 7 (7)

Artzen_tech
Shopify Partner
552 113 112
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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
pramodraam
Shopify Partner
77 2 9

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
Shopify Partner
552 113 112

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;
}
If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
pramodraam
Shopify Partner
77 2 9

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
Visitor
1 0 0

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
Shopify Partner
830 28 75

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

 

To Get Shopify Experts Help, E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad
pramodraam
Shopify Partner
77 2 9