Debut Theme Code for Thumbnail into Slider

Tourist
7 0 4

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. 

0 Likes

Hello ,

  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.

15-00-5n6dm-qjbwb.jpg

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:

15-54-q5i9s-jk2no.jpg

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

15-58-1b7ql-vozw5.jpg

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:
15-47-ni6r6-2p43d.jpg

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:

15-49-0pxmx-z8nht.jpg

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.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Tourist
7 0 4

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.

 

1 Like
Tourist
3 0 1

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.

0 Likes
Tourist
3 0 1

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

It have solved for me.

0 Likes
Tourist
7 0 4

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

1 Like
Tourist
3 0 1

 

Look my theme.js after changes:

Captura de Tela 2019-08-27 às 11.31.51.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

1 Like
Tourist
7 0 4

Hi LucasBarreto, see attached below.

 

 

Untitled.jpg

1 Like
Tourist
7 0 4

Hi LucasBarreto,

 

Kindly assist.

 

Many thanks


@LucasBarreto wrote:

 

Look my theme.js after changes:

Captura de Tela 2019-08-27 às 11.31.51.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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


 

1 Like
Highlighted
New Member
1 0 0

Thanks guys, this also worked for me! great!

0 Likes