Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
without any luck.
https://www.fabretro.com/products/custom-ping-pong-paddle?variant=42400879247516
Can you please help fix this?
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
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.
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;
}
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
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.
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 */
}
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... ?
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025