Solved

How to add thumbnail images to product pages

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,

 

 

 

 

Accepted Solution (1)
PaulNewton
Shopify Partner
6274 573 1319

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;
}
}

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 28 (28)

PaulNewton
Shopify Partner
6274 573 1319

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;
}
}

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


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

PaulNewton
Shopify Partner
6274 573 1319

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.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


PaulNewton
Shopify Partner
6274 573 1319

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;
}
}

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


WinstonT
New Member
8 0 0

Perfect thank you! it worked!

opticstrading
Tourist
8 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

PaulNewton
Shopify Partner
6274 573 1319

These instructions were for the brooklyn theme as of 02019-06-21 and have not been updated nor tailored for other themes.

 

@opticstrading 

If I have time I might have a look. what is your theme, storename , and storefront-password

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


opticstrading
Tourist
8 0 0

Theme Brooklyn.  Store name https://optics-trading.myshopify.com/

PaulNewton
Shopify Partner
6274 573 1319

@opticstrading there is some issue with this element:

<div class="slick-list draggable" tabindex="0" style="height: 322px;">

It seems when ever the main image is dragged or a "dot" is clicked during the transistion height may get stuck at 1px tall thus nothing shows.

<div class="slick-list draggable" tabindex="0" style="height: 1px;">

Possibly related issue for the slideshow javascript library slick.js https://github.com/kenwheeler/slick/search?q=height+1px&type=Issues

 

Always backup your theme before making code changes

Possible solutions - 

Make a duplicate theme and test these different changes, remember to undo code when it fails before trying different things

A quick CSS fix to add to theme.scss.liquid(or theme.css,etc), is to set a minimum height so it never collapses:

.slick-list { min-height: 322px; }

Tailor height to taste.

Note - this is simple CSS style rule will be the height everywhere big screens and small screens you will need to turn it into a media query to be responsive.

 

Test Javascript slick.js settings - 

in theme.js, or theme.js.liquid find the following around line 1819:

draggable: false,

Set it to true(draggable: true,) and test (don't delete that comma , )

 

If the issue no longer happens when dragging(swiping), then test the dots.

If dots still cause an issue then around line 1795 find the following

dots: true

change to dots: false

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


opticstrading
Tourist
8 0 0

Thanks, I tried this code work better, with thumbnail photo ok, but sometimes when testing with dots on mobile phone looks like photo disappear.

 

Photo.jpg

PaulNewton
Shopify Partner
6274 573 1319

Following the above can you just disable the dots?

With thumbnails the dots are pointless anyways.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


opticstrading
Tourist
8 0 0

Is there any solution for this issue?

audryrose
Visitor
1 0 0

Hi @PaulNewton! I would also like to display the images below. My brooklyn theme must be differen't couldn't find the section of code you were talking about. Could I pay you to do this for me? 

miti
Visitor
2 0 0

Hi,

I'm using the Brooklyn theme latest version and am unable enable thumbnails in mobile version. 

Can you please help?

feelathom
Visitor
1 0 0

Hi I am having the same issue. 

I see the thumbnails on my desktop view but not mobile and I can't figure out how to fix. Please help!

sidhant
Visitor
2 0 0

Hi, Ive finalized on the narrative theme. Really like it except the peoduct page. I really wish you could help me out. Basically i want thumbnail pictures below the main feature picture. In narrative theme you gotto scrool to the bottom of the page to see other angles of the product. Or you need to click the picture and then you can scrool. Either one would help, the pictures with bottom thumbnails or scrolling the main pictures without having to click it.

PaulNewton
Shopify Partner
6274 573 1319

i want thumbnail pictures below the main feature picture. In narrative theme you gotto scrool to the bottom of the page to see other angles of the product. Or you need to click the picture and then you can scrool. Either one would help, the pictures with bottom thumbnails or scrolling the main pictures without having to click it.

The thumbs on your product page are already below the main image and are clickable and the page is scrollable when the page loads.

You need to take the time to explain what the problem is so others can follow in a meaningful way.

If you need extended support for narrative theme make a separate discussion and let others  forum users contribute, or hire someone.

And let this thread focus on the brooklyn theme as it was intended.

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


sidhant
Visitor
2 0 0

Hi, Sorry i didnt know this thread was specifically only for the Brooklyn theme. May be you should change the heading or at least mention Brooklyn theme in it. Also sorry for not explaining myself in detail, usually a shopify guru understands the worst explanations very easily. Please understand that not everybody is tech savvy or have a clue about coding, thats why we opt for products like shopify which are user friendly and easy to use. 

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!

joneiko
Visitor
1 0 0

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

 
zeplayer
Visitor
1 0 0

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

 

any help?

Nowaz
Excursionist
16 0 3

Dear, I am ignorant of coding. Can you please specify which code should I put on which line or section? I can't understand your 2nd and 3rd steps. Exactly where should I put these 2nd and 3rd step's code?

PaulNewton
Shopify Partner
6274 573 1319

@Nowaz wrote:

 I am ignorant of coding ...I can't understand your 2nd and 3rd steps. Exactly where should I put these 2nd and 3rd step's code?


Even if you think you don't know coding If you got Step#1 working your on the right path!  Just reread the steps carefully and look through the related files slowly.

#2 The should still be in the product-template.liquid there should be a loop immediately after step#1's <ul> elements then <li> html tags that wrap the individual thumbs.

#3 is in timber.scss.liquid

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


PaulNewton
Shopify Partner
6274 573 1319

For new versions things may have moved or changed to support the new media feature for products.

Updated steps are for versions near the date of this post and version BROOKLYN (VERSION 16.0.9) 

Always backup your themes before making changes

#1  Make the gallery show on mobile(small screens) - Find the thumbnails container element in sections/product-template.liquid near line ~85 and remove the 'small--hide'.

<ul class="product-single__thumbnails small--hide grid-uniform" data-product-thumbnails>

becomes

<ul class="product-single__thumbnails grid-uniform" data-product-thumbnails>

Save and check your work thumbnails should show on small screens,mobile, albeit stacked on top of each other.

Notes - small--hide is CSS class that hides the thumbnail gallery with related media queries in theme.scss.liquid

Next - Then a few lines below you'll need to add a CSS class on the to make the thumbnails use the right widths so they can sit side by site instead of stacking vertically.

 

#2 Make thumbnails sit side by side - Find the individual thumbnail containers in sections/product-template.liquid near line ~88 and add small--one-third

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

becomes:

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

Notes - other size options are small--one-quarter,small--one-fifth etc. @See timber.scss.liquid WIDTHS

Next - Depending on your photos the thumbnail strip may maybe to flush against the main image or to far away.

 

#3(Optional) Style Gallery's Whitespace - If the gallery is to close to the main image add the following style CSS to the end of timber.scss.liquid 

 add some margin-top either to  product-single__thumbnails  for all small sizes :

@include at-query($min, $small){
	#ProductMediaGroup-product-template .product-single__thumbnails {
		margin-top: 20px;
    }
}

Alternatively find the proper rule in updated themes  similar to & ~ .product-single__thumbnails around line 3404 and transfer it to proper location in current theme or update the margin amount.

Note - pure CSS media query styles with proper specificity also could be add to a <style></style> tag in sections/product-template.liquid

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Nowaz
Excursionist
16 0 3

Buddy I really appreciate your help. Thank you. You are awesome.

Now I clearly understand 1st and 3rd step but still hesitating with the 2nd step. Can you please send me a screenshot where you write 1st and 2nd steps code?loop.JPG

PaulNewton
Shopify Partner
6274 573 1319

@Nowaz 

shopify-customiztion-brooklyn-theme-product-gallery-thumbnail-for-mobile.png

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


dtmp97
Excursionist
13 0 6

This doesn't work anymore. Even if you get thumbnails to appear on mobile, clicking on them doesn't do anything, main image doesn't sync with selected thumbnail image at all.

rajeshNekkanti
New Member
5 0 0

Hi there, I have the same problem with the product page images 

preview link: https://2aptqmk860j4gkb9-14705360950.shopifypreview.com

can you solve this I want all the images in a loop with pagination.