Product variants below the image of the main product

New Member
15 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%; }



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




Shopify Expert
2465 414 519

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.
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like