FROM CACHE - en_header

Debut theme - Product thumbnails as slider

Solved
T8
Excursionist
16 1 3

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

Accepted Solutions (4)

Accepted Solutions
Tejas_Nadpara
Shopify Partner
1087 216 535

This is an accepted solution.

@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
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help

View solution in original post

T8
Excursionist
16 1 3

This is an accepted solution.

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

View solution in original post

Tejas_Nadpara
Shopify Partner
1087 216 535

This is an accepted solution.

@T8 

 

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

 

Thank you,

Tejas

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

View solution in original post

Tejas_Nadpara
Shopify Partner
1087 216 535

This is an accepted solution.

@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
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help

View solution in original post

Replies 137 (137)
Tejas_Nadpara
Shopify Partner
1087 216 535

This is an accepted solution.

@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
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
T8
Excursionist
16 1 3

This is an accepted solution.

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

Tejas_Nadpara
Shopify Partner
1087 216 535

This is an accepted solution.

@T8 

 

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

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
Tejas_Nadpara
Shopify Partner
1087 216 535

This is an accepted solution.

@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
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
T8
Excursionist
16 1 3

Thank you Tejas,

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

 

David

LiquidDiffuser
Tourist
14 0 0

Thank you for the very helpful answer, but i found that there is a little problem with the code.

When the image switches if there is a smaller image the thumbnail moves. Is there a way to keep it 300px 300px square image so the thumbnail will not move if the images are being switched ?

(if its needed my store url to check: https://liquiddiffuser.com/products/diamond-watch-band-apple-iwatch)

Thanks alot in advance

 

kunecting
Shopify Partner
3 0 1

Hi,

 

Thanks for your helpful instructions @Tejas_Nadpara 

 

I've followed your steps in my store and it works but thumbnails are shown in 2 lines, not in 1 to scroll. My url store is mikakus-shop.myshopify.com. You can check this product: https://mikakus-shop.myshopify.com/collections/sneakers-hombre-boom/products/boom-by-paco-osuna

 

Thanks for your help!

 

Tejas_Nadpara
Shopify Partner
1087 216 535

@kunecting 

 

Okay, I need to check in your theme code to find the exact issue so, can I send a request for the Shopify collaborate account? so I can take a look and fix the issue.

 

Thank you,

Tejas

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

Hi @Tejas_Nadpara 

 

I've solved the issue. I was modifying another part of theme.js that didn't was correct.

 

Thanks!

Ardi94
Shopify Partner
104 3 32

Works like a charm. Thank you so much.

androidme
Shopify Partner
1 0 0

I am also facing the same issue but I followed the instruction correctly. Can you please help me here ?


@kunecting wrote:

Hi @Tejas_Nadpara 

 

I've solved the issue. I was modifying another part of theme.js that didn't was correct.

 

Thanks!


 

Robgob
New Member
2 0 1

Hello,

 

This isn't quite working for me either.. I believe i have followed this guide step by step but for some odd reason, The picture below is the outcome..

I have created a paste bin for the files below..

 

https://pastebin.com/xyq4xbDY - Theme.js

https://pastebin.com/5P7SxJ2X - product-template.liquid

https://pastebin.com/Vi65YCN7 - theme.scss.liquid

 

Scrolling Thumbnails.JPG

Ardi94
Shopify Partner
104 3 32

@Robgob wrote:

Hello,

 

This isn't quite working for me either.. I believe i have followed this guide step by step but for some odd reason, The picture below is the outcome..

I have created a paste bin for the files below..

 

https://pastebin.com/xyq4xbDY - Theme.js

https://pastebin.com/5P7SxJ2X - product-template.liquid

https://pastebin.com/Vi65YCN7 - theme.scss.liquid

 

Scrolling Thumbnails.JPG



Hi Robgob,

problem is with your js.

there are two _initBreakpoints();

the easiest way to explain this is that you need to change the second one, so if you have a back-up of the previous version of your theme.js use that and then search for _initbreakpoints(); go to the second one and then use the code provided before to replace it. I'm going to upload mine here if you want to use it.

go to the first _initBreakpoints(); and use this code to replace what you have there (Note: I put the first and last line here so you know where it starts and stops so make sure not to duplicate those codes)

 

    this.$sortSelect.on('change', this._onSortChange.bind(this));
    this._initBreakpoints();
    this._initParams();
  }

  Filters.prototype = _.assignIn({}, Filters.prototype, {
    _initBreakpoints: function() {
      var self = this;

      enquire.register(settings.mediaQueryMediumUp, {
        match: function() {
          self._resizeSelect(self.$selects);
        }
      });
    },
    _initParams: function() {

Now go to the second _initBreakpoints(); and use this code (Note: the last two line here are to tell you when to stop so make sure you're not duplicating those):

    this._initBreakpoints();
    this._stringOverrides();
    this._initVariants();
    this._initImageSwitch();
    this._initAddToCart();
    this._setActiveThumbnail();
  }

  Product.prototype = _.assignIn({}, Product.prototype, {
    _stringOverrides: function() {
      theme.productStrings = theme.productStrings || {};
      $.extend(theme.strings, theme.productStrings);
    },

    _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()
    },

    _initVariants: function() {
      var options = {

Hope this helps, let me know if you face any other problems

 

Ardi94
Shopify Partner
104 3 32

@androidme wrote:

I am also facing the same issue but I followed the instruction correctly. Can you please help me here ?


@kunecting wrote:

Hi @Tejas_Nadpara 

 

I've solved the issue. I was modifying another part of theme.js that didn't was correct.

 

Thanks!


 


Hi androidme,

Try the solution above, maybe it's the same issue you're facing.

problem is with your js.

Let me know if this fixes it.

Robgob
New Member
2 0 1

@Ardi94 wrote:

 

Hi Robgob,

problem is with your js.

there are two _initBreakpoints();

the easiest way to explain this is that you need to change the second one, so if you have a back-up of the previous version of your theme.js use that and then search for _initbreakpoints(); go to the second one and then use the code provided before to replace it. I'm going to upload mine here if you want to use it.

go to the first _initBreakpoints(); and use this code to replace what you have there (Note: I put the first and last line here so you know where it starts and stops so make sure not to duplicate those codes)

 

Hope this helps, let me know if you face any other problems

 


Hello Ardi!

 

That worked perfectly! Thank you! 🙂

foliotravel
New Member
10 0 0

@Tejas_Nadpara @Ardi94 

 

This works great, thank you! I'm wondering if it's possible to make the scrolling stop when you hit the last image instead of circling back around to the first image? And same when going backwards, to stop at the first image instead of going through to the last one?

robiv
New Member
1 0 0

Hi tejas i did everything u said, but nothing changes including this one. Niether is there any error.. Please advise..

 

Ardi94
Shopify Partner
104 3 32

@robiv wrote:

Hi tejas i did everything u said, but nothing changes including this one. Niether is there any error.. Please advise..

 


Can you upload your codes here?

theme.js,  theme.css  and product_template

Tom-r
New Member
2 0 0

hi slider not working I am not sure what I have done wrong https://blackpearlcoating.co.uk/products/black-pearl-black

 

any help