Turn thumbnails into a slider Debut Theme

Highlighted
Shopify Partner
3 0 0

Hi Ava,

Following up with you based on my previous comment, is there a fix that you can provide? It seems that the existing fix is not working and a lot of us would benefit from this.

Thank you for your support!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
519 26 75

Hi, Everyone!

Ava here again.

At this stage, I believe it is best to close off this thread for the moment, just as it has started to slide off topic. The Forums here are more for open discussion amongst community members, the ticket requests seem to be pulling the thread off topic.

The guide I've posted is clearly laid out for merchants to follow step by step. This tutorial is specifically for the Debut theme, but it would also depend on several factors; if you have already implemented custom coding, if you have installed apps that may clash with the coding in this tutorial, the version of the theme you are using, etc.

After discussing this thread with our Theme Support team, they have let me know that this is quite an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript, and Liquid is required. If you are having trouble following the steps described in the tutorial, we suggest hiring a Shopify Expert. You can actually post a job on the Shopify Experts Page and see what feedback and quotes you get. You can find where and how to do this here.

That being said, I would welcome other members in opening a new discussion thread! This would leave people free to discuss the tutorial and lend a hand to each other where possible. I'd also encourage users to provide as much information as possible when they run into issues. The more context that is there, the easier it is to troubleshoot the problem.

I'll post the steps once more below here, just so the tutorial does not get lost amongst the comments. Thanks so much for the interest here, I've sent feedback along to our higher support team so that this feature might be included as part of the Debut theme as standard in the future. I'm sure if you carefully follow the steps of the tutorial here, you will be happy with the end result.

  1. First, you will need to access your themes HTML/CSS. Go to Online Store > Themes > Actions > Edit Code.
  2. After that, scroll to the Assets folder and select the theme.js file.

       3. If you are using a Mac, use the cmd + F button to search for this: _setActiveThumbnail();

       4. On a new line directly below this add this: _initThumbnailSlider();

       5. A few lines before this, look for the _initBreakpoints: function() function. Inside this, comment out the first if statement. Then a bit further down inside the unmatch: function() , comment out the if statement there too.

It's important to comment out those two if statements. When you comment out a piece of code, you are telling your browser to ignore it. So the code will still be there if you were to inspect the page source code, but that piece of code will be ignored by your browser.

So in step 5, if you select the line where the if statement begins, you can hit the enter key to create a new line. Here you can add the opening comment. Add the closing comment at the end of the statement.

It should look like this when you are done

       6. Next, go to the Sections area and open the product-template.liquid file

       7. Look for the <div> with a class of thumbnails-wrapper. This is where the previous/next arrows are, and they are currently set up to only show on mobile.

       8. Remove the medium-up--hide class from both of these buttons:

       9. Now we add a new class no-clear to the <li> item that is between the two buttons. If you search for product-single__thumbnails-item you can add this class at the end of the line. The product-template.liquid file should now look like this when it’s done:

      10. Finally, go to the theme.scss.liquid file in the Assets section and add the following CSS to the bottom of the file:

@include media-query($medium-up) { 
.no-clear {
clear: none !important; 
}

.thumbnails-slider_prev.thumbnails-slider_prev--product-template {
display: inline-block;
position: absolute;
left: -9%;
top: 60%;
transform: translateY(-60%);
z-index: 10000;
padding-left: 0;
}

.thumbnails-slider_next.thumbnails-slider_next--product-template {
display: inline-block;
position: absolute;
right: -9%;
top: 60%;
transform: translateY(-60%);
z-index: 10000;
}

.product-single__photos {
position: relative; 
padding-left: 0;
}

.product-single__thumbnails-item.js.no-clear.slick-slide.slick-active {
padding-top: 0;
}

.thumbnails-wrapper.thumbnails-slider--active {
position: relative;
}

.left--arrow {
position: absolute;
top: 60%;
transform: translateY(-60%);
left: -9%;
z-index: 10000;
}

.right--arrow {
position: absolute;
top: 60%;
transform: translateY(-60%);
right: -9%;
z-index: 10000;
}

.slick-hidden { 
display: none !important; 
}

.slick-track {
margin-top: 10px;
}

.thumbnails-slider--active {
max-width: 92%;
margin: 0 auto;
}

.product-single__thumbnail {
margin: 3px 8px;
}
}

Be sure to Save all changes!

Again, best of luck to everyone in the future!

Ava

Social Care Guru | support@shopify.com

Ava | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
1 0 0

sorry, but it does not work.

I also use the Debut Theme.

 

I applied this code (i tried 3 times). All thumbnails disappeared, only arrows are there, but nothing is happening when we click on them.

Please, let me know if you have a solution for it.

Thanks,

Eric

0 Likes
Highlighted
New Member
5 0 0

I've the same problem like Eric80.

 

PLEASE, let me know if you found the solution for it.

 

Thanks in advance!

0 Likes
Highlighted
New Member
5 0 0

AVA, my ticket number is: 12557487

 

Thanks in advance!

0 Likes
Highlighted
Tourist
17 0 0

Awesome! Worked perfectly. Thanks so much!

0 Likes
Highlighted
Tourist
5 0 2

It seems that the instruction in the first step for adding "_initThumbnailSlider();" should have been to add "this._initThumbnailSlider();".

 

This fixed it for me - hopefully will help anyone else who tries to use this fix.

2 Likes