Instructions to enable thumbnail slider for all screens [Debut]

Solved
Highlighted
Excursionist
42 1 6

These are instructions to enable thumbnail slider for all screen sizes using Debut. I have updated Tejas_Nadpara 's codes from this post and put them here

All credit goes to Tejas Nadpara

Have fun coding everyone

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Excursionist
42 1 6

This is an accepted solution.

Follow these steps to enable thumbnail slider for Debut theme:

1. Go to Online StoreThemes > Actions > Edit code

2. Open Assetstheme.js

3. Around line 6368 find

    _initBreakpoints: function() {
      var self = this;

      enquire.register(this.settings.mediaQuerySmall, {
        match: function() {
          // initialize thumbnail slider on mobile if more than four thumbnails
          if ($(self.selectors.productThumbImages).length > 4) {
            self._initThumbnailSlider();
          }

          // destroy image zooming if enabled
          if (self.settings.zoomEnabled) {
            $(self.selectors.imageZoomWrapper).each(function() {
              _destroyZoom(this);
            });
          }

          self.settings.bpSmall = true;
        },
        unmatch: function() {
          if (self.settings.sliderActive) {
            self._destroyThumbnailSlider();
          }

          self.settings.bpSmall = false;
        }
      });

      enquire.register(this.settings.mediaQueryMediumUp, {
        match: function() {
          if (self.settings.zoomEnabled) {
            $(self.selectors.imageZoomWrapper).each(function() {
              _enableZoom(this);
            });
          }
        }
      });
    },

 

4. Replace with

 

	_initBreakpoints: function() {
      var self = this;

      enquire.register(this.settings.mediaQuerySmall, {
        match: function() {
          // initialize thumbnail slider on mobile if more than four thumbnails
          /*
          if ($(self.selectors.productThumbImages).length > 4) {
            self._initThumbnailSlider();
          }
          */
          // destroy image zooming if enabled
          if (self.settings.zoomEnabled) {
            $(self.selectors.imageZoomWrapper).each(function() {
              _destroyZoom(this);
            });
          }

          self.settings.bpSmall = true;
        },
        unmatch: function() {
          /*
          if (self.settings.sliderActive) {
            self._destroyThumbnailSlider();
          }
          */

          self.settings.bpSmall = false;
        }
      });

      enquire.register(this.settings.mediaQueryMediumUp, {
        match: function() {
          if (self.settings.zoomEnabled) {
            $(self.selectors.imageZoomWrapper).each(function() {
              _enableZoom(this);
            });
          }
        }
      });
          if ($(self.selectors.productThumbImages).length > 3) {
		      this._initThumbnailSlider()
          }
    },

5. Save and close theme.js

 

6. Now go to Sections > product-template.liquid

7. Around lines 74 find

 

<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">

8. Replace with

 

<button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">

9. Around line 81 find

 

 

 

<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">

10. Replace with

 

 

<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js no-clear">

11. Around line 113 find

<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">

12. Replace with

<button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">

13. Save and close product-template.liquid

14. Go to Assets > theme.scss.liquid and add the following CSS to the bottom of the file:

/*================ Product Image Slider ================*/

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

.thumbnails-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .thumbnails-slider__prev {
    left: -50px;
  }

  .thumbnails-slider__next {
    right: -50px;
  }


@media screen and (max-width: 749px) {
  .thumbnails-slider__prev {
    left: -20px;
  }

  .thumbnails-slider__next {
    right: -20px;
  }
}

15. Save and close theme.scss.liquid

Good luck everyone

 

 

 

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
1 Like
Highlighted
New Member
10 0 0

hi @Ardi94 thanks so much for the update. Do you know how to get the slider to work on gift card product pages? Here is the link to my product, and here's the link to my gift card product. You can see how the images don't display at all on the gift card product, but miraculously reappears when you access on mobile or resize the computer window. I think it has to do with the product type but not sure how to code that properly.

 

product type.jpg

0 Likes
Highlighted
Excursionist
42 1 6

@foliotravel 

The links that you've sent me, show slightly different codes.

My first guess is that you are using two different templates in your store, one for products one for gift cards. double-check if your gift card product template is correct, maybe that fixes it.

If you are using the different templates intentionally, make sure you've made the customizations to the second one too. (you can use an online text compare website to find the differences easily)

If the issue still exists, let me know to look deeper into your codes.

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Highlighted
New Member
10 0 0

@Ardi94 

 

Yes, I am using a different product template! Great catch. I updated my other product template and now it's working great. Thanks again!

0 Likes
Highlighted
New Member
2 0 0

Thanks so much, it works perfectly.

Can I ask you if You know how to add arrows in the main picture too?

 

thank you,

Rob

0 Likes
Highlighted
Excursionist
42 1 6

@Robbe 

I never tried something like this. How comfortable are you with javascript? and do you want to replace the arrows or have a new set of arrows (so 2 for thumbnails 2 for featured image)?

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Highlighted
New Member
2 0 0

I only know html and css :) I thought it was a similar code, it doesn't matter

Anyway if you find a solution it will be ok with 4 arrows :)

 

thanks again for your code

0 Likes
Highlighted
New Member
1 0 0

Thanks for this great tutorial. I followed all the steps, but it still doesn't do anything at all.

 

I just get the same view as before. Do I have to do anything more after editing the codes ? 

Thanks

0 Likes
Highlighted
Excursionist
42 1 6

hmm   It should work, let me take a look at your website, can you give me the url?

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes