Hi everyone, I’m using the Fashe theme and in the product page the images of the variants are all in a column on the left and this makes the page scrolling annoying. I wish I could put them like in the image below:
Thank you all for your help.
Hi @iTsChronus
Send me your store url
(currently I have the variants as in the picture, but only because I’m using an app. I would like to put some code that allows me to modify the variants without using apps)
May be this tore is not on shopify, is that you sent wrong url?
Sorry,wrong url. Here is the right one: https://www.next-midnight.com/
yes, because I’m using an app but I’d like to know if there was a code to do it without an app
For that you have to disable app so i can check and code for that
Ok i disabled the app. For example now on this product on the left I have a column with all the product images.
https://www.next-midnight.com/products/ancient-roman-wolf-bracelet-with-beads
Hi, You have to change some code for that you need code knowledge
follow this:
-
section->product-template.liquid->find product-image-carousel and wrap-slick3-dots then replace both div by each other so wrap-slick3-dots will show after product-image-carousel. like show in image:
-
then add this css in asset->theme.scss->at bottom of file
#product-image-carousel{width: 100% !important; }
.wrap-slick3-dots{ width: 100%; }
.slick3-dots{display: flex;flex-wrap: wrap;}
.slick3-dots li{width: 14%; }
Add this css:
.wrap-pic-w img { width: 80%; margin: 0 auto; }
Note: manage width as you want.
Hi Jasoliya,
Would this solution work for moving the thumbnails below the main product picture for theme Venture? Looking at the code, which sections would need to be swapped to get a similar result, do you know?
Thank you in advance for your help and practical wisdom in coding.
Which theme you have and send me url
Hi, do you have a updated solution for this?