Shopify themes, liquid, logos, and UX
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.
I'd like to add thumbnails to the product when in mobile view. Similar to how the Debut theme does it. See below:
Can someone advise on how I can do this?
Thanks,
Solved! Go to the solution
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
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
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?
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
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
Perfect thank you! it worked!
This work, but do not show all products properly, sometimes show only thumbnails without product picture (1 picture)
These instructions were for the brooklyn theme as of 02019-06-21 and have not been updated nor tailored for other themes.
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 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
Thanks, I tried this code work better, with thumbnail photo ok, but sometimes when testing with dots on mobile phone looks like photo disappear.
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
Is there any solution for this issue?
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?
Hi,
I'm using the Brooklyn theme latest version and am unable enable thumbnails in mobile version.
Can you please help?
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!
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.
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
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.
Hello!
I want to have the same on my product page (see screenshot). I'm using Prestige theme.
Hope someone will help me!
Thank you in advanced!
Hello MOSY, have got any luckier with that, I also have the same theme, looking for your reply
Hello, I also use the Prestige and looking for the same.
any help?
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?
@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
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
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?
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
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.
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024