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... ?
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024