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

Solved
ZiZoouStore
Excursionist
37 0 7

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.

Accepted Solution (1)

Accepted Solutions
Lixon_Louis
Shopify Partner
1186 35 267

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

 

 

View solution in original post

Replies 39 (39)
Lixon_Louis
Shopify Partner
1186 35 267

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

 

 

View solution in original post

Stoles
New Member
1 0 1

Worked for me! Thank you so much for sharing!

colbychristina
New Member
3 0 0

where is "product admin"? 

i followed the steps but was stuck on that last part

thanks

colbychristina
New Member
3 0 0

hi, where is the product admin? thanks again

ZiZoouStore
Excursionist
37 0 7

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

Thank you so much.

Lixon_Louis
Shopify Partner
1186 35 267
marbs
New Member
1 0 0
Lixon_Louis
Shopify Partner
1186 35 267