title: how to add thumbnail into default slider in shopify debut theme?
body: <p>I am setting up thumbnail into my default slider in shopify debut theme slideshow.liquid section, the default slider is having dots, i want to convert it into`thumbnail images, please help.</p>
  
  <p>I am setting up thumbnail into my default slider in shopify debut theme slideshow.liquid section, the default slider is having dots, i want to convert it into`thumbnail images, please help.</p>
  
  <pre><code>  {%- if section.settings.slideshow_height == 'adapt' -%}
    {% comment %}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
     whitespace when 'slideshow_height' is set to 'adapt'.
      The aspect ratio values for the first image in the slideshow will be 
     used
    unless it is blank, in that case a ratio of 2:1 will be used.
   {% endcomment %}
  
   {%- assign first_block = section.blocks[0] -%}
   {%- if first_block.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
    {%- else -%}
         {%- assign min_aspect_ratio = 
       first_block.settings.image.aspect_ratio -%}
   {%- endif -%}
   {% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
   {%- endif -%}
  
    {%- assign text_alignments = section.settings.text_alignment | split: ' '    -%}
    {%- assign text_horizontal_alignment = text_alignments.first -%}
    {%- assign text_vertical_alignment = text_alignments.last | strip -%}
  
   &lt;div data-section-id="{{ section.id }}" data-section-type="slideshow- 
   section"&gt;
  {%- if section.blocks.size &gt; 0 -%}
  &lt;div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" 
  role="region" aria-label="slideshow" aria-describedby="slideshow-info" 
    tabindex="-1"&gt;
    &lt;div class="slideshow slideshow--{{ section.settings.slideshow_height 
    }}{% if display_controls %} slideshow--display-controls{% endif %}"
         id="Slideshow-{{ section.id }}"
         data-autorotate="{{ section.settings.autorotate }}"
         data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
         data-adapt-height="{% if section.settings.slideshow_height == 
        'adapt' %}true{% else %}false{% endif %}"
         data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: 
        slide_number: '[slide_number]' }}"
         {% if section.settings.slideshow_height == 'adapt' %}data-min- 
         aspect-ratio="{{ min_aspect_ratio }}"
         style="height: {{- wrapper_height -}}vw"{% endif %}&gt;
  
      {%- for block in section.blocks -%}
        &lt;div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ 
         block.shopify_attributes }}&gt;
          {% if block.settings.image == blank %}
            &lt;div class="slideshow__image js"&gt;
              &lt;div class="placeholder-background"&gt;
                {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                {{ 'lifestyle-' | append: current | placeholder_svg_tag: 
               'placeholder-svg' }}
              &lt;/div&gt;
              {% if section.settings.show_overlay %}&lt;div 
           class="slideshow__overlay"&gt;&lt;/div&gt;{% endif %}
            &lt;/div&gt;
          {% else %}
            &lt;div class="slideshow__image box ratio-container lazyload{% 
          unless forloop.first %} lazypreload{% endunless %} js"
                 data-bgset="{% include 'bgset', image: 
          block.settings.image %}"
                 data-sizes="auto"
                 data-parent-fit="contain"
                 style="background-position: {{ block.settings.alignment 
      }};
                        background-image: url('{{ block.settings.image | 
                  img_url: '300x300' }}');"&gt;
              {% if section.settings.show_overlay %}&lt;div 
              class="slideshow__overlay"&gt;&lt;/div&gt;{% endif %}
            &lt;/div&gt;
          {% endif %}
  
          &lt;noscript&gt;
            &lt;div class="slideshow__image"{% if block.settings.image %} 
            style="background-image: url('{{ block.settings.image | 
               img_url: '2048x' }}'); background-position: {{ 
              block.settings.alignment }};"{% endif %}&gt;
              {% if block.settings.image == blank %}
                &lt;div class="placeholder-background"&gt;
                  {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' 
               }}
                &lt;/div&gt;
              {% endif %}
            &lt;/div&gt;
          &lt;/noscript&gt;
  
          &lt;div class="slideshow__text-wrap slideshow__text-wrap--desktop"&gt;
            &lt;div class="slideshow__text-content slideshow__text-content-- 
              vertical-{{ text_vertical_alignment }} text-{{ 
               text_horizontal_alignment }}"&gt;
              &lt;div class="page-width"&gt;
                {% unless block.settings.slide_title == blank and 
                    block.settings.subheading == blank %}
                  &lt;ul class="slideshow__text-content-list"&gt;
                    {%- unless block.settings.slide_title == blank -%}
                      &lt;li&gt;
                        &lt;h2 class="h1 mega-title slideshow__title{% if 
                                section.settings.text_size == 'large' %} 
                        mega-title--large{% endif %}"&gt;
                          {{ block.settings.slide_title | escape }}
                        &lt;/h2&gt;
                      &lt;/li&gt;
                    {%- endunless -%}
                    {%- unless block.settings.subheading == blank -%}
                      &lt;li&gt;
                        &lt;span class="mega-subtitle slideshow__subtitle{% if 
                              section.settings.text_size == 'large' %} 
                             mega-subtitle--large{% endif %}"&gt;
                          {{ block.settings.subheading | escape }}
                        &lt;/span&gt;
                      &lt;/li&gt;
                    {%- endunless -%}
                  &lt;/ul&gt;
                {% endunless %}
  
                {%- assign show_link_button = false -%}
                {%- if block.settings.button_label != blank and 
                       block.settings.button_link != blank -%}
                  {%- assign show_link_button = true -%}
                {%- endif -%}
                {%- if show_link_button -%}
                  &lt;div class="slideshow__btn-wrapper{% if 
                  block.settings.slide_title != blank or 
                  block.settings.subheading != blank %} slideshow__btn- 
                  wrapper--push{% endif %}"&gt;
                    &lt;a href="{{ block.settings.button_link }}" class="btn 
                   slideshow__btn"&gt;
                      {{ block.settings.button_label | escape }}
                    &lt;/a&gt;
                  &lt;/div&gt;
                {%- endif -%}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
           &lt;/div&gt;
          {%- endfor -%}
       &lt;/div&gt;
  
    &lt;div class="slideshow__controls"&gt;
      {%- if section.blocks.size &gt; 1 -%}
        {%- assign arrows_width = section.blocks.size | times: 18 | plus: 
        115 -%}
  
        &lt;div class="slideshow__arrows"
             style="width: {{- arrows_width -}}px"&gt;
          &lt;button class="slideshow__arrow slideshow__arrow-left" aria- 
        label="{{ 'sections.slideshow.previous_slide' | t }}"&gt;{% include 
           'icon-chevron-left' %}&lt;/button&gt;
          &lt;button class="slideshow__arrow slideshow__arrow-right" aria- 
             label="{{ 'sections.slideshow.next_slide' | t }}"&gt;{% include 
               'icon-chevron-right' %}&lt;/button&gt;
        &lt;/div&gt;
        {%- if section.settings.autorotate -%}
          &lt;button type="button" class="slideshow__pause" data-id="{{ 
                section.id }}" aria-live="polite" aria-pressed="false"&gt;
            &lt;span class="slideshow__pause-stop"&gt;
              {% include 'icon-pause' %}
              &lt;span class="icon__fallback-text"&gt;{{ 
                  'sections.slideshow.pause_slideshow' | t }}&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class="slideshow__pause-rotate"&gt;
              {% include 'icon-play' %}
              &lt;span class="icon__fallback-text"&gt;{{ 
                'sections.slideshow.rotate_slideshow' | t }}&lt;/span&gt;
            &lt;/span&gt;
          &lt;/button&gt;
        {%- endif -%}
      {%- endif -%}
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="slideshow__text-wrap slideshow__text-wrap--mobile"&gt;
    {% if section.blocks.size &gt; 1 %}
      &lt;div class="slideshow__arrows slideshow__arrows--mobile"&gt;
        &lt;button class="slideshow__arrow slideshow__arrow-left" aria-label=" 
        {{ 'sections.slideshow.previous_slide' | t }}"&gt;{% include 'icon- 
          chevron-left' %}&lt;/button&gt;
        &lt;button class="slideshow__arrow slideshow__arrow-right" aria- 
           label="{{ 'sections.slideshow.next_slide' | t }}"&gt;{% include 
          'icon-chevron-right' %}&lt;/button&gt;
      &lt;/div&gt;
    {% endif %}
    {%- for block in section.blocks -%}
      {%- assign show_text = false -%}
      {%- unless block.settings.slide_title == blank and 
        block.settings.subheading == blank -%}
        {%- assign show_text = true -%}
      {%- endunless -%}
      {%- assign show_link_button = false -%}
      {%- if block.settings.button_label != blank and 
          block.settings.button_link != blank -%}
        {%- assign show_link_button = true -%}
      {%- endif -%}
      {%- if show_text or show_link_button -%}
        &lt;div class="slideshow__text-content slideshow__text-content--mobile 
         slideshow__text-content--mobile-{{ forloop.index0 }} text-center"&gt;
          &lt;div class="page-width"&gt;
            {%- unless block.settings.slide_title == blank -%}
              &lt;h2 class="h1 mega-title slideshow__title slideshow__title-- 
               mobile{% if section.settings.text_size == 'large' %} mega- 
             title-- 
            large{% endif %}"&gt;
                {{ block.settings.slide_title | escape }}
              &lt;/h2&gt;
            {%- endunless -%}
            {%- unless block.settings.subheading == blank -%}
              &lt;span class="mega-subtitle slideshow__subtitle 
            slideshow__subtitle--mobile{% if section.settings.text_size == 
            'large' %} mega-subtitle--large{% endif %}"&gt;
                {{ block.settings.subheading | escape }}
              &lt;/span&gt;
            {%- endunless -%}
  
            {%- if show_link_button -%}
              &lt;a href="{{ block.settings.button_link }}" class="btn 
               slideshow__btn slideshow__btn--mobile"&gt;
                {{ block.settings.button_label | escape }}
              &lt;/a&gt;
             {%- endif -%}
               &lt;/div&gt;
             &lt;/div&gt;
              {%- endif -%}
           {%- endfor -%}
          &lt;/div&gt;
         {%- endif -%}
  
       {% if section.blocks.size == 0 %}
       &lt;div class="placeholder-noblocks"&gt;
      {{ 'homepage.onboarding.no_content' | t }}
         &lt;/div&gt;
       {% endif %}
     &lt;/div&gt;
  </code></pre>