Debut theme - Product thumbnails as slider

[T8]

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

[Tejas_Nadpara · 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

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:

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:

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

[T8 · 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 · Accepted solution]

@T8 

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

Thank you,

Tejas

[Tejas_Nadpara · 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

[T8]

Thank you Tejas,

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

David

[LiquidDiffuser]

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]

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]

@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

[kunecting]

Hi @Tejas_Nadpara 

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

Thanks!

[Ardi94]

Works like a charm. Thank you so much.

[androidme]

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]

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

[Ardi94]

---

@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

---

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]

---

@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]

---

@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]

@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]

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

[Ardi94]

---

@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]

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

any help