How can I fix this to stack the product thumbnails under the primary picture?
Website is www.jsbuildcompany.com
Hello @jsbuildco
Please could you share the store URL so that I can review your site?
Hi @jsbuildco you can try this code
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
Step 1: Add this css at the bottom
Online Store ->Theme ->Edit code
Assets → main-style.scss.css
.more-view-image {
width: 100% !important;
}
Step 2: Add this css at the bottom
Online Store ->Theme ->Edit code
Assets → owl.carousel.css
.owl-carousel.owl-loaded {
display: block !important;
}
Hope you find my answer helpful!
Regards,
PageFly
Hi @jsbuildco ,
You can try to solve it by adding this CSS code to your main-style.scss.liquid file in Online store > Themes > Actions > Edit code
.owl-carousel.owl-loaded { display: block !important; }
When I do that, I only see 3 thumbnails, the rest are hidden.
When I do that, I only see 3 thumbnails, the rest are hidden
Check in your them customize if it has an option to set number of thumbnail images to show or adding this addition code
.more-view-image {
width: 100% !important;
}
@jsbuildco you can try my code, i have provided the problem solving code for you below
I tried your code and it only showed 3 thumbnails, not all of them.
the theme doesn’t offer options for number of thumbnails. just to show them or not, and to place the horizontally or vertically.
also I tried adding that code and it didn’t help.
Hello @jsbuildco
Go to online store> Theme > Edit code > Assets >owl-carousel.css >Add code in this file.
.more-view-image {
float: left;
}
I can see that’s how it looks like a slideshow, you can click and drag left and right to see the image
oh I didn’t notice it was like a slideshow. is there a way to change it so all thumbnails are visible?
when I do that, it appears to be a slideshow of thumbnails and only shows 3 thumbnails. any idea how to show all?
@jsbuildco you can try this code
Add this css at the bottom
Online Store ->Theme ->Edit code
Assets → owl.carousel.css
.owl-carousel .owl-stage {
width: 500px !important;
}
I hope it helps you
Hello @jsbuildco
Go to online store> Theme > Edit code > Assets >owl-carousel.css >Add code in this file.
.owl-carousel.owl-loaded {
display: inline-table;
}