Instructions to enable thumbnail slider for all screens [Debut]

[Ardi94]

These are instructions to enable thumbnail slider for all screen sizes using Debut. I have updated Tejas_Nadpara 's codes from this post and put them here

All credit goes to Tejas Nadpara

Have fun coding everyone

[Ardi94 · Accepted solution]

Follow these steps to enable thumbnail slider for Debut theme:

1. Go to Online Store > Themes > Actions > Edit code

2. Open Assets > theme.js

3. Around line 6368 find

    _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);
            });
          }
        }
      });
    },

4. Replace with

	_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()
          }
    },

5. Save and close theme.js

6. Now go to Sections > product-template.liquid

7. Around lines 74 find

<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">

8. Replace with

<button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">

9. Around line 81 find

<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">

10. Replace with

<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js no-clear">

11. Around line 113 find

<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">

12. Replace with

<button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">

13. Save and close product-template.liquid

14. Go to Assets > theme.scss.liquid and add the following CSS to the bottom of the file:

/*================ Product Image Slider ================*/

@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;
  }
}

15. Save and close theme.scss.liquid

Good luck everyone

[foliotravel]

hi @Ardi94 thanks so much for the update. Do you know how to get the slider to work on gift card product pages? Here is the link to my product, and here's the link to my gift card product. You can see how the images don't display at all on the gift card product, but miraculously reappears when you access on mobile or resize the computer window. I think it has to do with the product type but not sure how to code that properly.

[Ardi94]

@foliotravel 

The links that you've sent me, show slightly different codes.

My first guess is that you are using two different templates in your store, one for products one for gift cards. double-check if your gift card product template is correct, maybe that fixes it.

If you are using the different templates intentionally, make sure you've made the customizations to the second one too. (you can use an online text compare website to find the differences easily)

If the issue still exists, let me know to look deeper into your codes.

[foliotravel]

@Ardi94 

Yes, I am using a different product template! Great catch. I updated my other product template and now it's working great. Thanks again!

[Robbe]

Thanks so much, it works perfectly.

Can I ask you if You know how to add arrows in the main picture too?

thank you,

Rob

[Ardi94]

@Robbe 

I never tried something like this. How comfortable are you with javascript? and do you want to replace the arrows or have a new set of arrows (so 2 for thumbnails 2 for featured image)?

[Robbe]

I only know html and css 🙂 I thought it was a similar code, it doesn't matter

Anyway if you find a solution it will be ok with 4 arrows 🙂

thanks again for your code

[stemony]

Thanks for this great tutorial. I followed all the steps, but it still doesn't do anything at all.

I just get the same view as before. Do I have to do anything more after editing the codes ? 

Thanks

[Ardi94]

hmm   It should work, let me take a look at your website, can you give me the url?

[GusAlcalde]

@Ardi94 

Please Help! I have followed all the instructions word for word and I have no idea what my mistake is the prod images are still in thumbnail format!!  

URL: https://advcure.com/products/zenpro

What could be the issue?

[Ardi94]

@GusAlcalde 

Hey, are you still facing issues? the URL seems to be working, or I might have missed the problem

Also, just a suggestion, using <!-- split --> in your product description to make part of it use the width of the page

[GusAlcalde]

@Ardi94 

How and where do i add the split code?

---

[Ardi94]

@GusAlcalde 

In the product page click on html view and add <!-- split --> where you want the description to move down and to the left side.
then go to your codes, in sections > product-template.liquid and find

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

replace it with

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

now after two of those three </div> put

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

Now time to decide where how you want the description to show if there is no <!-- split -->.

Insert the code below in the first if statement if you want it to stick to the right half of the page (like default)

Insert it in the second if statement if you want it to use the whole page

either way, it goes right before {% endif %}

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

I personally use it in the second one as it is more practical

[GusAlcalde]

@Ardi94  I'm confused what you mean by "now after two of those three </div> put" is that code supposed to go under or within the replacement code?  This is what i have right now in my code

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

---

---

---

@Ardi94 wrote:

@GusAlcalde 

In the product page click on html view and add <!-- split --> where you want the description to move down and to the left side.
then go to your codes, in sections > product-template.liquid and find

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

replace it with

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

now after two of those three </div> put

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

Now time to decide where how you want the description to show if there is no <!-- split -->.

Insert the code below in the first if statement if you want it to stick to the right half of the page (like default)

Insert it in the second if statement if you want it to use the whole page

either way, it goes right before {% endif %}

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

I personally use it in the second one as it is more practical

---

[Ardi94]

@GusAlcalde 

Here is my own store for example, I have underlined the 3 </div>s I was talking about:

find this code

        <p class="visually-hidden" data-loader-status
          aria-live="assertive"
          role="alert"
          aria-hidden="true"
        >{{ 'products.product.loader_label' | t }}</p>

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

and replace with this:

        <p class="visually-hidden" data-loader-status
          aria-live="assertive"
          role="alert"
          aria-hidden="true"
        >{{ 'products.product.loader_label' | t }}</p>

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

[MarinaCai]

@Ardi94 

Think you for your tutorial, but I have a problem after I followed every step.  I get the issue that when I click on a thumbnail product picture in my store, it becomes full screen. It does not come up as the picture in the main picture frame but just takes over the entire screen. Do you know what might be the issue here? Thanks in advance. 

[Ardi94]

@MarinaCai 

Hi, do you have an app to make your image full screen when you click on it or just altered the codes? (as far as I know, this isn't a default feature in Debut).

It'll be a lot easier if I can take a look at your codes, can you provide a URL here?

[MarinaCai]

@Ardi94 

hello, our store still invisible. I take a look at the code again. The code of theme.js and theme.scss.liquid are the same as you showed. I think the problem might be in product-template.liquid. I added the previous/next buttons on my product page.

 

so can you take a look at my code to see if there is a problem? Thanks!

 {% if product.media.size > 1 %}
        {% if product.media.size > 4 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
              {% include 'icon-chevron-left' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
            </button>
          {% endif %}
          <ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for media in product.media %}
              <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
                <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ section.id }}-{{ media.id }}"
                   {% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

                    {%- capture thumbnailAlt -%}
                      {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                        {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- elsif media.media_type == 'model' -%}
                        {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- else -%}
                        {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- endif -%}
                    {%- endcapture -%}

                    <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
                    {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                      <div class="product-single__thumbnail-badge">
                        {% include 'icon-video-badge-full-color' %}
                      </div>
                    {%- endif -%}
                    {%- if media.media_type == 'model' -%}
                      <div class="product-single__thumbnail-badge">
                        {% include 'icon-3d-badge-full-color' %}
                      </div>
                    {%- endif -%}
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
              {% include 'icon-chevron-right' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
            </button>
          {% endif %}
        </div>
      {% endif %}
    </div>

    <div class="grid__item {{ product_description_width }}">
      <div class="product-single__meta">

        <h1 class="product-single__title">{{ product.title }}</h1>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}

<span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}" style="display: block;"></span>

          <div class="product__price">
            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
          </div>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte" data-product-policies>
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}
            {%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels {% endunless %}
            {%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
            {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
          {%- endcapture %}

          {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              <div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">
                    <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
              </div>
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option value="{{ variant.id }}"
                  {%- if variant == current_variant %} selected="selected" {%- endif -%}
                >
                  {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                </option>
              {% endfor %}
            </select>

            {% if section.settings.show_quantity_selector %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="product-form__input product-form__input--quantity" data-quantity-input
                  >
                </div>
              </div>
            {% endif %}

            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
              data-error-message-wrapper
              role="alert"
            >
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>

            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
              >
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                  </span>
                  <span class="hide" data-loader>
                    {% include 'icon-spinner' %}
                  </span>
                </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            </div>
          {% endform %}
        </div>

        {%- comment -%}
          Live region for announcing updated price and availability to screen readers
        {%- endcomment -%}
        <p class="visually-hidden" data-product-status
          aria-live="polite"
          role="status"
        ></p>

        {%- comment -%}
          Live region for announcing that the product form has been submitted and the
          product is in the process being added to the cart
        {%- endcomment -%}
        <p class="visually-hidden" data-loader-status
          aria-live="assertive"
          role="alert"
          aria-hidden="true"
        >{{ 'products.product.loader_label' | t }}</p>

        <div class="product-single__description rte">
          <div data-station-tabs-app>{{ product.description }}</div>
        </div>

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
        {% endif %}
    </div>
  
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
</div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  <script type="application/json" id="ModelJson-{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
{% endunless %}

[Ardi94]

@MarinaCai 

you forgot to add "no-clear" to the end of this line

<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">

So it'll become this

 <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js no-clear">

Let me know if this doesn't fix it so I take a closer look at your code:)