Product variants below the image of the main product

Solved
New Member
6 0 0

@Jasoliya wrote:

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

product.png

 


Thank you,it worked perfectly. I also added the css code but the main image of the product is large. Could it be decreased?

Schermata.PNG

0 Likes

Success.

Shopify Partner
1648 277 344

Add this css:

.wrap-pic-w img { width: 80%; margin: 0 auto; }

Note: manage width as you want.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
1 Like