d
Topic
Posts:
13
9 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:
207
8 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
8 months ago

Hi Ava, my support ticket is 8369056

thank you,

Lyle

Ava Shopify Employee flomp.myshopify.com
Posts:
207
8 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
8 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:
207
8 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
8 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 8 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
8 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
8 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
8 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
7 months ago

Hi Ava, my support ticket is  8675504

Thank you,

Priyanka

Ava Shopify Employee flomp.myshopify.com
Posts:
207
7 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
7 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:
207
6 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
5 months 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
4 months ago

Hi 

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

Ava Shopify Employee flomp.myshopify.com
Posts:
207
4 months 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

Posts:
3
Last edited 4 months ago

Hello Ava, 

I need the slider effect on my thumbnails as well please. 

ticket# 9885377

 

Thank you!

Ava Shopify Employee flomp.myshopify.com
Posts:
207
Last edited 3 months ago

Hi everyone!

After chatting with our theme support team about this topic, it may be best to post a guide here on how to turn your product image thumbnails into a slider. This guide will work on the current version of Debut (7.1.0) and may work on some other recent versions. This guide is just for the Debut theme, so if you are using a different Shopify created theme, it is best to contact our support lines to see if edits like this are possible, as they may not be supported by our theme support team. If you are using a theme created by a third-party developer, it is best to contact your developers directly, as they can help you out!

  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. 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:

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

       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:

       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:

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

Be sure to Save all changes!

I hope this can clear up some confusion on the topic. 

Best of luck!

Ava

Social Care Guru | support@shopify.com

Posts:
3
about 2 months ago

Hi Ava,

I followed the above tutorial, but something went wrong.  https://heidi-hat.myshopify.com/collections/clothing/products/cropped-leggings

Currently there are arrows, very stangely placed and when clicked nothing happens.

site: https://heidi-hat.myshopify.com/
password: flelta

 

Thank You

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

Hi, Maleka!

Ava here from Shopify.

That's definitely a strange one. Would you be able to send us an email to support@shopify.com using the email address listed as the account owners? You can let me know the support ticket number you were assigned (which will be emailed to you). After that, I can have our theme support team take a look and see if we can help out! Were there any parts of the tutorial you had any difficulty with? Just so I can narrow down the search with the team here.

Ava

Social Care Guru | support@shopify.com

roru Member
Posts:
1
about 2 months ago

Could you please help to make a slider for minimal theme or make a tutorial? ticket number 10546066

Thanks

Ava Shopify Employee flomp.myshopify.com
Posts:
207
about 1 month ago

Hi, Rou!

Ava here from Shopify.

So sorry for the delayed response here. I can see you spoke to Alex on ticket 10546066, I believe he made some suggestions for you there. Let me know if they worked out for you!

Ava

Social Care Guru | support@shopify.com

Posts:
3
Last edited about 1 month ago

Hello Ava. I followed your instructions and have the same problem as Maleka. 

10688488.

Ava Shopify Employee flomp.myshopify.com
Posts:
207
about 1 month ago

Hi, Juan!

Not to worry, I've found your email and replied to you there :)

Just to go over step 5 again,

it's important to comment out those two if statements. When you comment out a piece of code, you are telling your browser to ignore it. So the code will still be there if you were to inspect the page source code, but that piece of code will be ignored by your browser. .

So in step 5, it says to comment out these two if statements after you've added. If you select the line where the if statement begins, you can hit the enter key to create a new line. Here you can add the opening comment. Add the closing comment at the end of the statement.

It should look like this when you are done

Above is an example from my test store :)

Let me know how you get on!

Ava

Social Care Guru | support@shopify.com

Posts:
1
about 1 month ago

it s not working for me :(

Tech1 Member
Posts:
3
26 days ago

Hi Ava,

I tried this but nothing changed. Please assist, thank you.

TNZ Member
Posts:
1
23 days ago

Hi Ava,

I've tried to follow your instructions but it didn't run as expected. Can you please help me ?

Ticket number : 10802564

Thank you.

Regards,

Posts:
1
13 days ago

Hi Ava,

Could you please help to make a slider for minimal theme or make a tutorial? ticket number 10904348

Thanks

Jordi

Tech1 Member
Posts:
3
Last edited 9 days ago

Hi Ava,

Following up with you based on my previous comment, is there a fix that you can provide? It seems that the existing fix is not working and a lot of us would benefit from this.

Thank you for your support!