Hi everyone,
I'm using Boundless Template. On product page, I only see first image and have to scroll down to see another images.
Can you help me the way the show all images on the top page (like an image slider).
Thank you so much.
Solved! Go to the solution
This is an accepted solution.
@ZiZoouStore I have made a minimal version using the same plugin that powers the slideshow section
1. Create a alternate product template - product.image-gallery.liquid
2. Create a product template section product-template-gallery.liquid and rename the default section inside alternate template you created above - {% section 'product-template' %} to {% section 'product-template-gallery' %} https://monosnap.com/file/5fdo7guQQjrwxIP20JzVJe13yHsLE7
3. Replace the code inside product-template-gallery with this Gist
4. Initialize the sliders inside theme.js.liquid . See https://monosnap.com/file/wPi93vvuhCqMFJQnKwbqxqdKkZULmb
$('.product-slideshow').slick({ dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, arrows: false, asNavFor: '.product-slideshow-nav' }) $('.product-slideshow-nav').slick({ slidesToShow: 3, slidesToScroll: 1, infinite: true, asNavFor: '.product-slideshow', dots: false, arrows: true, focusOnSelect: true, nextArrow: '<button type="button" class="slick-next">»</button>', prevArrow: '<button type="button" class="slick-prev">«</button>' });
5. Add some custom styles for the arrow buttons inside theme.scss.liquid
.slick-prev,.slick-next{ top: 42%; font-size: 2em; } .slick-next{ right: -5% } .slick-prev{ left: -5% }
6. Select the new product template inside product admin. Done
Here is a working demo https://nichegeek.myshopify.com/collections/mac/products/13-inch-macbook-air-128-gb
Step 4 - Screenshot https://monosnap.com/file/wPi93vvuhCqMFJQnKwbqxqdKkZULmb
User | Count |
---|---|
23 | |
21 | |
18 | |
17 | |
16 |