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]

@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

[Lixon_Louis]

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

[Stoles]

Worked for me! Thank you so much for sharing!

[colbychristina]

where is “product admin”?

i followed the steps but was stuck on that last part

thanks

[colbychristina]

hi, where is the product admin? thanks again

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

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

[mikadrew]

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

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

[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