Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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%; }
This is an accepted solution.
Add this css:
.wrap-pic-w img { width: 80%; margin: 0 auto; }
Note: manage width as you want.
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?
@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/
I think image already at bottom of main image.
@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
For that you have to disable app so i can check and code for that
@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
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%; }
@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?
This is an accepted solution.
Add this css:
.wrap-pic-w img { width: 80%; margin: 0 auto; }
Note: manage width as you want.
@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%; }
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024