d
Topic
Posts:
13
4 months ago

Turn thumbnails into a slider Debut Theme

I have products with many varients sometimes.  I'm using the debut theme and I have a lot of thumbnails currently.  Anyone have the code or can tell me how to edit it to show my thumbnails in a slider instead of showing all images at once?

 

i
Replies
Ava Shopify Employee flomp.myshopify.com
Posts:
122
4 months ago

Hi, Lyle!

My name is Ava, I’m one of Shopify’s Gurus and I’m here to help :)

This is something our Theme Support feel they can do for you!

Would you be able to send us an email to support@shopify.com using the email address listed as the account owners? Once you have done that, you can pop back here and let me know the support ticket number you were assigned (which will be emailed to you). That way, I can pick the ticket out of the queue and have our Theme Support take a look at your store for you!

Speak soon :)

Ava

Social Care Guru | support@shopify.com

Posts:
13
4 months ago

Hi Ava, my support ticket is 8369056

thank you,

Lyle

Ava Shopify Employee flomp.myshopify.com
Posts:
122
4 months ago

Hey, Lyle!

Ava here again :)

Thanks so much for submitting the support ticket! Tressa and Lucas were able to help you out with this  πŸ™Œ

Do let me know if the changes were ok for you, the team here are happy to keep chatting with you.

Let me know if you have any more questions, happy to help!

Ava

Social Care Guru | support@shopify.com

Posts:
13
4 months ago

Yes, they helped me out and it's exactly how I wanted it.  Thank you for your help.

My thumbnail sliders looks awesome!

Ava Shopify Employee flomp.myshopify.com
Posts:
122
4 months ago

Oh, fantastic!

I'll let the guys know their hard work is appreciated.

We are here 24/7, don’t hesitate to contact us if you need any help in the future! :)

Ava

Social Care Guru | support@shopify.com

Posts:
6
4 months ago
g
1
upvotes

Please share the steps. I am seeking to do the same for my site, I s e thumbnails scroll feature on mobile, however on desktop and tablets, it is just a grid and makes the product page look non user friendly. Please help.

 

munish

Posts:
2
Last edited 4 months ago

Hello, I am also having the same issue. Would you be able to post the code changes needed to have the thumbnail slider work? I have many variants and all of the thumbnails are currently visable with no slider. I tried removing the following commented code from the product-template.liquid file but no luck.  

<!--{% if product.images.size > 1 %} Remove this -->
       <!-- {% if product.images.size > 3 %}  Remove this -->
          {%- assign enable_thumbnail_slides = true -%}
        <!--{% endif %} Remove this -->

        <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 medium-up--hide 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="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ image.id }}"
                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                     <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide 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 %} Remove this -->
    </div>

 

 

Posts:
13
4 months ago

I did get it resolved... but have no idea what the code is to do it... because I use the debut theme, a shopify expert did it...   if you know where the code is you need, lmk, i'll paste it... 

Posts:
2
4 months ago

Glad they got it working for you! The changes might have been made in the product-template.liquid file and the product.liquid tamplate. If you could paste the code from both of those that would be helpful.

Secitons > product-template.liquid

Templates > product.liquid

Thanks!

Posts:
13
4 months ago

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>
 

 

<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign product_image_scale = '2' -%}
  {%- assign enable_zoom = section.settings.enable_zoom -%}

  {% case section.settings.image_size %}
    {% when 'small' %}
      {%- assign product_image_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_image_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
      {%- assign height = 530 -%}
    {% when 'large' %}
      {%- assign product_image_width = 'medium-up--two-thirds' -%}
      {%- assign product_description_width = 'medium-up--one-third' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
      {%- assign height = 720 -%}
    {% when 'full' %}
      {%- assign product_image_width = '' -%}
      {%- assign product_description_width = '' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
      {%- assign height = 1090 -%}
      {%- assign enable_zoom = false -%}
  {% endcase %}

  <div class="grid product-single">
    <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
      {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
      {% for image in product.images %}
        {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
        {% capture img_class %}product-featured-img{% endcapture %}
        {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
        {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
        {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}

        <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
          <div id="{{ zoom_img_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}" data-image-id="{{ image.id }}"{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
            <img id="{{ img_id }}"
                 class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                 src="{{ image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image.alt | escape }}">
          </div>
        </div>
      {% endfor %}

      <noscript>
        {% capture product_image_size %}{{ height }}x{% endcapture %}
        <img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">
      </noscript>

      {% if product.images.size > 1 %}
        {% if product.images.size > 3 %}
          {%- 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="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js no-clear">
                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ image.id }}"
                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                     <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ image.alt | escape }}">
                </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 itemprop="name" class="product-single__title">{{ product.title }}</h1>

        {% if section.settings.show_vendor %}
          <p itemprop="brand" class="product-single__vendor">{{ product.vendor }}</p>
        {% endif %}
        <style>.product-price__sale-label{display:none;}</style>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}">

          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

          <p class="product-single__price product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
            {% if current_variant.compare_at_price > current_variant.price %}
              Retail Price  <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                 <s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
                </br> Our Price <span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
                  <span id="ProductPrice-{{ section.id }}"
                    itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                     {{ current_variant.price | money }}
                  </span>  
                   <span class="product-price__sale-label product-price__sale-label-{{ section.id }}">{{ 'products.product.on_sale' | t }}</span>
                </span> 
            {% else %}
              Retail Price <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
               <s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
                 <span class="product-price__price product-price__price-{{ section.id }}">
                 <span id="ProductPrice-{{ section.id }}"
                  itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                   {{ current_variant.price | money }}</br>
                </span>
                <span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide">{{ 'products.product.on_sale' | t }}</br></span>
              </span>
            {% endif %}
          </p>

          <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
            {% unless product.has_only_default_variant %}
              {% 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 %}
            {% endunless %}

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

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

            <div class="product-form__item product-form__item--submit">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
              </button>
            </div>
          </form>

        </div>
</br>
</br>
This item usually ships in 1-3 business days</br>
*some items ship direct from manufacturer
</br>
</br>
No Sales Tax charged for all orders shipped outside of New York
</br>
</br>
Free shipping on all orders over $99.00
</br>
</br>

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>
  </div>
 <div class="product-single__description rte" itemprop="description">
          {{ product.description }}
        </div>

</div>

{% if collection %}
  <div class="text-center return-link-wrapper">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          },
          {
            "value": "full",
            "label": "Full-width"
          }
        ],
        "default": "medium"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_selector",
        "label": "Show quantity selector",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_variant_labels",
        "label": "Show variant labels",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_zoom",
        "label": "Enable image zoom",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      }
    ]
  }
{% endschema %}
{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue,
    productOptions = [];
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
         
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
             
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
       productOptions.push(variant);
    {% endfor %}
</script> 
{% endif %}

<div id= "hiddenProductId" style="display:none;" data-product-id="{{product.id}}"></div>

<style>
.product-form .theme-color-style-3 li {
    width: 60px;
    height: 60px;
}.product-form {
    align-items: flex-start !important;
}#AddToCart-product-template {
    margin-top: 28px;
}

</style>

 

 

 

that's both of them.... let me know how it works out of you...  there's some customizing on my code so might have to tweek it 

 

 

Priyanka Member
Posts:
1
3 months ago

Hi Ava, my support ticket is  8675504

Thank you,

Priyanka

Ava Shopify Employee flomp.myshopify.com
Posts:
122
3 months ago

Hi, Priyanka!

Thanks so much for the ticket number. I can see you are chatting with one of our Gurus, Scott, at the moment. He will be able to have a chat with our Theme Support team as soon as we verify you as the account owner. I'm sure we can help you out here!

Let me know if you have any more questions, happy to help :)

Ava

Social Care Guru | support@shopify.com

Posts:
1
3 months ago

Hi Ava 

I requested this exact customisation to Debut theme today and was told that “it's a theme customisation that they do not support, primarily for layout reasons.” As it has already been done for others is it possible for you to get it done for my site too?

Thanks

Alec

Ava Shopify Employee flomp.myshopify.com
Posts:
122
2 months ago

Hi, Alec!

So sorry for the delay in replying to you here!

Given that our Theme Support team were able to help out in similar scenarios, I'd love to look into this for you more deeply to see if we can help here too. 

Could you give me the ticket number from when you requested this customization? Or if you no longer have that, we can just create a new ticket!

Would you be able to send us an email to support@shopify.com using the email address listed as the account owners? 
Once you have done that, you can pop back here and let me know the support ticket number you were assigned. This will let me dive into this for you.

Let me know if that works for you!

Ava

Social Care Guru | support@shopify.com

Posts:
2
28 days ago

Hi Ava

I am need of a similar thumbnail slider. I opened up a support ticket 9466562

My theme is Envy-Stockholm. Would really appreciate if I could get help with the thumbnail slider. 

Best
Sandeep
 

Thumbnail inline thumb
Posts:
2
7 days ago

Hi 

I havent heard back, any luck with the product thumbnail slider code?

Ava Shopify Employee flomp.myshopify.com
Posts:
122
3 days ago

Hi, Sandeep!

So sorry I missed your post here!

I can see that ticket 9466562 was answered by Andrew, one of the gurus here at Shopify.

As the theme you are using has been designed by a third party developer, it is best to reach out to them directly for help with editing your theme. Our own theme support team would not be able to help out here I'm afraid. We can only help out with edits to themes created by Shopify, with 3rd party themes it is always best to contact the theme creators for edits!

If your theme is Envy, you can contact your developers here. They will have more information for you!

Let me know if you have any more questions, happy to help!

Ava

Social Care Guru | support@shopify.com