How to add thumbnail images to product pages

Solved
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
Highlighted
Shopify Partner
1665 51 186

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 the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
Highlighted
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
Highlighted
Shopify Partner
1665 51 186

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 the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
Highlighted

Success.

Shopify Partner
1665 51 186

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 the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
1 Like
Highlighted
New Member
8 0 0

Perfect thank you! it worked!

0 Likes
Highlighted
New Member
7 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