Product variants below the image of the main product

[iTsChronus]

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.

[Jasoliya]

Hi @iTsChronus 

Send me your store url

[iTsChronus]

www.next.midnight.com

(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)

[Jasoliya]

May be this tore is not on shopify, is that you sent wrong url? 

[iTsChronus]

---

@Jasoliya wrote:

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/

[Jasoliya]

I think image already at bottom of main image.

[iTsChronus]

---

@Jasoliya wrote:

I think image already at bottom of main image.

---

yes, because I'm using an app but I'd like to know if there was a code to do it without an app

[Jasoliya]

For that you have to disable app so i can check and code for that 

[iTsChronus]

---

@Jasoliya wrote:

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

[Jasoliya · Accepted solution]

Hi, You have to change some code for that you need code knowledge

follow this:

1. 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:

2. 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%; }