Thumbnails on the product page, Sahara theme

[LadyArins]

Hello
I am a beginner and working on the Sahara theme. I need to add thumbnails below the gallery if there is more than one image.They should be scrollable on mobile and replace the main image when clicked.

https://sgpngaecqcwkic5m-45221478564.shopifypreview.com

Here is the current code of the gallery:

{% comment %}
Renders a slider slide or a modal trigger

Accepts:
- media: {Object} Liquid media object
- output_type: {String} Output type. Accepts slider-slide or modal-trigger
- media_index: {Number} Loop index for translatables
- modal_id: {String} Modal id

Usage:
{% render 'product-media', media: product.media, output_type: 'slider-slide' %}
{% render 'product-media', media: product.media, output_type: 'modal-trigger' %}
{% endcomment %}

{%-
  liquid
  assign media_is_active = false
  assign current_variant_media = product.selected_or_first_available_variant.featured_media.id
  if media.id == current_variant_media
    assign media_is_active = true
  elsif current_variant_media == blank and media_index == 0
    assign media_is_active = true
  endif
-%}
  {%- if output_type == 'slider-slide' -%}
  <div
    class="swiper-slide"
    data-media-id="{{- media.id -}}"
    data-media-type="{{- media.media_type -}}"
    data-index="{{- media_index -}}"
    {%- if media_is_active -%}
      data-selected
    {%- endif -%}
  >

    {% liquid
      assign padding_bottom_minus_part = 100 | divided_by: media.preview_image.aspect_ratio
      assign padding_bottom = 0

      assign media_ratio_class = blank
      if media.preview_image.aspect_ratio < 1
        assign media_ratio_class = 'media--portrait'
        assign padding_bottom = padding_bottom_minus_part | minus: 100 | round
        elsif media.preview_image.aspect_ratio > 1
        assign media_ratio_class = 'media--landscape'
        assign padding_bottom = 100 | minus: padding_bottom_minus_part | round
      endif

      # assign preserve_aspect_ratio = true
    %}

    <div class="media {% unless preserve_aspect_ratio %} media--portrait {% else %}" style="padding-bottom: {% render 'aspect-ratio', aspect_ratio: media.preview_image.aspect_ratio %}%;{% endunless %}">
      {%- case media.media_type -%}
        {%- when 'video' -%}
          {{- media | video_tag: muted: true, loop: true -}}
        {%- else -%}
        {%- when 'external_video' -%}
          {% render 'external-video', video: media, video_id: media.external_id, video_type: media.host %}
        {%- else -%}
          {%-
            liquid
            assign image_src=media.preview_image | image_url: width: 500
            capture image_srcset
              render 'srcset', image: media.preview_image
            endcapture
            assign sizes = 'auto'
            assign image_alt = media.alt | escape
            render 'image', src: image_src, srcset: image_srcset, sizes: sizes, alt: image_alt, width: media.preview_image.width, height: media.preview_image.width | divided_by: media.preview_image.aspect_ratio | ceil
          -%}
      {%- endcase -%}
    </div>
    <!-- /.media -->
  </div>
  <!-- /.swiper-slide -->

{%- elsif output_type == 'slider-slide-thumbs' -%}
  <div
    class="swiper-slide swiper-slide"
    data-media-id="{{- media.id -}}"
    data-media-type="{{- media.media_type -}}"
    data-index="{{- media_index -}}"
    {%- if media_is_active -%}
      data-selected
    {%- endif -%}
  >

    {% liquid
      assign padding_bottom_minus_part = 100 | divided_by: media.preview_image.aspect_ratio
      assign padding_bottom = 0

      assign media_ratio_class = blank
      if media.preview_image.aspect_ratio < 1
        assign media_ratio_class = 'media--portrait'
        assign padding_bottom = padding_bottom_minus_part | minus: 100 | round
        elsif media.preview_image.aspect_ratio > 1
        assign media_ratio_class = 'media--landscape'
        assign padding_bottom = 100 | minus: padding_bottom_minus_part | round
      endif

      # assign preserve_aspect_ratio = true
    %}

    <div class="media media--thumb {% unless preserve_aspect_ratio %} media--square {% else %}" style="padding-bottom: {% render 'aspect-ratio', aspect_ratio: media.preview_image.aspect_ratio %}%;{% endunless %}">

      <div class="media__badge">
        {%- if media.media_type == 'model' -%}
          {% render 'icon-3d-model' %}
        {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
          {% render 'icon-video' %}
        {%- endif -%}
      </div>

      {%-
        liquid
        assign image_src=media.preview_image | image_url: width: 500
        capture image_srcset
          render 'srcset', image: media.preview_image
        endcapture
        assign sizes = 'auto'
        assign image_alt = media.alt | escape
        render 'image', src: image_src, srcset: image_srcset, sizes: sizes, alt: image_alt, width: media.preview_image.width, height: media.preview_image.width | divided_by: media.preview_image.aspect_ratio | ceil
      -%}
    </div>
    <!-- /.media -->
  </div>
  <!-- /.swiper-slide -->

{%- else -%}
  {%- if media.media_type == 'image' -%}
    <div class="product__gallery-opener {% if media_is_active %}is-active{% endif %} no-js-hidden" data-modal-opener-id="{{- media.media_type | handle -}}-{{- media.id -}}">
      <a
        href="{{- media.preview_image | image_url: width: media.preview_image.width -}}"
        class="product__gallery-toggle motion-reduce"
        type="button"
        aria-haspopup="dialog"
        data-media-id="{{- media.id -}}"
        data-pswp-image
        data-pswp-src="{{- media.preview_image | image_url: width: media.preview_image.width -}}"
        data-pswp-srcset="{{- image_srcset -}}"
        data-pswp-width="{{- media.preview_image.width -}}"
        data-pswp-height="{{- media.preview_image.height -}}">
        {% render 'icon-zoom' %}

        <span class="visually-hidden">
          {{- 'products.product.media.open_media' | t: index: media_index -}}
        </span>
      </a>
    </div>
  {%- else -%}
    {%- assign media_is_model = false -%}
    {%- if media.media_type == 'model' -%}
      {%- assign media_is_model = true -%}
    {%- endif -%}
    <modal-opener
      class="product__gallery-opener {% if media_is_model == false %} product__gallery-opener--video{% endif %} motion-reduce {% if media_index == 0 %}is-active{% endif %} no-js-hidden"
      data-modal="#ProductModal-{{- modal_id -}}"
      data-modal-opener-id="{{- media.media_type | handle -}}-{{- media.id -}}">
      <button
        class="product__gallery-toggle motion-reduce"
        data-media-id="{{- media.id -}}"
        {% if media_is_model %}
        data-model-opener
        {% endif %}
        type="button"
        aria-haspopup="dialog">
        {%- if media_is_model -%}
          {% render 'icon-3d-model' %}
        {%- else -%}
          {% render 'icon-video' %}
        {%- endif -%}

        <span class="visually-hidden">
          {{- 'products.product.media.open_media' | t: index: media_index -}}
        </span>
      </button>
    </modal-opener>
  {%- endif -%}
{%- endif -%}

Could you help with the solution?

[Huptech-Web]

Hi @LadyArins 
To add thumbnails, From the theme customizer go to the products section and enable thumbnail, Check the below screen shot.

[LadyArins]

Hello
I don't have such settings, so I need to add it with code

[Huptech-Web]

Hi @LadyArins 
You can back up your current live theme before upgrading it to the latest version to access the newest features and options. Alternatively, you can hire a developer to implement custom functionality or upgrade the theme while retaining the customizations from your live theme.

[LadyArins]

I need to add thumbnails and solve it myself, I can't involve another developer, so I'm looking for support here.