How to add thumbnail images to product pages

Solved
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?

0 Likes
PaulNewton
Shopify Partner
2579 134 440

@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

 

 

 

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
PaulNewton
Shopify Partner
2579 134 440

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

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

0 Likes
PaulNewton
Shopify Partner
2579 134 440

@Nowaz 

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

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
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.

0 Likes