Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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
Worked for me! Thank you so much for sharing!
hi, where is the product admin? thanks again
Hi, i am needing to do this on my narrative theme but i need some help. will this work on this theme also please?
Both links here and on the previous message are not working. I stuck on step 4
Can you help me?
where is "product admin"?
i followed the steps but was stuck on that last part
thanks
Thanks for your share, but can you help me where is "product admin"?
Thank you so much.
@Lixon_Louis thanks for this. Looks like what I need. I'm stuck at step 4 though as there is no theme.js.liquid in Boundless theme. There is only theme.liquid and it has total 299 lines. Could you point me to the location where I need to paste this code? Thanks a lot in advance. Cheers.
Update: Never mind @Lixon_Louis wasn't looking at the right place. found .js.liquid now.
@Lixon_Louis so I've followed your instructions and I see that images are coming as gallery but there are few problems:
1. The image size is smaller on desktop (mobile is okay). Could you help on how I can increase this?
2. To move to the next image, when I select image, whole gallery is being selected:
3. Is it possible to apply this template to all existing products in one go instead of one by one?
Link for site: https://the-work-label.myshopify.com
Link for the product where I've selected this template: https://the-work-label.myshopify.com/collections/tops/products/black-white-small-check-v-neck-top
Password: tawmaw
Thanks for help!
1. The image size is smaller on desktop (mobile is okay). Could you help on how I can increase this?
There are two versions of this layout. default is set to small.
If you go to Online store -> Customize -> product page -> your new template will have a section called Product.
Inside the Product section just set Product form width to Large.
Please use this video for your reference!
https://www.loom.com/share/ad7bf194875f4cadbaf61f8d776779a7
2. To move to the next image, when I select image, whole gallery is being selected:
You can remove the border when changing the image by adding this to your theme.scss.liquid file.
So your final CSS for this tutorial will look like this:
.slick-list:focus {
outline: none;
}
.slick-prev,.slick-next{
top: 42%;
font-size: 2em;
}
.slick-next{
right: -5%
}
.slick-prev{
left: -5%
}
3. Is it possible to apply this template to all existing products in one go instead of one by one?
Yes! In your product.liquid just use the following snippet:
{% comment %}
{% section 'product-template' %}
{% endcomment %}
{% section 'product-template-gallery' %}
{% section 'product-recommendations' %}
Instead of:
{% section 'product-template' %}
{% section 'product-recommendations' %}
Yes, I have updated the post above to make it a bit more clear 🙂
Thank you @Octipus
Exactly What I looked for ! Thanks.
Now, I juste need to find how to put a "click/zoom" in it.
Hello Saturn_png,
Our template already provides inner and pop up zoom options for the product images beside a lot of other features, you can check it from here:
Best regards,
Diamond team
Hey @Saturn_png
Did you ever find out on how to put Click/Zoom on the product images
@Lixon_Louis - Can you help in putting "click/zoom"?
Thanks @Octipus
However, when I chose "Product Pages" > "Product", I just saw the default product template. And in this template, I've choosen "Large".
How can I switch to new product template to choose Large/Small?
Hi i'm having the same issue, my product form width is set to large but the images are still not big enough on desktop - I can't seem to fix this. Any advice?
Hi i'm having the same issue, my product form width is set to large but the images are still not big enough I can't seem to fix this. Any advice?
the method works but be cautious the variant image doesn't sync with variant pick!
Hi LL,
was there a solution for the issue of @marbs? I have the small numbers too...
Add dots: false to $('.product-slideshow') @DonPseudo
$('.product-slideshow').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
dots: false,
slidesToScroll: 1,
arrows: false,
asNavFor: '.product-slideshow-nav'
})
Hi, this happened to me too. Did you ever find a solution? Thank you
Thank you for this fix! Having the same problem as others here with the images appearing very small on full screen (non mobile) version. Do you have any advice for this? The main image is constrained around 200 x 200px when the page could easily fit 800 x 800
Thank you so much. You've solved my problem 🙂
Thank your your solution.
And how can I change the first image's width in Desktop interface?
Every step worked except the last part, I can not get the arrows to show.
Hello, what does it mean to initialise the sliders please
Ihad my slider working now all of a sudden there are white boxes behind it. can someone help?
https://purple-lotus.ca/products/jade-carvings
$('.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: false,
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>'
});
Hello @Lixon_Louis
Your steps worked perfect!!! But how do I get the arrows to show??
Hi! Could you explain where exactly to past the code (what line or after/before which code)? The link is unfortunately not working anymore in case there was a screenshot or something.
Hi,
I'm trying to follow these steps to add scrolling images to my Boundless theme. I'm getting lost at step 2 as the links you've provided no longer work. Would you mind helping me out with some updated directions? Thanks so much.
Hello @Lixon_Louis
For the 3rd point link is not working so how can I check the code, can you please paste here
3. Replace the code inside product-template-gallery with this Gist
Thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024