Debut theme - Product thumbnails as slider

Solved
Highlighted
New Member
2 0 0

Hi, I'm trying to do the same, but in the VENTURE theme, the function _initBreakpoints() doesn't appear anywhere inside the theme.js file. Could you give me some advice, please? 

0 Likes
Highlighted
Tourist
9 0 4

Hi Man,

So my question let me explain like a child since i'm not an IT guy, my problem is when i'm on my phone  and i put my finger on the product Picture i swipe right or left nothing happen.

the picture is the same!! to change the picture you need to select manually from the little pictures under the main one!! does this make sense to you?

I am maybe wrong but i think theses codes you presented as solution are for another topic?????

jhgjfhdfhn.jpg


@Tejas_Nadpara wrote:

@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

 

 

 

 

 


 

0 Likes
Highlighted
New Member
3 0 0

Hey,

Simple Follow the above steps, it work properly.... If you have any problem then send me PM aliecommerce.online@gmail.com

0 Likes
Highlighted
New Member
3 0 0

 only for debute theme, If you want thumbnail slider on venture theme then you have to use custom slider function

0 Likes
Highlighted
New Member
3 0 0

hello,

How can stop  onclick scroll active thumbnail functionality

0 Likes
Highlighted
Excursionist
19 0 3

Hey, 

 

I followed the instructions and it works perfectly but it takes some time to load atleast on my site and all the pictures appear before the slider comes in... Is there any way to fix it?

Daamnshop.tk (pw: Fabio)

0 Likes
Highlighted
Tourist
8 1 5

Hey @kunecting , I'm also trying to display the slider as one row. Can you please tell me did you achieve this?
Thanks!

0 Likes
Highlighted
Tourist
8 1 5

Hey @Ardi94  
I want give you a HUGE thank you for all the effort you are putting into your instructions. It's super helpful for noobies like myself.
I have followed the latest instructions you have posted and everything is fine except one issue-

The slider arrows are missing (aren't visible at all- as in the photo) and I'm not really sure how to resolve it. 

Capture.PNG

 

Additionally, I'd love to reduce the thumbnail size so that by default there are four visible thumbnails at a time. How can that be done? 

Many Many Thanks!!

0 Likes
Highlighted
Excursionist
46 1 8

@Nadallswan 

Hi,

To show four thumbnails (or any number you want) go to Assets > theme.js search for

    _initThumbnailSlider: function() {
      var options = {
        slidesToShow: 3,
        slidesToScroll: 2,
        infinite: false,
        prevArrow: '.thumbnails-slider__prev--' + this.settings.sectionId,
        nextArrow: '.thumbnails-slider__next--' + this.settings.sectionId
      };

 and change the number for slidesToShow from 3 to 4.

 

Now for the missing arrows, check to see if you have them on smaller screens. If yes then go to Sections > product-template.liquid check to see if there's this class in <button> (there shouldn't be any medium-up--hide left unless you've made other customizations)

medium-up--hide

 if you find them, delete them.

At the end don't forget to add the class no-clear at the end of the <li>

if you still cant see arrows, send me your URL to take a look at it

Let me know if this fixes the issue. Also thank you for your appreciation

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
2 Likes
Highlighted
Tourist
8 1 5

AMAZING! Thank you so much!!

Everthing works perfectly now. 

 

1 Like