Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

ZiZoouStore
Explorer
53 0 12

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)

Lixon_Louis
Shopify Partner
1193 35 268

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 40 (40)

Lixon_Louis
Shopify Partner
1193 35 268

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

 

 

Lixon_Louis
Shopify Partner
1193 35 268
Stoles
Visitor
1 0 1

Worked for me! Thank you so much for sharing!

colbychristina
Visitor
3 0 0

hi, where is the product admin? thanks again

silknsoleil
New Member
11 0 0

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
Visitor
2 0 1

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

colbychristina
Visitor
3 0 0

where is "product admin"? 

i followed the steps but was stuck on that last part

thanks

ZiZoouStore
Explorer
53 0 12

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

Thank you so much.

Lixon_Louis
Shopify Partner
1193 35 268
marbs
Visitor
1 0 0

 

Lixon_Louis
Shopify Partner
1193 35 268

@marbs can you share the link? 

TheWorkLabel
Tourist
9 0 2

@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
Tourist
9 0 2

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

TheWorkLabel_0-1596610660782.png

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
Shopify Partner
30 2 7

@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' %}
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
Saturn_png
Tourist
5 0 1

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

Octipus
Shopify Partner
30 2 7

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
Saturn_png
Tourist
5 0 1

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
Shopify Partner
112 14 24

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

 

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
Purekalon
Excursionist
40 0 8

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
Explorer
53 0 12

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?

Expand width.jpg

lashaunchey
Excursionist
14 0 2

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
Excursionist
14 0 2

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
Visitor
1 0 1

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

DonPseudo
Excursionist
17 0 5

Hi LL,

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

Lixon_Louis
Shopify Partner
1193 35 268

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
Excursionist
17 0 5

@Lixon_Louis  

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

Lixon_Louis
Shopify Partner
1193 35 268

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

 

Solved_ How to show Product Image Gallery on Produ.png

DonPseudo
Excursionist
17 0 5

So simple! Thanks mate! @Lixon_Louis 

mikadrew
Visitor
2 0 0

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

kyleedarcy
Tourist
4 0 1

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
Tourist
5 0 1

@kyleedarcy Did you find a solution ?

ZiZoouStore
Explorer
53 0 12


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

ZiZoouStore
Explorer
53 0 12

Thank your your solution.

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

Joe-ee
Tourist
13 0 1

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

SBTL
Visitor
1 0 1

Hello, what does it mean to initialise the sliders please 

 

 

purplelotus
Excursionist
23 0 8

Ihad my slider working now all of a sudden there are white boxes behind it. can someone help? 

Untitled.jpg

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
Excursionist
40 0 8

Hello @Lixon_Louis 

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

Aniik
Visitor
1 0 0

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
Tourist
3 0 1

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
Shopify Partner
1 0 0

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