Debut theme - Product thumbnails as slider

Solved
New Member
3 0 0

It's just allowing the image to pop up on a full screen but without an 'x' out option or a swipe left or right. 

Ideally I would like people viewing my website to be able to click on an image and scroll right or left to see the next or previous photos. (both on mobile and desktop)

0 Likes
Excursionist
16 0 2

I am sorry I am not a professional, I used a debut theme and the code most of what wanted and the bugs that appeared someone here helped me fix it. Maybe it also depends what theme you are using, have you googled how to solve that specific error for the x to appear? I think there is a line of code that needs to be tinkered with for it to work.  

I there is page where someone says how to correct the left and right arrows....I think the z-index of the left and right arrows line of code needs to be set high....

 

0 Likes
Excursionist
16 0 2

Have you followed these steps....

 

 

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:

 

img missing....available on first page of this thread

 

 

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:

img missing....available on first page of this thread

 

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!

0 Likes
New Member
9 0 0

Hi, I followed The steps but nothing has changed?

https://steviejayne.com/collections/clothing/products/brunch-members-only

stevie-jayne.myshopify.com

0 Likes
Tourist
6 0 2

en both cases in theme.js mods. 

INCORRECT:

$(self.selectors.productImageWraps).each(function() {

 

CORRECT:

$(self.selectors.imageZoomWrapper).each(function() {

 

 

New Member
1 0 0

I follow all the steps but it didn't work correctly. Any help please !!

 Capture22.PNG

0 Likes
Tourist
6 0 2

I've tryed your code but I didn't works.

Can you help us? 
The problem appears when I visit products with less than 3 pictures.

www.loup.com.mx

0 Likes
New Member
1 0 0

Hey, it didn't work for my site can you please help me out my site link is: https://pcgoods.co.uk/collections/frontpage/products/lightweight-adjustable-laptop-stand

0 Likes
New Member
9 0 0

Hi, 

I have text before the  _initBreakpoints()  text within this section, at which point do i remove the original text?

thanks 

tom 

 

0 Likes
Excursionist
16 0 2

Looks like yours is fine now

0 Likes