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

Technical Q&A
2

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

  });
  1. 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%
}
  1. 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