How to show Product Image Gallery on Product Page (Boundless Template)

[ZiZoouStore]

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.

[Lixon_Louis · 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">&raquo;</button>',
    prevArrow: '<button type="button" class="slick-prev">&laquo;</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

[Lixon_Louis]

Step 4 - Screenshot https://monosnap.com/file/wPi93vvuhCqMFJQnKwbqxqdKkZULmb

[Stoles]

Worked for me! Thank you so much for sharing!

[colbychristina]

hi, where is the product admin? thanks again

[silknsoleil]

Hi, i am needing to do this on my narrative theme but i need some help. will this work on this theme also please?

[qqryan]

Both links here and on the previous message are not working. I stuck on step 4 
Can you help me?

[colbychristina]

where is "product admin"? 

i followed the steps but was stuck on that last part

thanks

[ZiZoouStore]

Thanks for your share, but can you help me where is "product admin"?

Thank you so much.

[Lixon_Louis]

@ZiZoouStore @colbychristina  

[marbs]

@Lixon_Louis theres a huge issue 

[Lixon_Louis]

@marbs can you share the link? 

[TheWorkLabel]

@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.

[TheWorkLabel]

@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!

[Octipus]

@TheWorkLabel 

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' %}

[Saturn_png]

@Octipus inside of "theme.scss.liquid" ??

[Octipus]

Yes, I have updated the post above to make it a bit more clear 🙂

[Saturn_png]

Thank you @Octipus 

Exactly What I looked for ! Thanks.

Now, I juste need to find how to put a "click/zoom" in it.

[Diamond_Team]

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:

https://boundless-product-page-template.myshopify.com/products/product-page-template-with-image-slid...

Best regards,

Diamond team

[Purekalon]

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"?

[ZiZoouStore]

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?

[lashaunchey]

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?

[lashaunchey]

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?

[engdomum]

the method works but be cautious the variant image doesn't sync with variant pick!

[DonPseudo]

Hi LL,

was there a solution for the issue of @marbs? I have the small numbers too...

[Lixon_Louis]

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'
  })

[DonPseudo]

@Lixon_Louis  

yes...thanks...but where to add? product-template-gallery.liquid?

[Lixon_Louis]

@DonPseudo update the code you already added inside theme.js.liquid in Step 4. See screenshot

[DonPseudo]

So simple! Thanks mate! @Lixon_Louis 

[mikadrew]

Hi, this happened to me too. Did you ever find a solution? Thank you

[kyleedarcy]

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

[Saturn_png]

@kyleedarcy Did you find a solution ?

[ZiZoouStore]

Thank you so much. You've solved my problem 🙂

[ZiZoouStore]

Thank your your solution.

And how can I change the first image's width in Desktop interface?

[Joe-ee]

Every step worked except the last part, I can not get the arrows to show. 

[SBTL]

Hello, what does it mean to initialise the sliders please 

[purplelotus]

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">&raquo;</button>',
prevArrow: '<button type="button" class="slick-prev">&laquo;</button>'

});

[Purekalon]

Hello @Lixon_Louis 

Your steps worked perfect!!! But how do I get the arrows to show??

[Aniik]

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.

[houseofvella]

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.

[GangaDevi]

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