Solved

Product variants below the image of the main product

iTsChronus
New Member
15 0 0

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:

Cattura.PNG

Thank you all for your help.

Accepted Solutions (2)
Jasoliya
Shopify Expert
4808 621 1217

This is an 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%; }

product.png

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Add this css:

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

Note: manage width as you want.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 14 (14)

Jasoliya
Shopify Expert
4808 621 1217

Hi @iTsChronus 

Send me your store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
iTsChronus
New Member
15 0 0

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
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
iTsChronus
New Member
15 0 0

@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
Shopify Expert
4808 621 1217

I think image already at bottom of main image.

 

product_page.png

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
iTsChronus
New Member
15 0 0

@Jasoliya wrote:

I think image already at bottom of main image.

 

product_page.png


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
Shopify Expert
4808 621 1217

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
iTsChronus
New Member
15 0 0

@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
Shopify Expert
4808 621 1217

This is an 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%; }

product.png

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
iTsChronus
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%; }

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

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Add this css:

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

Note: manage width as you want.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
SkoorySquirrel
Pathfinder
129 1 45

@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

 


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.

 

Add brick blasting, block busting, tile breaking 2D action adventure game Squirrels are going NUTS to your wishlist on Steam or make a donation to TTLCIC.org.uk
Jasoliya
Shopify Expert
4808 621 1217

Which theme you have and send me url 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
FeelingFlexi
Visitor
3 0 0

Hi, do you have a updated solution for this?