Debut Theme Code for Thumbnail into Slider

[Hudds]

While there are many thumbnail for a product, it was very frustrating to keep scrolling up and down to view the zoom images.
Any solution to change the thumbnail into image slider so customer can just click the image and view it in separated image slider? Please advise. 

[oscprofessional]

Hello Hudds,

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. If you are using a Mac, use the cmd + F button to search for this:  _setActiveThumbnail();

4. On a new line directly below this add this:  _initThumbnailSlider();

5. A few lines before this, look for the _initBreakpoints: function() function. Inside this, comment out the first if statement. Then a bit further down inside the unmatch: function() , comment out the if statement there too.

It should look like this once you are done:

6. Next, go to the Sections area and open the product-template.liquid file

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

8. Remove the medium-up--hide class from both of these buttons:

9. 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:

10. 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;
  }
}

Save all Change and check.

[Hudds]

It doesnt work on the image slider (there are 2 arrows shown after the code setting done in product page). When i click the image, the server direct me to another page, i couldnt choose to slide the image cause it was the only image in that page.

The most serious was when i being direct to that page, i have to click backward to go back to my store page. Else, customer may just click close and never return to the store. Please advice.

[LucasBarreto]

Hi, 

After following these instructions, I have a problem like Hudds.

All images are opened on another page if they are clicked. The arrows don't work and all thumbnails are shown.

[LucasBarreto]

I have solved, you just need to comment the entire function "unmatch".

It have solved for me.

[Hudds]

Hi LucasBarreto, can assist to show some picture for the "unmatch" command that you mentioned, i had tried another time but the problem still exist. thanks

[LucasBarreto]

Look my theme.js after changes:

If have problems can you send  a printscreen theme.js to me and I will help :)

[Hudds]

Hi LucasBarreto, see attached below.

[Hudds]

Hi LucasBarreto,

Kindly assist.

Many thanks

---

@LucasBarreto wrote:

Look my theme.js after changes:

If have problems can you send  a printscreen theme.js to me and I will help :)

---

[lourensjorna]

Thanks guys, this also worked for me! great!