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,
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;**
}
}
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.
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;
}
}
Perfect thank you! it worked!
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?
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
Theme Brooklyn. Store name https://optics-trading.myshopify.com/
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!
Is there any solution for this issue?
@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
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.
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.
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.
