Debut theme - Add thumbnail image slider to product pages for Desktop

gwilliams
Explorer
77 0 15

Hello

I am using the Debut theme to develop my new website. I am looking to add an image slider for the thumbnail images on the product pages. I can see that this is visible on mobile view but I want to enable this on desktop/tablet too. I have gone through the forum to try out solutions but I haven't got this to work as my product-template.liquid document seems slightly different for some reason. I also think some of the previous forum pages I have looked at might be slightly out of date, hence why the code may be different.

Any help or suggestions would be greatly appreciated.

Many thanks,

Grant Williams
Web Development & Ecommerce Manager

KetanKumar
Shopify Partner
17202 1864 6440

Hello, @gwilliams 

Thanks 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
gwilliams
Explorer
77 0 15

Hello

Thank you for getting back to me. How do I go about with getting someone to customize the code for me to enable this?

Kind Regards

 

0 Likes
Dustin-C
New Member
1 0 0

Hi, 

Did you ever find a solution to this? I'm in the same boat since it seems like the Debut code has been updated. Here is the old solution that doesn't work due to the fact that my JS is different. 
https://community.shopify.com/c/Technical-Q-A/Debut-theme-Product-thumbnails-as-slider/m-p/572111#M1...

The provided CSS in this thread only creates a flex container around the thumbnails keeping them under the main image but doesn't enable the slider itself. 

I found this section of code in the theme.js, but haven't been able to use this function call to successfully enable the slider on all screen sizes.

 

 

 _initMobileBreakpoint: function() {
      if (this.mqlSmall.matches) {
        // initialize thumbnail slider on mobile if more than four thumbnails
        if (
          this.container.querySelectorAll(this.selectors.productThumbImages)
            .length > 4
        ) {
          this._initThumbnailSlider();
        }

        // destroy image zooming if enabled
        if (this.settings.zoomEnabled) {
          this.imageZoomWrapper.forEach(
            function(element, index) {
              this._destroyZoom(index);
            }.bind(this)
          );
        }

        this.settings.bpSmall = true;
      } else {
        if (this.settings.sliderActive) {
          this._destroyThumbnailSlider();
        }

        this.settings.bpSmall = false;
      }
    },

 

  
 

0 Likes
bluchill
Excursionist
30 0 4

Hello fellow hustlers, so I have just been chatting to a shopify robo-helper (until I got disconnected) about resolving the change in code and their 'developer's' solution is go to my old store (which is on pause) download the old code and then upload it to my new store so I have the thumbnail images be in a line/row, but I told her my contention is that there are people looking for this solution and it would be much easier to tell us all how to effect this change but 'she' said this was the only way as they do not know the 'extensive changes that have been made.' Basically I should go and reactivate my old store download the code and upload the code my new store and they will refund me the $29 as the 'developers' see this as the solution. I am shocked to be honest....I have no words, so their 'developers' is on an individual basis the way I understand it. I made it clear that this was not a solution and I can't do that as it is a round-about way and one person applicable 'solution'..... 

0 Likes