How to add thumbnail images to product pages

Solved
WinstonT
New Member
8 0 0

Hello,

 

I'm currently using the Brooklyn Theme.

 

In the product pages when displaying the products in mobile view - it displays the products as as a slideshow. See picture below.

Screen Shot 2019-06-21 at 12.35.03 PM.png

I'd like to add thumbnails to the product when in mobile view. Similar to how the Debut theme does it. See below:

 

Screen Shot 2019-06-21 at 12.32.07 PM.png

Can someone advise on how I can do this?

 

Thanks,

 

 

 

 

0 Likes
PaulNewton
Shopify Partner
2588 134 445

shopify.com/admin/themes/current?key=sections/product-template.liquid&line=193

 

#1 Find the code similar to the following in your product-template.liquid around line 193 

 

<ul class="product-single__thumbnails small--hide grid-uniform" id="ProductThumbs">

Remove the 'small--hide' CSS property that is used in the media queries to hide the thumbnail gallery:

 

 

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">

 

 

#2 Then you'll need to add a CSS class to make the thumbnails use the right widths, find the code that generates this probably in a loop:

 

<li class="grid__item medium--one-third large--one-quarter product-single__photo-wrapper">

add small--one-third ( or small--one-quarter,small--one-fifth etc):

 

<li class="grid__item small--one-fifth medium--one-third large--one-quarter product-single__photo-wrapper">

 

#3 Depending on your photos the thumbnail strip may not be flush against the main image.

To fix that in timber.scss.liquid add some margin-top either directly to  product-single__thumbnails  for all screen sizes around line 3109:

 

.product-single__thumbnails {
  margin-left: -$gutter / 2;
  margin-top: 5px; 
  .grid__item {
    padding-left: $gutter / 2;
  }

  li {
    margin-bottom: $gutter / 2;
  }
}

Or as a media query include immediately after it

 

 

@include at-query ($small) {
.product-single__thumbnails {
  margin-top: 5px;
}
}

 

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
WinstonT
New Member
8 0 0

Hello Paul,

 

Thanks for the help - I followed your instructions. I was able to get the thumbnails below the product image but when I go to click on different images they end up stacking up. So if I go through all the product images they all end up stacking up on top of each other. Please see the photos below. Can you please advise on how to fix this? Screen Shot 2019-06-22 at 11.53.44 PM.pngScreen Shot 2019-06-22 at 11.54.59 PM.png

0 Likes
PaulNewton
Shopify Partner
2588 134 445

Hmm okay odd. In theme settings for product pages do you have image stacking turned off or on?

 

Could you share a theme preview URL, or your store url with the theme preview, also with storefront password if applicable.

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
PaulNewton
Shopify Partner
2588 134 445

This is an accepted solution.

The .hide class being applied by the slider is being overridden by specificity with CSS !important flag

.hide {
    display: none !important
}

 

may be able to remove that !important flag  in timber.scss

@media screen and (max-width: 590px)
.product-single__photo--container-thumb {
display: block !important;
}

or make an specific rule that makes .hide work properly again

@media screen and (max-width: 590px) {
.product-single__photo--container-thumb.hide {
display:none !important;
}
}

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
WinstonT
New Member
8 0 0

Perfect thank you! it worked!

0 Likes
MOSY
New Member
9 0 0

Hello!

 

I want to have the same on my product page (see screenshot). I'm using Prestige theme.

 

Снимок экрана 2020-02-14 в 13.44.00.pngСнимок экрана 2020-02-14 в 13.44.06.png

 

Hope someone will help me!

 

Thank you in advanced!

0 Likes
joneiko
New Member
1 0 0

Hello MOSY, have got any luckier with that, I also have the same theme, looking for your reply

 
0 Likes
zeplayer
New Member
1 0 0

Hello, I also use the Prestige and looking for the same.

 

any help?

0 Likes
opticstrading
Tourist
7 0 0

This work, but do not show all products properly, sometimes show only thumbnails without product picture (1 picture)

 

Do not show all productsDo not show all products

0 Likes