Instructions to enable thumbnail slider for all screens [Debut]

Solved
AlinG
New Member
1 0 0

Hello @Ardi94 

First of all thanks for such detailed instructions. I have made the changes in my debut theme but unfortunately, it does not work.

Here are my files:

theme.css.liquid: https://controlc.com/1fe53842

theme.js: https://controlc.com/d581d052

Product-template.liquid: https://controlc.com/005e7ee9

 

Could you help me fix it?

Thanks in advance for your help

0 Likes
Klforres
New Member
6 0 0

Hi there! Would you happen to know how to code the Debut theme for the 2021 version? It appears things have changed since your last post. 

Thanks in advance for your assistance.

0 Likes
PierreUSA
New Member
2 0 3

Regarding the 2021 Debut Theme changes, the instructions are actually simpler than for the previous versions of Debut.

  1. In theme.js, search for initDesktopBreakpoint. Replace it with this updated code:

 

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

 

  • In product-template.liquid, simply do a search and delete for the 2 instances of "medium-up--hide".
  • In theme.css, add the following code at the bottom of the page to enable the styling already being applied for mobile:

 

/* Overrides to enable product thumbnail slider on desktop */

@media only screen {
  .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; }
  .product-single__thumbnail {
    margin: 0 auto; } }

.product-single__thumbnails {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  margin-left: -9px;
  margin-right: -9px; }
  @media only screen {
    .product-single__thumbnails {
      margin-top: 0;
      justify-content: center; }
      .slider-active .product-single__thumbnails {
        display: block;
        margin: 0 auto;
        max-width: 75%;
        overflow: hidden; } }

@media only screen {
  .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-item {
  flex: 0 0 25%;
  padding-left: 5px; }
  @media only screen {
    .product-single__thumbnails-item.slick-slide {
      padding-bottom: 10px;
      padding-left: 2.5px;
      padding-right: 2.5px;
      vertical-align: middle; }
      .thumbnails-slider--active .product-single__thumbnails-item.slick-slide {
        padding-top: 5px;
        padding-bottom: 5px; } }

@media only screen {
  .product-single__thumbnails-item-slide {
    display: block;
    float: left;
    height: 100%;
    min-height: 1px;
    padding: 5px 2.5px; } }
​

 

Lalann97
New Member
1 0 0

Thank you so much, i was losing hope ! It works for me ! 

0 Likes
PierreUSA
New Member
2 0 3
Glad to hear! Happy to help.
0 Likes
ShiningStar
New Member
2 0 0

I can't find it in my theme.js file. I Ctrl+F and also did it manually. Kindly help.

_initDesktopBreakpoint

 

0 Likes
asiddhanthi
Tourist
11 0 3

around line 7920.

 

Make sure that you have the newer debut theme which i believe was released in 2020. If yours is an older version not sure if this will work.

0 Likes
asiddhanthi
Tourist
11 0 3

Thanks! I was able to implement and looks like its working! Will test some more.

Do you know how to make the scroll infinite - meaning once you go through all the photos the arrow becomes greyed out - instead we let the customer scroll infinitely by looping them to the first picture.

Thanks again!

 

0 Likes
ShiningStar
New Member
2 0 0

My store is less than 2 weeks old. Could I have the old theme? I checked all the lines mentioned on his thread, can't find anything related. Everything is probably changed again.

0 Likes
fedepatrizi
Tourist
5 0 1

that works!!

0 Likes