Debut theme - Product thumbnails as slider

Solved
Highlighted
Excursionist
16 1 1

Hi there,

 

Is there anyway to change the Product thumbnails on the Debut theme into a slider?

I read that in some themes it is automatic once you have +6 images, but I tried adding 9 and they still display as a group under the main product image. I also read that I need to ask support to do this for me, but not sure how to do that apart from here.

 

Many thanks,

David

0 Likes

Success.

Shopify Partner
531 110 150

@T8 

 

Follow this steps to enable thumbnail slider for Debut theme:

 

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. Search function _initBreakpoints() and replace it with following code:

_initBreakpoints: function() {
      var self = this;

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

          // destroy image zooming if enabled
          if (self.settings.zoomEnabled) {
            $(self.selectors.productImageWraps).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.productImageWraps).each(function() {
              _enableZoom(this);
            });
          }
        }
      });
      
      this._initThumbnailSlider()
    },

see, following screenshot

initBreakpoints.png

 

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

 

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

 

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

medium-up--hide.png

 

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

no_clear.png

 

8. 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;
}
}

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

Be sure to Save all changes!

Again, best of luck to everyone!

If it not work for you then you can text me directly, I will help for that.

 

Cheers,

Tejas

 

 

 

 

 

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
1 Like

Success.

Excursionist
16 1 1

Thank you very much it is working now. Very good instructions my friend. The only slight thing I noticed is if I scroll on the right everything is fine. When I try to scroll to the left, the image furthest to the left, it's bounding box seems overlap slightly onto the left arrow. This means if you click in the center of the arrow you hit the first image, so you need to hit the very right edge of the left arrow. Does this make sense? Somewhere the width of the thumbnail holder is either too wide or not in the correct left position

0 Likes

Success.

Shopify Partner
531 110 150

@T8 

 

Send me your store url so, I can check and assist you better.

 

Thank you,

Tejas

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
1 Like

Success.

Shopify Partner
531 110 150

@T8 

 

I understood the issue, just add following code at the bottom of theme.scss.liquid file:

.thumbnails-slider__btn {
    z-index: 1;
}

Cheers,

Tejas

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
1 Like
Excursionist
16 1 1

Thank you Tejas,

It now displays/functions exactly as I wanted it to. Your is much appreciated

 

David

1 Like