Debut theme - Product thumbnails as slider

Solved
Highlighted
Excursionist
39 1 5

@B_R-25 

Go to your codes

Go to product-template in Sections

Search for 

{{ product.description }}

and replace this portion of your codes 

<div class="product-single__description rte">
{{ product.description }}
</div>
</div>
</div>

with this:

<div class="product-single__description rte">
{{ product.description | split: '<!-- split -->' | first }}
</div>
</div>
</div>
<div class="product-single__description rte">
{{ product.description | split: '<!-- split -->' | last }}
</div>

Note that we inserted the second code after the third </div>. This will ensure that the first part of your product description always stays on the right side and the second part always starts under product images and takes the page width. (This is what I use in my website, and probably is what you'rre trying to do)

if you put

<div class="product-single__description rte">
{{ product.description | split: '<!-- split -->' | last }}
</div>

before the two </div>s, the product description will stay on the right side until it passes the product images and then continue under the images. (NOT ideal since it will change the position of your description depending on the viewers screen size that messes up how you want want your description to show. ALSO you need to indent all the information so it stays off the left margin when the screen gets smaller and be readable)

No matter which one you use, it doesn't mess up the small screen version of it, so whenever you brows your page on a phone it will show the product description under the images

Play around with both of them and see which one is better for your needs

Now go to your products, click on "Show HTML" which is "<>"  and put <!-- split --> where you want to split the description.

Here is an example from my website (note that when you resize the screen the positioning of the product description stays the same unless it is small enough to be a phone)

https://petlantis.ca/collections/dog-toys/products/kong-classic-dog-toy

NOTE: You always need to include <!-- split --> in your product description, otherwise it will duplicate everysingle information you have and puts it once on the right side and once after.

Even if you don't want to use this feature, add <!-- split --> at the end of the description to avoid this.

Let me know if you hit any problem

 

-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
1 Like
Highlighted
Excursionist
39 1 5

@Mandysz 

I can take a look at your codes if you upload them

Theme.js

product-template.liquid

theme.scss.liquid

-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
0 Likes
Highlighted
Shopify Partner
64 1 3

@Ardi94 Thank you so much I will try it ;) 

0 Likes
Highlighted
New Member
42 0 0

Hey guys. In generell it works, but there is only one picture what I can see. The others must be under it... What can I do?

 

screen comm.png

0 Likes
Highlighted
New Member
42 0 0

Hey. In generell it works. But I can see only one picture now. The others are maybe under it. 

 

screen comm.png

 

So there are no other pictures below it... Pls help

0 Likes
Highlighted
Excursionist
39 1 5

Hey everyone, there is a small issue with this code, I don't know if it happened after the update or not. The solution is here.

Basically, I noticed that if a product has only 2 pictures, the thumbnails get smaller every time you're screen changes size. Keep in mind that when you load a page it loads from small to big (not technically true but I just put it in easier words that relates to this issue.) So over time, on the user's screen, the thumbnails get smaller and smaller until they're gone.

@arvidmueller  this might be your problem too

you only need to change one line of this code to fix it.

instead of this at the end of the js portion

 

this._initThumbnailSlider()

put this:

 

 

if ($(self.selectors.productThumbImages).length > 3) {
this._initThumbnailSlider()
}

so the slider starts when you have more than 3 product images.

 

I have to say I just noticed this issue today and this was the first thing that popped into my head. Looks like it's working fine right now.

I'm not great at js so if you see a problem with my code let us know

hope this fixes @arvidmueller problem too.

if you still have this issue put a link to your js here so I can take a look at it

-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
0 Likes
Highlighted
Excursionist
39 1 5

Debut has been updated, use this code instead for your theme.js

Replace this with the next code

    _initBreakpoints: function() {
      var self = this;

      enquire.register(this.settings.mediaQuerySmall, {
        match: function() {
          // initialize thumbnail slider on mobile if more than four thumbnails
          if ($(self.selectors.productThumbImages).length > 4) {
            self._initThumbnailSlider();
          }

          // destroy image zooming if enabled
          if (self.settings.zoomEnabled) {
            $(self.selectors.imageZoomWrapper).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.imageZoomWrapper).each(function() {
              _enableZoom(this);
            });
          }
        }
      });
    },

with this code

_initBreakpoints: function() {
      var self = this;

      enquire.register(this.settings.mediaQuerySmall, {
        match: function() {
          // initialize thumbnail slider on mobile if more than four thumbnails
          /*
          if ($(self.selectors.productThumbImages).length > 4) {
            self._initThumbnailSlider();
          }
          */
          // destroy image zooming if enabled
          if (self.settings.zoomEnabled) {
            $(self.selectors.imageZoomWrapper).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.imageZoomWrapper).each(function() {
              _enableZoom(this);
            });
          }
        }
      });
          if ($(self.selectors.productThumbImages).length > 3) {
		      this._initThumbnailSlider()
          }
    },

Everything else works fine 

 

-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
1 Like
Highlighted
New Member
4 0 0

Would this instruction work on debut gallery images??? I am trying to have a side scroll on gallery images for  mobile view. Need some help please...

 

 


@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
4 0 0

Does anyone know how to add side scrolls to gallery pictures on Debut theme? I have been trying all day and no luck. Please HELP!!!

0 Likes
Highlighted
New Member
1 0 0

I've added all of the code including the updated portions, and the sliders are there! However I can no longer click on a thumbnail to view it?

0 Likes