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

[gwilliams]

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]

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

[gwilliams]

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

[bluchill]

Hey man try this and see if it helps: https://community.shopify.com/c/Shopify-Design/Changing-image-thumbnails-in-Debut-Theme/m-p/1083265#...

[Dustin-C]

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

[bluchill]

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

[Dustin-C]

I figured out how to make it work for my needs, maybe this will help someone else. 

1: Go into Assests > theme.js file and find _initDesktopBreakpoint: function and replace that function with this:

  _initDesktopBreakpoint: function() {
      if (this.mqlMediumUp.matches && this.settings.zoomEnabled) {
        this.imageZoomWrapper.forEach(
          function(element, index) {
            this._enableZoom(element, index);
          }.bind(this)
        );
      };
      if (
        this.container.querySelectorAll(this.selectors.productThumbImages)
          .length > 3
      ) {
        this._initThumbnailSlider();
      }
  
    },

You're just adding the if statement to this function which is in the Mobile breakpoint.

2. Go to the Sections > product-template.liquid  Look for the <div> with a class of thumbnails-wrapper. This is where the next and previous arrows are. Replace  medium-up--hide class on both of these buttons with 

{% if enable_thumbnail_slides != true %} hide--medium {%endif %} 

This will hide the arrows if there are fewer than 3 images. 

3: Go to Assets > theme.css and paste this at the bottom of the file. 

@media only screen and (min-width: 750px) {
  .template-product .main-content {
    padding-top: 22px;
  }
  .product-single__media-group {
    position: relative;
  }
  .thumbnails-wrapper {
    position: relative;
    top: 10px;
    text-align: center;
    margin: 0 2px 30px 2px;
  }
  .thumbnails-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .thumbnails-slider__btn .icon {
    height: 14px;
    width: 14px;
  }
  .thumbnails-slider__prev {
    left: -15px;
  }
  .thumbnails-slider__next {
    right: -15px;
    position: absolute;
  }
  .product-single__thumbnail {
    margin: 0 auto;
  }

  .product-single__thumbnails {
    margin-top: 0;
    justify-content: center;
  }
  .slider-active .product-single__thumbnails {
    display: block;
    margin: 0 auto;
    max-width: 75%;
    overflow: hidden;
  }

  .product-single__thumbnails-slider-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
  }
  .product-single__thumbnails-slider-track:before,
  .product-single__thumbnails-slider-track:after {
    content: "";
    display: table;
  }
  .product-single__thumbnails-slider-track:after {
    clear: both;
  }
}
.product-single__thumbnails-slider-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100% !important;
}

.product-single__thumbnails-item {
  flex: 0 0 33.333%;
  height: 0;
  padding-top: 33.3%;
  position: relative;
  /* padding-left: 5px; */
}
.product-single__thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.product-single__thumbnail-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

If you're on the older debut theme, this solution here should work for you.
https://community.shopify.com/c/Technical-Q-A/Debut-theme-Product-thumbnails-as-slider/td-p/571620

It was also a huge help with figuring out my solution. 

[DigiXoft]

Hello, @gwilliams 

Thanks 

It can be done by doing some code customization using slick slider .

Please take the help of a developer and hire Shopify Expert or me

[EvolvedCreative]

This is epic, thanks! Any idea how we enable touch events so people can swipe on mobile? It's massively impacting my UX 😞

[binjarsas33]

I suppose it requires having an perception into the actual code of your cutting-edge Shopify subject post, a few virtually simple tweaks can be supplied totally through analyzing code from the real website without getting access to it.