Vertical slider for product page image

Vertical Product Image Slider for Shopify Dawn Theme with Zoom in Hover

Log in or Sign up to ensure access to purchased code across multiple devices.

Vertical Product Image Slider for Shopify Dawn Theme with Zoom in Hover

One Time Purchase!

$39.99
Only
Refresh after a purchase


Related Articles

Adding Countdown Snippet to Product Page

Adding Countdown Snippet to Product Page

Adding Countdown Snippet to Product Page

shopify dawn theme slider

How To Show Only Selected Variant Images - Dawn...

How To Show Only Selected Variant Images - Dawn...

6 Steps in How To Show Only Selected Variant Images

6 Steps in How To Show Only Selected Variant Im...

6 Steps in How To Show Only Selected Variant Im...

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Dawn version 9 to 12, and other Shopify 2.0 FREE themes only

Welcome to our latest tutorial, designed specifically for users of the Dawn theme (versions 9 to 12) and other Shopify 2.0 free themes. As of December 2021, Dawn introduced an exciting thumbnail slider feature for desktop users. But what if you want to take your product display a step further? Our guide is here to help you create a custom vertical slider, complete with scrolling and zoom capabilities, to showcase your products in a style that's uniquely yours.

 

Key Features of Our Enhanced Slider

Compatibility and Version Support:
User-Friendly Design:
    • Our tutorial provides straightforward, step-by-step instructions.
    • We've included a major code update to ensure seamless integration with the latest version of Dawn.
    • View the accompanying image to see the stunning end result.

 

    Setting Up Your Slider: Make sure to configure your Shopify theme editor to use the "thumbnail carousel" layout for desktop displays and  to have "hide thumbnails" on mobile layout. This settings are crucial for the proper functioning of our enhanced slider. 

    We had a major code change to make this work with the latest version. We have removed the section settings as shown on the video. Please check the image below to see how it looks like.

     

    Vertical Product Slider preview

    You can also view the demo store here. Password: made4uo

    What you are buying:

    • A fully responsive code that enhances your product page.
    • A product page section designed exclusively for this feature.
    • Efficient, well-structured code that operates without external libraries.
    • An innovative product image zoom feature that activates on hover.
    • A stand-alone solution that requires no additional apps.

    What makes our code better:

    • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
    • We do not leave or add codes use to advertise for our website
    • Our code is mobile friendly

    Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

     

    To start:

    1. We have to go to our code editor. Shopify admin store > Themes > Edit code.

    2. Look for the product-media-gallery.liquoid under the Snippet folder and replace the code below. 

    {% comment %}
  Renders a product media gallery. Should be used with 'media-gallery.js'
  Also see 'product-media-modal'
 
  Accepts:
  - product: {Object} Product liquid object
  - variant_images: {Array} Product images associated with a variant
  - is_duplicate: {Boolean} Prevents rendering uneeded elements and duplicate ids for subsequent instances
 
  Usage:
  {% render 'product-media-gallery', is_duplicate: true %}
{% endcomment %}
{{ 'main-product-vertical.css' | asset_url | stylesheet_tag }}
{%- liquid
  if section.settings.hide_variants and variant_images.size == product.media.size
    assign single_media_visible = true
  endif
 
  assign media_count = product.media.size
  if section.settings.hide_variants and media_count > 1 and variant_images.size > 0
    assign media_count = media_count | minus: variant_images.size | plus: 1
  endif
 
  if media_count == 1 or single_media_visible
    assign single_media_visible_mobile = true
  endif
 
  if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3
    assign hide_mobile_slider = true
  endif
 
  if section.settings.media_size == 'large'
    assign media_width = 0.65
  elsif section.settings.media_size == 'medium'
    assign media_width = 0.55
  elsif section.settings.media_size == 'small'
    assign media_width = 0.45
  endif
 
  assign id_append = ''
  if is_duplicate
    assign id_append = '-duplicate'
  endif
-%}
<media-gallery
  id="MediaGallery-{{ section.id }}{{ id_append }}"
  role="region"
  {% if section.settings.enable_sticky_info %}
    class="product__column-sticky"
  {% endif %}
  aria-label="{{ 'products.product.media.gallery_viewer' | t }}"
  data-desktop-layout="{{ section.settings.gallery_layout }}"
>
  {%- for media in product.media -%}
    {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
      {% assign no_thumbails_media = true %}
    {% endunless %}
  {% endfor %}
  <div id="GalleryStatus-{{ section.id }}" class="visually-hidden" role="status"></div>
  <main-slider
    id="GalleryViewer-{{ section.id }}{{ id_append }}"
    class="slider-mobile-gutter {% unless no_thumbails_media %}more--media{% endunless %}"
  >
    {%- unless is_duplicate -%}
      <a class="skip-to-content-link button visually-hidden quick-add-hidden" href="#ProductInfo-{{ section.id }}">
        {{ 'accessibility.skip_to_product_info' | t }}
      </a>
    {%- endunless -%}
    <button
      type="button"
      class="slider-button slider-button--prev main-button--prev"
      name="previous"
      aria-label="{{ 'general.slider.previous_slide' | t }}"
      {% if product.media.size <= 1 %}
        style="display: none"
      {% endif %}
    >
      <svg class="icon" viewBox="0 0 15 15">
        <path class="st0" d="M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26-0.29l4.46-6.78
        c0.07-0.08,0.06-0.19-0.01-0.26l-4.34-5.8C0.77,0.94,0.96,0.69,1.17,0.78z"></path>
      </svg>
    </button>
    <ul
      id="Slider-Gallery-{{ section.id }}{{ id_append }}"
      class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile"
      role="list"
    >
      {%- if product.selected_or_first_available_variant.featured_media != null -%}
        {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
        <li
          id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
          class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}"
          data-media-id="{{ section.id }}-{{ featured_media.id }}"
        >
          {%- assign media_position = 1 -%}
          {% render 'product-thumbnail',
            media: featured_media,
            media_count: media_count,
            position: media_position,
            desktop_layout: section.settings.gallery_layout,
            mobile_layout: section.settings.mobile_thumbnails,
            loop: section.settings.enable_video_looping,
            modal_id: section.id,
            xr_button: true,
            media_width: media_width,
            media_fit: section.settings.media_fit,
            constrain_to_viewport: section.settings.constrain_to_viewport,
            lazy_load: false
          %}
        </li>
      {%- endif -%}
      {%- for media in product.media -%}
        {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
          <li
            id="Slide-{{ section.id }}-{{ media.id }}{{ id_append }}"
            class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}"
            data-media-id="{{ section.id }}-{{ media.id }}"
          >
            {%- liquid
              assign media_position = media_position | default: 0 | plus: 1
              assign lazy_load = false
              if media_position > 1
                assign lazy_load = true
              endif
            -%}
            {% render 'product-thumbnail',
              media: media,
              media_count: media_count,
              position: media_position,
              desktop_layout: section.settings.gallery_layout,
              mobile_layout: section.settings.mobile_thumbnails,
              loop: section.settings.enable_video_looping,
              modal_id: section.id,
              xr_button: true,
              media_width: media_width,
              media_fit: section.settings.media_fit,
              constrain_to_viewport: section.settings.constrain_to_viewport,
              lazy_load: lazy_load
            %}
          </li>
        {%- endunless -%}
      {%- endfor -%}
    </ul>
    <button
      type="button"
      class="slider-button slider-button--next main-button--next"
      name="next"
      aria-label="{{ 'general.slider.next_slide' | t }}"
      {% if product.media.size <= 1 %}
        style="display: none"
      {% endif %}
    >
      <svg class="icon" viewBox="0 0 15 15">
        <path class="st0" d="M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26-0.29l4.46-6.78
        c0.07-0.08,0.06-0.19-0.01-0.26l-4.34-5.8C0.77,0.94,0.96,0.69,1.17,0.78z"></path>
      </svg>
    </button>
  </main-slider>
  <slider-component id="GalleryViewer-{{ section.id }}{{ id_append }}" class="slider-mobile-gutter">
    {%- unless is_duplicate -%}
      <a class="skip-to-content-link button visually-hidden quick-add-hidden" href="#ProductInfo-{{ section.id }}">
        {{ 'accessibility.skip_to_product_info' | t }}
      </a>
    {%- endunless -%}
    <ul
      id="Slider-Gallery-{{ section.id }}{{ id_append }}"
      class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile"
      role="list"
    >
      {%- if product.selected_or_first_available_variant.featured_media != null -%}
        {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
        <li
          id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
          class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}"
          data-media-id="{{ section.id }}-{{ featured_media.id }}"
        >
          {%- assign media_position = 1 -%}
          {% render 'product-thumbnail',
            media: featured_media,
            media_count: media_count,
            position: media_position,
            desktop_layout: section.settings.gallery_layout,
            mobile_layout: section.settings.mobile_thumbnails,
            loop: section.settings.enable_video_looping,
            modal_id: section.id,
            xr_button: true,
            media_width: media_width,
            media_fit: section.settings.media_fit,
            constrain_to_viewport: section.settings.constrain_to_viewport,
            lazy_load: false
          %}
        </li>
      {%- endif -%}
      {%- for media in product.media -%}
        {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
          <li
            id="Slide-{{ section.id }}-{{ media.id }}{{ id_append }}"
            class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}"
            data-media-id="{{ section.id }}-{{ media.id }}"
          >
            {%- liquid
              assign media_position = media_position | default: 0 | plus: 1
              assign lazy_load = false
              if media_position > 1
                assign lazy_load = true
              endif
            -%}
            {% render 'product-thumbnail',
              media: media,
              media_count: media_count,
              position: media_position,
              desktop_layout: section.settings.gallery_layout,
              mobile_layout: section.settings.mobile_thumbnails,
              loop: section.settings.enable_video_looping,
              modal_id: section.id,
              xr_button: true,
              media_width: media_width,
              media_fit: section.settings.media_fit,
              constrain_to_viewport: section.settings.constrain_to_viewport,
              lazy_load: lazy_load
            %}
          </li>
        {%- endunless -%}
      {%- endfor -%}
    </ul>
    {%- unless is_duplicate -%}
      <div class="slider-buttons no-js-hidden quick-add-hidden{% if hide_mobile_slider %} small-hide{% endif %}">
        <button
          type="button"
          class="slider-button slider-button--prev"
          name="previous"
          aria-label="{{ 'general.slider.previous_slide' | t }}"
        >
          {% render 'icon-caret' %}
        </button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="slider-counter--total">{{ media_count }}</span>
        </div>
        <button
          type="button"
          class="slider-button slider-button--next"
          name="next"
          aria-label="{{ 'general.slider.next_slide' | t }}"
        >
          {% render 'icon-caret' %}
        </button>
      </div>
    {%- endunless -%}
  </slider-component>
  {%- if first_3d_model -%}
    <button
      class="button button--full-width product__xr-button"
      type="button"
      aria-label="{{ 'products.product.xr_button_label' | t }}"
      data-shopify-xr
      data-shopify-model3d-id="{{ first_3d_model.id }}"
      data-shopify-title="{{ product.title | escape }}"
      data-shopify-xr-hidden
    >
      {% render 'icon-3d-model' %}
      {{ 'products.product.xr_button' | t }}
    </button>
  {%- endif -%}
  {%- if media_count > 1
    and section.settings.gallery_layout contains 'thumbnail'
    or section.settings.mobile_thumbnails == 'show'
  -%}
    <thumbnail-slider
      id="GalleryThumbnails-{{ section.id }}{{ id_append }}"
      class="thumbnail-slider slider-mobile-gutter quick-add-hidden{% unless section.settings.gallery_layout contains 'thumbnail' %} medium-hide large-up-hide{% endunless %}{% if section.settings.mobile_thumbnails != 'show' %} small-hide{% endif %}{% if media_count <= 3 %} thumbnail-slider--no-slide{% endif %}"
    >
      <button
        type="button"
        class="slider-button thumbnail-button slider-button--prev{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}"
        name="previous"
        aria-label="{{ 'general.slider.previous_slide' | t }}"
        aria-controls="GalleryThumbnails-{{ section.id }}"
        data-step="3"
      >
        <svg class="icon" viewBox="0 0 15 15">
          <path class="st0" d="M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26-0.29l4.46-6.78
          c0.07-0.08,0.06-0.19-0.01-0.26l-4.34-5.8C0.77,0.94,0.96,0.69,1.17,0.78z"></path>
        </svg>
      </button>
      <ul
        id="Slider-Thumbnails-{{ section.id }}{{ id_append }}"
        class="thumbnail-list list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail_slider' %} slider--tablet-up{% endif %}"
      >
        {%- capture sizes -%}
          (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4),
          (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4),
          (min-width: 750px) calc((100vw - 15rem) / 8),
          calc((100vw - 8rem) / 3)
        {%- endcapture -%}
 
        {%- if featured_media != null -%}
          {%- liquid
            capture media_index
              if featured_media.media_type == 'model'
                increment model_index
              elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video'
                increment video_index
              elsif featured_media.media_type == 'image'
                increment image_index
              endif
            endcapture
            assign media_index = media_index | plus: 1
          -%}
          <li
            id="Slide-Thumbnails-{{ section.id }}-0{{ id_append }}"
            class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}"
            data-target="{{ section.id }}-{{ featured_media.id }}"
            data-media-position="{{ media_index }}"
          >
            {%- capture thumbnail_id -%}
              Thumbnail-{{ section.id }}-0{{ id_append }}
            {%- endcapture -%}
            <button
              class="thumbnail global-media-settings global-media-settings--no-shadow"
              aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
              aria-current="true"
              aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
              aria-describedby="{{ thumbnail_id }}"
            >
              {{
                featured_media.preview_image
                | image_url: width: 416
                | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: featured_media.alt
                | escape
              }}
            </button>
          </li>
        {%- endif -%}
        {%- for media in product.media -%}
          {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
            {%- liquid
              capture media_index
                if media.media_type == 'model'
                  increment model_index
                elsif media.media_type == 'video' or media.media_type == 'external_video'
                  increment video_index
                elsif media.media_type == 'image'
                  increment image_index
                endif
              endcapture
              assign media_index = media_index | plus: 1
            -%}
            <li
              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
              class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
              data-target="{{ section.id }}-{{ media.id }}"
              data-media-position="{{ media_index }}"
            >
              {%- if media.media_type == 'model' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-3d-model' -%}
                </span>
              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-play' -%}
                </span>
              {%- endif -%}
              {%- capture thumbnail_id -%}
                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
              {%- endcapture -%}
              <button
                class="thumbnail global-media-settings global-media-settings--no-shadow"
                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                {% if media == product.selected_or_first_available_variant.featured_media
                  or product.selected_or_first_available_variant.featured_media == null
                  and forloop.index == 1
                %}
                  aria-current="true"
                {% endif %}
                aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
                aria-describedby="{{ thumbnail_id }}"
              >
                {{
                  media.preview_image
                  | image_url: width: 416
                  | image_tag:
                    loading: 'lazy',
                    sizes: sizes,
                    widths: '54, 74, 104, 162, 208, 324, 416',
                    id: thumbnail_id,
                    alt: media.alt
                  | escape
                }}
              </button>
            </li>
          {%- endunless -%}
        {%- endfor -%}
      </ul>
      <button
        type="button"
        class="slider-button thumbnail-button slider-button--next{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}"
        name="next"
        aria-label="{{ 'general.slider.next_slide' | t }}"
        aria-controls="GalleryThumbnails-{{ section.id }}"
        data-step="3"
      >
        <svg class="icon" viewBox="0 0 15 15">
          <path class="st0" d="M1.17,0.78l12.97,6.05c0.14,0.07,0.15,0.26,0.01,0.33L1.08,14.21c-0.2,0.11-0.4-0.13-0.26-0.29l4.46-6.78
          c0.07-0.08,0.06-0.19-0.01-0.26l-4.34-5.8C0.77,0.94,0.96,0.69,1.17,0.78z"></path>
        </svg>
      </button>
    </thumbnail-slider>
  {%- endif -%}
</media-gallery>

     

    3. We have to add a css file for our slider. Open the Assets folder, and "Add a new asset", name it "main-product-vertical" and place the code below. 

    .product,
.product__title > * {
  margin: 0;
}
.product.grid {
  gap: 0;
}
.product--no-media {
  max-width: 57rem;
  margin: 0 auto;
}
.product__media-wrapper,
.product-form__input .form__label,
.product--no-media .product__info-wrapper {
  padding-left: 0;
}
@media screen and (min-width: 750px) {
  slider-component.slider-mobile-gutter {
    display: flex;
  }
  .product__column-sticky {
    display: block;
    position: sticky;
    top: 3rem;
    z-index: 2;
  }
  .product--thumbnail .thumbnail-list,
  .product__media-list {
    padding-right: var(--media-shadow-horizontal-offset);
  }
  .product__info-wrapper {
    padding: 0 0 0 5rem;
  }
  .product__info-wrapper--extra-padding {
    padding: 0 0 0 8rem;
  }
  .product--right .product__info-wrapper {
    padding: 0 5rem 0 0;
  }
  .product--right .product__info-wrapper--extra-padding {
    padding: 0 8rem 0 0;
  }
  .product--right .product__media-list {
    margin-bottom: 2rem;
  }
  .product__media-container .slider-buttons,
  .product--thumbnail .product__media-item:not(.is-active),
  .product--thumbnail_slider .product__media-item:not(.is-active),
  .product-media-modal__content
    > .product__media-item--variant.product__media-item--variant,
  .product__modal-opener:not(.product__modal-opener--image),
  .product--stacked .thumbnail-list,
  .product__media-wrapper .slider-mobile-gutter .slider-button,
  .product-media-container
    .product__modal-opener:not(.product__modal-opener--image) {
    display: none;
  }
  .product__info-container {
    max-width: 60rem;
  }
  .product__info-container .price--on-sale .price-item--regular {
    font-size: 1.6rem;
  }
  .product__info-container > *:first-child {
    margin-top: 0;
  }
  .product--thumbnail .product__media-list,
  .product--thumbnail_slider .product__media-list {
    padding-bottom: calc(
      var(--media-shadow-vertical-offset) * var(--media-shadow-visible)
    );
  }
  .product__media-list {
    padding-right: calc(
      var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)
    );
  }
  .product-media-modal__content > .product__media-item--variant:first-child,
  .product-media-modal__content > *:not(.active),
  .product__media-list .deferred-media {
    display: block;
  }
  .grid__item.product__media-item--full,
  .product-media-modal__content > *,
  .product__media-item:first-child {
    width: 100%;
  }
  .product--columns
    .product__media-item:not(.product__media-item--single):not(:only-child) {
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .product--large.product--columns
    .product__media-item--full
    .deferred-media__poster-button {
    height: 5rem;
    width: 5rem;
  }
  .product--medium.product--columns
    .product__media-item--full
    .deferred-media__poster-button {
    height: 4.2rem;
    width: 4.2rem;
  }
  .product--medium.product--columns
    .product__media-item--full
    .deferred-media__poster-button
    .icon {
    width: 1.8rem;
    height: 1.8rem;
  }
  .product--small.product--columns
    .product__media-item--full
    .deferred-media__poster-button {
    height: 3.6rem;
    width: 3.6rem;
  }
  .product--small.product--columns
    .product__media-item--full
    .deferred-media__poster-button
    .icon {
    width: 1.6rem;
    height: 1.6rem;
  }
  .product-media-modal__content {
    padding-bottom: 2rem;
  }
  .product-media-modal__content {
    padding: 2rem 11rem;
  }
  .product-media-modal__content > * + * {
    margin-top: 2rem;
  }
  .product-media-modal__toggle {
    right: 5rem;
    top: 2.2rem;
  }
  .product-popup-modal__content {
    padding-right: 1.5rem;
    margin-top: 10rem;
    width: 70%;
    padding: 0 3rem;
  }
  .product-media-modal__dialog .global-media-settings--no-shadow {
    overflow: visible !important;
  }
  .thumbnail-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .product--thumbnail_slider .thumbnail-slider {
    display: flex;
    align-items: center;
  }
  .thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: flex;
    flex: 1;
    scroll-padding-left: 0.5rem;
  }
  .product--thumbnail_slider .slider-mobile-gutter .slider-button {
    display: flex;
  }
  .product:not(.product--small) .thumbnail__badge {
    height: 3rem;
    width: 3rem;
  }
  .product:not(.product--small) .thumbnail__badge .icon {
    width: 1.2rem;
    height: 1.2rem;
  }
  .product:not(.product--small) .thumbnail__badge .icon-3d-model {
    width: 1.4rem;
    height: 1.4rem;
  }
  .product-media-container {
    max-width: 100%;
  }
  .product-media-container:not(.media-type-image) {
    --aspect-ratio: var(--ratio);
  }
  .product-media-container.constrain-height {
    --viewport-offset: 170px;
    --constrained-min-height: 500px;
  }
  .product-media-container.media-fit-cover,
  .product-media-container.media-fit-cover .product__modal-opener,
  .product-media-container.media-fit-cover .media,
  .slider-mobile-gutter {
    height: 100%;
  }
  .product-media-container.media-fit-cover .deferred-media__poster img {
    object-fit: cover;
    width: 100%;
  }
  .product--thumbnail .product__media-gallery,
  .product--thumbnail_slider .product__media-gallery,
  .product--stacked .product__info-container--sticky {
    display: flex;
    position: sticky;
    top: 3rem;
    z-index: 2;
    gap: clamp(1rem, 3vw, 3rem);
  }
  .product__info-wrapper {
    padding-left: 5rem;
  }
  .product__info-wrapper--extra-padding {
    padding-left: 8rem;
  }
  .product--thumbnail .product__media-list,
  .product--thumbnail_slider .product__media-list {
    padding-bottom: var(--media-shadow-vertical-offset);
  }
  .product--thumbnail_slider .thumbnail-slider {
    display: flex;
    flex-direction: column;
  }
  .thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
  }
}
  @media screen and (min-width: 990px) {
  .product--large:not(.product--no-media) .product__media-wrapper {
    max-width: 65%;
    width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .product--large:not(.product--no-media) .product__info-wrapper {
    padding: 0 0 0 4rem;
    max-width: 35%;
    width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .product--large:not(.product--no-media).product--right
    .product__info-wrapper {
    padding: 0 4rem 0 0;
  }
  .product--medium:not(.product--no-media) .product__media-wrapper,
  .product--small:not(.product--no-media) .product__info-wrapper,
  .product--medium:not(.product--no-media) .product__media-wrapper,
  .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 55%;
    width: calc(55% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .product--medium:not(.product--no-media) .product__info-wrapper,
  .product--small:not(.product--no-media) .product__media-wrapper,
  .product--medium:not(.product--no-media) .product__info-wrapper,
  .product--small:not(.product--no-media) .product__media-wrapper {
    max-width: 45%;
    width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .product--stacked .product__media-item {
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .product:not(.product--columns)
    .product__media-list
    .product__media-item:first-child,
  .product:not(.product--columns)
    .product__media-list
    .product__media-item--full {
    width: 100%;
    max-width: 100%;
  }
  .product__modal-opener .product__media-icon {
    opacity: 0;
  }
  .product__modal-opener:hover .product__media-icon,
  .product__modal-opener:focus .product__media-icon,
  .product__modal-opener:hover .product__media-icon,
  .product__modal-opener:focus .product__media-icon {
    opacity: 1;
  }
  .product-media-modal__content {
    padding: 2rem 11rem;
  }
  .product-media-modal__content > * + * {
    margin-top: 1.5rem;
  }
  .product-media-modal__content {
    padding-bottom: 1.5rem;
  }
  .product-media-modal__toggle {
    right: 5rem;
  }
  .thumbnail-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .product--medium .thumbnail-list {
    grid-template-columns: repeat(5, 1fr);
  }
  .product--large .thumbnail-list {
    grid-template-columns: repeat(6, 1fr);
  }
  .product--large:not(.product--no-media) .product__info-wrapper {
    padding-left: 4rem;
    max-width: 35%;
    width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
  }
  .thumbnail-list {
    margin-left: 0;
    grid-template-columns: repeat(4, 1fr);
  }
}
.shopify-payment-button__button {
  font-family: inherit;
  min-height: 4.6rem;
}
.shopify-payment-button__button [role="button"].focused,
.no-js .shopify-payment-button__button [role="button"]:focus,
.shopify-payment-button__button [role="button"].focused,
.no-js .shopify-payment-button__button [role="button"]:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
}
.shopify-payment-button__button [role="button"]:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none !important;
}
.shopify-payment-button__button [role="button"]:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
    0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important;
}
.shopify-payment-button__button--unbranded {
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  color: rgb(var(--color-button-text));
  font-size: 1.4rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  letter-spacing: 0.07rem;
}
.shopify-payment-button__button--unbranded::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}
.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--unbranded:hover:not([disabled]),
.shopify-payment-button__button--unbranded:hover,
.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}
.shopify-payment-button__more-options {
  margin: 1.6rem 0 1rem;
  font-size: 1.2rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.05rem;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
.shopify-payment-button__button + .shopify-payment-button__button--hidden,
.product-form__input
  input[type="radio"]:not(.disabled)
  + label
  > .visually-hidden,
.product__title > a,
.product .price--sold-out .price__badge-sale,
.product__media-item.product__media-item--variant,
.product-media-modal__content > *:not(.active),
.product__media-list .deferred-media,
.thumbnail-list_item--variant:not(:first-child),
.product__modal-opener--image .product__media-zoom-none,
.product__media-icon--none,
.product:not(.featured-product) .product__view-details,
.no-js .recipient-checkbox,
.js .recipient-fields,
.recipient-form
  > input[type="checkbox"]:not(:checked, :disabled)
  ~ .recipient-fields,
.recipient-email-label,
.shopify-payment-button__button--hidden,
.product-form__submit[aria-disabled="true"] + .shopify-payment-button,
.product-form__submit[disabled] + .shopify-payment-button,
.product-media-modal__content > *:not(.active),
.product__media-list .deferred-media,
.product__media-list .product__media-toggle,
.mobile-slider {
  display: none;
}
.product-form,
variant-radios,
variant-selects,
.product__media-item--variant:first-child,
.product__inventory.visibility-hidden:empty,
variant-radios,
variant-selects {
  display: block;
}
.product-form__error-message-wrapper:not([hidden]) {
  display: flex;
  align-items: flex-start;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}
.product-form__error-message-wrapper svg {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.7rem;
  margin-top: 0.5rem;
}
.product-form__input {
  flex: 0 0 100%;
  padding: 0;
  margin: 0 0 1.2rem;
  max-width: 44rem;
  min-width: fit-content;
  border: none;
}
.product-form__input--dropdown {
  margin-bottom: 1.6rem;
}
fieldset.product-form__input .form__label {
  margin-bottom: 0.2rem;
}
.product-form__input input[type="radio"] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}
.product-form__input input[type="radio"] + label {
  border: var(--variant-pills-border-width) solid
    rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}
.product-form__input input[type="radio"] + label:before {
  content: "";
  position: absolute;
  top: calc(var(--variant-pills-border-width) * -1);
  right: calc(var(--variant-pills-border-width) * -1);
  bottom: calc(var(--variant-pills-border-width) * -1);
  left: calc(var(--variant-pills-border-width) * -1);
  z-index: -1;
  border-radius: var(--variant-pills-radius);
  box-shadow: var(--variant-pills-shadow-horizontal-offset)
    var(--variant-pills-shadow-vertical-offset)
    var(--variant-pills-shadow-blur-radius)
    rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
}
.product-form__input input[type="radio"] + label:hover {
  border-color: rgb(var(--color-foreground));
}
.product-form__input input[type="radio"]:checked + label {
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}
@media screen and (forced-colors: active) {
  .product-form__input input[type="radio"]:checked + label {
    text-decoration: underline;
  }
  .product-form__submit[aria-disabled="true"] {
    color: Window;
  }
  .recipient-fields > hr {
    border-top: 0.1rem solid rgb(var(--color-background));
  }
  .recipient-checkbox > svg {
    background-color: inherit;
    border: 0.1rem solid rgb(var(--color-background));
  }
  .recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
    border: none;
  }
}
.product-form__input input[type="radio"]:checked + label::selection {
  background-color: rgba(var(--color-background), 0.3);
}
.product-form__input input[type="radio"]:disabled + label,
.product-form__input input[type="radio"].disabled + label {
  border-color: rgba(var(--color-foreground), 0.1);
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: line-through;
}
.product-form__input input[type="radio"].disabled:checked + label,
.product-form__input input[type="radio"]:disabled:checked + label {
  color: rgba(var(--color-background), 0.6);
}
.product-form__input input[type="radio"]:focus-visible + label,
.product-form__input input[type="radio"].focused + label,
.no-js .shopify-payment-button__button [role="button"]:focus + label,
.product-form__input input[type="radio"].focused + label,
.no-js .shopify-payment-button__button [role="button"]:focus + label {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}
.no-js
  .product-form__input
  input[type="radio"]:focus:not(:focus-visible)
  + label {
  box-shadow: none;
}
.product-form__input .select {
  max-width: 25rem;
}
.product-form__submit {
  margin-bottom: 1rem;
}
.no-js .product-form__submit.button--secondary {
  --color-button: var(--color-base-accent-1);
  --color-button-text: var(--color-base-solid-button-labels);
  --alpha-button-background: 1;
}
.product-form__submit[aria-disabled="true"]
  + .shopify-payment-button
  .shopify-payment-button__button[disabled],
.product-form__submit[disabled]
  + .shopify-payment-button
  .shopify-payment-button__button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.shopify-payment-button__more-options {
  color: rgb(var(--color-foreground));
}
.shopify-payment-button__button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
}
.product__info-container > * + * {
  margin: 1.5rem 0;
}
.product__info-container iframe,
.product--no-media noscript .product-form__input,
.product--no-media .share-button,
.product-popup-modal__content img,
.product--no-media noscript .product-form__input,
.product--no-media .share-button {
  max-width: 100%;
}
.product__info-container .product-form,
.product__info-container .product__description,
.product__info-container .icon-with-text,
.product__info-container .product-form,
.product__info-container .product__description {
  margin: 2.5rem 0;
}
.product__text {
  margin-bottom: 0;
}
a.product__text {
  display: block;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}
.product__text.caption-with-letter-spacing {
  text-transform: uppercase;
}
.product__title {
  word-break: break-word;
  margin-bottom: 1.5rem;
}
.product__title + .product__text.caption-with-letter-spacing {
  margin-top: -1.5rem;
}
.product__text.caption-with-letter-spacing + .product__title {
  margin-top: 0;
}
.product__accordion .accordion__content {
  padding: 0 1rem;
}
.product .price .badge,
.product .price__container {
  margin-bottom: 0.5rem;
}
.product .price dl {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.product .price--sold-out .price__badge-sold-out {
  background: transparent;
  color: rgb(var(--color-base-text));
  border-color: transparent;
}
.product__description-title {
  font-weight: 600;
}
.product--no-media .product__title,
.product--no-media .product__text,
.product--no-media noscript .product-form__input,
.product--no-media .product__tax,
.product--no-media .product__sku,
.product--no-media shopify-payment-terms,
.product--no-media .price,
.product--no-media .product__title,
.product--no-media .product__text,
.product--no-media noscript .product-form__input,
.product--no-media .product__tax {
  text-align: center;
}
.product--no-media .product__media-wrapper,
.product--no-media .product__info-wrapper {
  padding: 0;
}
.product__tax {
  margin-top: -1.4rem;
}
.product--no-media fieldset.product-form__input,
.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown,
.product--no-media .share-button,
.product--no-media .product__view-details,
.product--no-media .product__pickup-availabilities,
.product--no-media .product-form,
.product--no-media fieldset.product-form__input,
.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown,
.product--no-media .share-button,
.product--no-media .product__view-details,
.product--no-media .product__pickup-availabilities,
.product--no-media .product-form {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.product--no-media .product-form {
  flex-direction: column;
}
.product--no-media .product-form > .form {
  max-width: 30rem;
  width: 100%;
}
.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown,
.product--no-media .product-form__quantity,
.product--no-media .product-form__input--dropdown {
  flex-direction: column;
  max-width: 100%;
}
.product-form__quantity .form__label {
  margin-bottom: 0.6rem;
}
.product-form__quantity-top .form__label {
  margin-bottom: 1.2rem;
}
.product--no-media fieldset.product-form__input {
  flex-wrap: wrap;
  margin: 0 auto 1.2rem;
}
.product-form__buttons {
  max-width: 44rem;
}
.product--no-media .product__info-container > modal-opener {
  display: block;
  text-align: center;
}
.product--no-media .product-popup-modal__button {
  padding-right: 0;
}
.product__media-list video {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}
@media screen and (max-width: 749px) {
  .product__media-list {
    margin-left: -2.5rem;
    margin-bottom: 3rem;
    width: calc(100% + 4rem);
  }
  .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide),
  .product__media-wrapper main-slider:not(.thumbnail-slider--no-slide) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .slider.product__media-list::-webkit-scrollbar {
    height: 0.2rem;
    width: 0.2rem;
  }
  .product__media-list::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-foreground));
  }
  .product__media-list::-webkit-scrollbar-track {
    background-color: rgba(var(--color-foreground), 0.2);
  }
  .product__media-list .product__media-item {
    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
  }
  .product--mobile-columns .product__media-item {
    width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing));
  }
  .product--thumbnail
    .is-active
    .product__modal-opener:not(.product__modal-opener--image),
  .product--thumbnail_slider
    .is-active
    .product__modal-opener:not(.product__modal-opener--image),
  thumbnail-slider.vertical-hide,
  .product--thumbnail
    .is-active
    > .product__modal-opener:not(.product__modal-opener--image),
  .product--thumbnail_slider
    .is-active
    > .product__modal-opener:not(.product__modal-opener--image) {
    display: none;
  }
  .product--thumbnail .is-active .deferred-media,
  .product--thumbnail_slider .is-active .deferred-media,
  .product--thumbnail .is-active .deferred-media,
  .product--thumbnail_slider .is-active .deferred-media {
    display: block;
    width: 100%;
  }
  .product-popup-modal__content table {
    display: block;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
    margin: 0;
  }
  .product-media-modal__dialog .global-media-settings,
  .product-media-modal__dialog .global-media-settings video,
  .product-media-modal__dialog .global-media-settings model-viewer,
  .product-media-modal__dialog .global-media-settings iframe,
  .product-media-modal__dialog .global-media-settings img,
  .product-media-modal__dialog .global-media-settings,
  .product-media-modal__dialog .global-media-settings video,
  .product-media-modal__dialog .global-media-settings model-viewer,
  .product-media-modal__dialog .global-media-settings iframe,
  .product-media-modal__dialog .global-media-settings img {
    border: none;
    border-radius: 0;
  }
  .product-popup-modal__content-info > * {
    max-height: 100%;
  }
  .product__media-item,
  .thumbnail-slider {
    display: flex;
    align-items: center;
  }
  .product__modal-opener {
    width: 100%;
  }
  .thumbnail-slider .thumbnail-list.slider {
    display: flex;
    padding: 0.5rem;
    flex: 1;
    scroll-padding-left: 0.5rem;
  }
  .thumbnail-list__item.slider__slide {
    width: calc(33% - 0.6rem);
  }
  .product__media-zoom-hover,
  .product__media-icon--hover,
  slider-component.mobile-slider {
    display: flex;
  }
  .product-media-container.media-fit-cover {
    display: flex;
    align-self: stretch;
  }
  .product-media-container.media-fit-cover .media {
    position: initial;
  }
  .product__media-list {
    width: calc(100% + 4rem);
  }
  main-slider .mobile-hide {
    display: none !important;
  }
  .product__media-list .product__media-item {
    width: calc(100% - 3rem);
  }
  .product__media-wrapper {
    padding-bottom: 1rem;
  }
  .product__media-item--variant:first-child {
    padding-right: 1.5rem;
  }
  .mobile-slider .thumbnail-list.slider,
  .thumbnail-slider .thumbnail-list.slider {
    display: flex;
    flex: 1;
    scroll-padding-left: 0.5rem;
  }
}
@media screen and (min-width: 750px) and (max-width: 989px) {
  .product__media-list .product__media-item:first-child {
    padding-left: 0;
  }
  .product--thumbnail_slider .product__media-list {
    margin-left: 0;
  }
  .product__media-list .product__media-item {
    width: 100%;
  }
  .product__media-list .product__media-item {
    padding: 0 0 0.5rem;
    width: 100%;
  }
}
.product__media-icon .icon {
  width: 1.2rem;
  height: 1.4rem;
}
.product__media-icon,
.thumbnail__badge {
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  z-index: 1;
  transition: color var(--duration-short) ease,
    opacity var(--duration-short) ease;
}
.product__media-video .product__media-icon {
  opacity: 1;
}
.product__modal-opener--image .product__media-toggle:hover,
.image-magnify-hover {
  cursor: zoom-in;
}
.product__modal-opener:hover .product__media-icon {
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
}
.product__media-item > *,
.product-media-container .product__modal-opener {
  display: block;
  position: relative;
}
.product__media-toggle {
  display: flex;
  border: none;
  background-color: transparent;
  color: currentColor;
  padding: 0;
}
.product__media-toggle::after {
  content: "";
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: calc(var(--border-width) * -1);
  right: calc(var(--border-width) * -1);
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  z-index: 2;
}
.product__media-toggle:focus-visible,
.product__media-toggle.focused {
  outline: 0;
  box-shadow: none;
}
@media (forced-colors: active) {
  .product__media-toggle:focus-visible,
  .product__media-toggle:focus-visible:after,
  .product-form__input input[type="radio"]:focus-visible + label {
    outline: transparent solid 1px;
    outline-offset: 2px;
  }
  .thumbnail[aria-current]:focus,
  .thumbnail.focused {
    outline: transparent solid 1px;
  }
}
.product__media-toggle:focus-visible:after,
.product__media-toggle.focused:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem rgba(var(--color-foreground), 0.5);
  border-radius: var(--media-radius);
}
.product-media-modal {
  background-color: rgb(var(--color-background));
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}
.product-media-modal[open] {
  visibility: visible;
  opacity: 1;
  z-index: 101;
}
.product-media-modal__dialog {
  display: flex;
  align-items: center;
  height: 100vh;
}
.product-media-modal__content {
  max-height: 100vh;
  width: 100%;
  overflow: auto;
}
.product-media-modal__content > * {
  display: block;
  height: auto;
  margin: auto;
}
.product-media-modal__content .media {
  background: none;
}
.product-media-modal__model,
.product-media-modal__content .deferred-media,
.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
  width: 100%;
}
.product-media-modal__toggle {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  right: 2rem;
  padding: 1.2rem;
  position: fixed;
  z-index: 2;
  top: 2rem;
  width: 4rem;
}
.product-media-modal__toggle:hover,
.product-popup-modal__toggle:hover {
  color: rgba(var(--color-foreground), 0.75);
}
.product-media-modal__toggle .icon,
.product-popup-modal__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}
.product-popup-modal {
  box-sizing: border-box;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  background: rgba(var(--color-foreground), 0.2);
  height: 100%;
}
.product-popup-modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}
.product-popup-modal__content {
  border-radius: var(--popup-corner-radius);
  background-color: rgb(var(--color-background));
  overflow: auto;
  height: 80%;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5rem;
  width: 92%;
  position: absolute;
  top: 0;
  padding: 0 1.5rem 0 3rem;
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset)
    var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
}
.product-popup-modal__content.focused,
.product-popup-modal__content:focus-visible {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem.4rem rgba(var(--color-foreground), 0.3),
    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset)
      var(--popup-shadow-blur-radius)
      rgba(var(--color-shadow), var(--popup-shadow-opacity));
}
.product-popup-modal__opener {
  display: inline-block;
}
.product-popup-modal__button {
  font-size: 1.6rem;
  padding-right: 1.3rem;
  padding-left: 0;
  min-height: 4.4rem;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}
.product-popup-modal__button:hover {
  text-decoration-thickness: 0.2rem;
}
.product-popup-modal__content-info {
  padding-right: 4.4rem;
}
.product-popup-modal__content-info > * {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}
.product-popup-modal__toggle {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: sticky;
  padding: 1.2rem;
  z-index: 2;
  top: 1.5rem;
  width: 4rem;
  margin: 0 0 0 auto;
}
.product__media-list .media > * {
  overflow: hidden;
}
.thumbnail-list {
  flex-wrap: wrap;
  grid-gap: 1rem;
}
.slider--mobile.thumbnail-list:after {
  content: none;
}
.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  color: rgb(var(--color-base-text));
  cursor: pointer;
  background-color: transparent;
}
.thumbnail:hover {
  opacity: 0.7;
}
.thumbnail.global-media-settings img {
  border-radius: 0;
}
.thumbnail[aria-current] {
  box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
  border-color: rgb(var(--color-foreground));
}
.image-magnify-full-size {
  cursor: zoom-out;
  z-index: 1;
  margin: 0;
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}
.product__modal-opener > .loading-overlay__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  align-items: center;
  height: 48px;
  width: 48px;
}
.product__modal-opener .path {
  stroke: rgb(var(--color-base-accent-1));
  opacity: 0.75;
}
@media (hover: hover) {
  .product__media-zoom-hover,
  .product__media-icon--hover {
    display: none;
  }
}
.js .product__media {
  overflow: hidden !important;
}
.thumbnail[aria-current]:focus-visible {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem rgba(var(--color-foreground), 0.5);
}
.thumbnail[aria-current]:focus,
.thumbnail.focused,
.thumbnail[aria-current]:focus,
.thumbnail.focused {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem rgba(var(--color-foreground), 0.5);
}
.thumbnail[aria-current]:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
}
.thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.thumbnail__badge .icon {
  width: 1rem;
  height: 1rem;
}
.thumbnail__badge .icon-3d-model {
  width: 1.2rem;
  height: 1.2rem;
}
.thumbnail__badge {
  color: rgb(var(--color-foreground), 0.6);
  height: 2rem;
  width: 2rem;
  left: auto;
  right: calc(0.4rem + var(--media-border-width));
  top: calc(0.4rem + var(--media-border-width));
}
.thumbnail-list__item,
thumbnail-slider {
  position: relative;
}
.thumbnail-list__item::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.product__view-details {
  display: block;
  text-decoration: none;
}
.product__view-details:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
.product__view-details .icon {
  width: 1.2rem;
  margin-left: 1.2rem;
  flex-shrink: 0;
}
.product__inventory {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.product--no-media .product__inventory {
  justify-content: center;
}
.product__inventory.visibility-hidden:empty::after,
.product__sku.visibility-hidden::after {
  content: "#";
}
.icon-with-text {
  --icon-size: calc(var(--font-heading-scale) * 3rem);
  --icon-spacing: calc(var(--font-heading-scale) * 1rem);
}
.icon-with-text--horizontal {
  display: flex;
  justify-content: center;
  column-gap: 3rem;
  flex-direction: row;
}
.icon-with-text--vertical {
  --icon-size: calc(var(--font-heading-scale) * 2rem);
}
.icon-with-text .icon {
  fill: rgb(var(--color-foreground));
  height: var(--icon-size);
  width: var(--icon-size);
}
.icon-with-text--horizontal .icon,
.icon-with-text--horizontal img {
  margin-bottom: var(--icon-spacing);
}
.icon-with-text--vertical .icon {
  min-height: var(--icon-size);
  min-width: var(--icon-size);
  margin-right: var(--icon-spacing);
}
.icon-with-text img {
  height: var(--icon-size);
  width: var(--icon-size);
  object-fit: contain;
}
.icon-with-text--vertical img {
  margin-right: var(--icon-spacing);
}
.icon-with-text--horizontal .h4 {
  padding-top: calc(var(--icon-size) + var(--icon-spacing));
  text-align: center;
}
.icon-with-text--horizontal svg + .h4,
.icon-with-text--horizontal img + .h4,
.icon-with-text--horizontal.icon-with-text--text-only .h4 {
  padding-top: 0;
}
.icon-with-text__item {
  display: flex;
  align-items: center;
}
.icon-with-text--horizontal .icon-with-text__item {
  flex-direction: column;
  width: 33%;
}
.icon-with-text--vertical .icon-with-text__item {
  margin-bottom: var(--icon-size);
}
.product-media-container {
  --aspect-ratio: var(--preview-ratio);
  --ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
  position: relative;
  width: 100%;
  max-width: calc(100% - calc(var(--media-border-width) * 2));
}
.product-media-container.constrain-height {
  --viewport-offset: 400px;
  --constrained-min-height: 300px;
  --constrained-height: max(
    var(--constrained-min-height),
    calc(100vh - var(--viewport-offset))
  );
  margin-right: auto;
  margin-left: auto;
}
.product-media-container.constrain-height.media-fit-contain {
  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
  width: min(var(--contained-width), 100%);
}
.product-media-container .media {
  padding-top: var(--ratio-percent);
}
.product-media-container.constrain-height .media {
  padding-top: min(var(--constrained-height), var(--ratio-percent));
}
.recipient-form {
  --recipient-checkbox-margin-top: 0.64rem;
  display: block;
  position: relative;
  max-width: 44rem;
  margin-bottom: 2.5rem;
}
.recipient-form-field-label {
  margin: 0.6rem 0;
}
.recipient-form-field-label--space-between {
  display: flex;
  justify-content: space-between;
}
.recipient-checkbox {
  flex-grow: 1;
  font-size: 1.6rem;
  display: flex;
  word-break: break-word;
  align-items: flex-start;
  max-width: inherit;
  position: relative;
}
.recipient-form > input[type="checkbox"] {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  margin: var(--recipient-checkbox-margin-top) 0;
  top: 0;
  left: 0;
  z-index: -1;
  appearance: none;
  -webkit-appearance: none;
}
.recipient-fields__field {
  margin: 0 0 2rem;
}
.recipient-fields .field__label {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 3.5rem);
  overflow: hidden;
}
.recipient-checkbox > svg {
  margin-top: var(--recipient-checkbox-margin-top);
  margin-right: 1.2rem;
  flex-shrink: 0;
}
.recipient-form .icon-checkmark {
  visibility: hidden;
  position: absolute;
  left: 0.28rem;
  z-index: 5;
  top: 0.4rem;
}
.recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
  visibility: visible;
}
.recipient-fields hr {
  margin: 1.6rem auto;
}
.recipient-form > input[type="checkbox"]:checked ~ .recipient-fields {
  display: block;
  animation: animateMenuOpen var(--duration-default) ease;
}
.js .recipient-email-label.required,
.no-js .recipient-email-label.optional,
.recipient-form ul a {
  display: inline;
}
.recipient-form ul {
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding-left: 4.4rem;
  text-align: left;
}
.recipient-form .error-message::first-letter {
  text-transform: capitalize;
}
.product__info-wrapper {
  padding-left: 0;
  padding-bottom: 0;
}
.product-form__input {
  flex: 0 0 100%;
  padding: 0;
  margin: 0 0 1.2rem;
  max-width: 37rem;
  min-width: fit-content;
  border: none;
}
.product-form__input input[type="radio"]:disabled + label {
  border-color: rgba(var(--color-foreground), 0.1);
  color: rgba(var(--color-foreground), 0.4);
  text-decoration: line-through;
}
.product__media-icon,
.thumbnail__badge {
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  position: absolute;
  left: calc(0.4rem + var(--media-border-width));
  top: calc(0.4rem + var(--media-border-width));
  z-index: 1;
  transition: color var(--duration-short) ease,
    opacity var(--duration-short) ease;
}
.product__media-item {
  margin: auto;
}
.product__media-toggle::after {
  content: "";
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
}
.product__media-toggle:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem rgba(var(--color-foreground), 0.5);
  border-radius: var(--media-radius) - var(--media-border-width);
}
.product__media-toggle:focus-visible:after {
  border-radius: var(--media-radius);
}
.product-popup-modal__button {
  font-size: 1.6rem;
  padding-right: 1.3rem;
  padding-left: 0;
  height: 4.4rem;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}
.thumbnail img {
  pointer-events: none;
}
.thumbnail--narrow img {
  height: 100%;
  width: auto;
  max-width: 100%;
}
.thumbnail--wide img {
  height: auto;
  width: 100%;
}
.slider-mobile-gutter {
  width: 100%;
  position: relative;
  display: block;
}
.slider-mobile-gutter .slider--mobile {
  position: relative;
  flex-wrap: inherit;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
}
.thumbnail-slider {
  width: calc(100% / 5);
}
main-slider .button-icon {
  top: 50%;
  width: 50px !important;
  height: 50px !important;
  transform: translateY(-50%);
  display: block;
}
.main-button--prev {
  left: 0;
}
slider-component .mobile-button {
  background: rgba(0, 0, 0, 0.3);
  max-height: 100%;
  height: unset;
  width: 5vw;
  position: relative;
}
slider-component .mobile-button > .icon {
  height: 15px;
  fill: var(--btn-color);
}
.mobile-slider .thumbnail-list {
  margin: auto 10px;
}
.slider-button[disabled] .icon {
  fill: rgba(var(--color-foreground), 0.3);
}
@media only screen and (min-width: 750px) {
  .slider-mobile-gutter .slider-buttons {
    display: none !important;
  }
  .slider-mobile-gutter .grid__item {
    width: 100%;
  }
}
@media only screen and (max-width: 749px) {
  .slider-mobile-gutter {
    width: 80%;
    margin: auto !important;
  }
  .product__media-item:not(:first-child) {
    margin: 1rem !important;
  }
  .slider.slider--mobile {
    margin-bottom: 0 !important;
  }
  .slider-buttons.no-js-hidden.quick-add-hidden {
    display: flex !important;
    height: 50px;
    width: 100% !important;
  }
}
main-slider .main-button--prev > .icon,
.mobile-button.slider-button--prev .icon,
main-slider .main-button--next > .icon,
.mobile-button.slider-button--next .icon{
  rotate: 90deg;
  scale: 3;
}
.main-button--next {
  right: 0;
}
.slider-mobile-gutter .button-icon {
  background: rgba(0, 0, 0, 0.3);
  position: absolute !important;
  width: 100%;
  height: 5%;
  z-index: 1 !important;
}
.slider-mobile-gutter .button-icon:not([disabled]):hover {
  background: #000;
}
.slider-button[disabled] {
  background: rgba(255, 255, 255, 0.5);
}
.button-icon .icon {
  fill: var(--btn-color);
  height: 15px !important;
  display: flex;
  margin: auto;
}
main-slider .main-button--prev:not([disabled]):hover > .icon,
.mobile-button.slider-button--prev:not([disabled]):hover .icon,
main-slider .main-button--next:not([disabled]):hover > .icon,
.mobile-button.slider-button--next:not([disabled]):hover .icon,
thumbnail-slider .slider-button--prev:not([disabled]):hover .icon,
thumbnail-slider .slider-button--next:not([disabled]):hover .icon {
  scale: 3.1;
}
.thumbnail-button.slider-button--prev > .icon,
.thumbnail-button.slider-button--next > .icon{
  rotate: -180deg;
  scale: 3;
}
.thumbnail-button.slider-button--prev,
.thumbnail-button.slider-button--next {
    width: 100%;
    height: 30px;
    border: 1px solid;
}
button.slider-button.thumbnail-button.slider-button--prev {
  width: 100%;
  height: 30px;
  border: 1px solid;
}
 
.thumbnail-list.slider.slider--tablet-up {
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth;
  scroll-padding-left: 1rem;
  width: 100%;
}
.thumbnail-slider .slider-button--next {
  bottom: 0;
}
.product__media-list .product__media-icon {
  display: none !important;
}
.thumbnail-slider {
  max-width: 7vw;
  max-height: 38vw;
  min-width: 75px;
  min-height: 415px;
  width: 150px;
  height: 580px;
}
@supports (-webkit-touch-callout: none) {
  .main-button--prev,
  .main-button--next,
  [mobile-slider],
  .slider-buttons,
  thumbnail-slider {
    display: none !important;
  }
  .slider.slider--mobile {
    overflow-x: scroll !important;
  }
  .product__media-item {
    width: 400px !important;
  }
}
/* Additional code */
@media screen and (min-width: 750px) {
  slider-component.slider-mobile-gutter {
    display: none;
  }
  main-slider.slider-mobile-gutter {
    display: flex;
  }
}
@media screen and (max-width: 749px) {
  main-slider.slider-mobile-gutter {
    display: none;
  }
  slider-component.slider-mobile-gutter {
    display: block;
    gap: 1rem;
  }
}
media-gallery.product__column-sticky {
  display: flex;
}
main-slider.slider-mobile-gutter.more--media {
  width: 80%;
}
main-slider.slider-mobile-gutter {
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
thumbnail-slider.thumbnail-slider {
  width: 20%;
}
ul.product__media-list.contains-media,
thumbnail-slider.thumbnail-slider.slider-mobile-gutter .thumbnail-list__item.slider__slide, 
thumbnail-slider .thumbnail-list.list-unstyled.slider {
  width: 100%;
}
thumbnail-slider.thumbnail-slider .thumbnail-list.slider--tablet-up {
  scroll-padding-top: 0.5rem;
}
.is-active {
  display: block !important;
}


    4. Next, we have to add our own Javascript code. Open the global.js under the Assets folder and paste the code at the very bottom of the file.

    class MainSlider extends SliderComponent {
  constructor() {
    super();
    this.mediaGallery = document.querySelector('media-gallery');
    this.thumbnailSlider = document.querySelector('thumbnail-slider');
 
    this.zoomItems = this.querySelectorAll('modal-opener');
    this.zoomItems.forEach(item => this.zoom(item));
 
    this.current = 0;
  }  
   zoom(item) {
      const mediaSmall = window.matchMedia('( min-width: 481px )');
      item.style.overflow = 'hidden';
      const zoomImg = item.querySelector('.product__media');;
 
      if (mediaSmall.matches) {
          item.addEventListener("mouseout", function() {
              zoomImg.style.transform = 'scale(1)';
          });
 
          item.addEventListener("mouseover", function() {
              zoomImg.style.transform = 'scale(1.8)';
          })
 
          item.addEventListener("mousemove", function(e) {
              const itemWidth = zoomImg.getBoundingClientRect().width;
              const itemLeft = zoomImg.getBoundingClientRect().left;
              const itemHt = zoomImg.getBoundingClientRect().height;
              const itemTop = zoomImg.getBoundingClientRect().top + window.scrollY;
              const translateX = Math.round((e.pageX - itemLeft) / itemWidth * 100);
              const translateY = Math.round((e.pageY - itemTop) / itemHt * 100);
              zoomImg.style.transformOrigin = `${translateX}% ${translateY}%`;
          });
      }
  }
 
  onButtonClick(event) {   
    event.preventDefault();
    if(event.currentTarget.name === 'next' ) {
      if(this.current < this.sliderItems.length - 1) {
         this.current = this.current + 1;
      } else {
        this.current = 0;
      }
    } else {
      if(this.current <= 0) {
         this.current = this.sliderItems.length - 1
      } else {
        this.current = this.current - 1;
      }
    }
 
    this.sliderItems.forEach(item => item.classList.remove('is-active'));
    this.sliderItems[this.current].classList.add('is-active');
 
    const mediaId = this.sliderItems[this.current].dataset.mediaId;
    if (!this.thumbnailSlider) return;
    const activeThumbnail = this.thumbnailSlider.querySelector(`[data-target="${ mediaId }"]`);
 
    this.slideScrollPosition = Math.floor(this.thumbnailSlider.sliderItems[0].clientWidth * this.current);
    this.thumbnailSlider.slider.scrollTo({top: this.slideScrollPosition});
 
    this.mediaGallery.setActiveThumbnail(activeThumbnail);
  }
}
 
customElements.define('main-slider', MainSlider);
class ThumbnailSlider extends SliderComponent {
  constructor() {
    super();
  }
 
  initPages() {
    this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
    if (this.sliderItemsToShow.length < 2) return;
    this.sliderItemOffset = this.sliderItemsToShow[1].offsetTop - this.sliderItemsToShow[0].offsetTop;
    this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetTop) / this.sliderItemOffset);
    this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
    this.update();
  }
 
  update() {
    if (!this.slider || !this.nextButton) return;
 
    const previousPage = this.currentPage;
    this.currentPage = Math.round(this.slider.scrollTop/ this.sliderItemOffset) + 1;
 
    if (this.currentPageElement && this.pageTotalElement) {
      this.currentPageElement.textContent = this.currentPage;
      this.pageTotalElement.textContent = this.totalPages;
    }
 
    if (this.currentPage != previousPage) {
      this.dispatchEvent(new CustomEvent('slideChanged', { detail: {
        currentPage: this.currentPage,
        currentElement: this.sliderItemsToShow[this.currentPage - 1]
      }}));
    }
 
    if (this.enableSliderLooping) return;
 
    if (this.isSlideVisible(this.sliderItemsToShow[0]) && this.slider.scrollTop === 0) {
      this.prevButton.setAttribute('disabled', 'disabled');
    } else {
      this.prevButton.removeAttribute('disabled');
    }
 
    if (this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1])) {
      this.nextButton.setAttribute('disabled', 'disabled');
    } else {
      this.nextButton.removeAttribute('disabled');
    }
  }
 
  isSlideVisible(element, offset = 0) {
    const lastVisibleSlide = this.slider.clientHeight + this.slider.scrollTop - offset;
    return (element.offsetTop + element.clientHeight) <= lastVisibleSlide && element.offsetTop >= this.slider.scrollTop;
  }
 
  onButtonClick(event) {
    event.preventDefault();
    const step = event.currentTarget.dataset.step || 1;
    this.slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollTop + (step * this.sliderItemOffset) : this.slider.scrollTop - (step * this.sliderItemOffset);
    this.slider.scrollTo({
      top: this.slideScrollPosition
    });
  }
}
 
customElements.define('thumbnail-slider', ThumbnailSlider);

     

    Conclusion: By following our guide, you'll add a touch of sophistication and functionality to your Shopify store, making your product pages more interactive and engaging for your customers. If you have any questions or need further assistance, feel free to Shopify's Chat with us or visit our Contact page. Let's transform your product display into an immersive shopping experience!

    That's it. I hope it didn't make you sweat. (",)

    Copied!
    Voltar para o blogue

    10 comentários

    @Max Be aware that with the new version of Dawn, a thumbnail slider is already available, that is the reason I only created a vertical slider

    Made4Uo

    Hi there!
    Is it possible to also have a horizontal slider unter the picture?
    Because vertical doesn’t look well for my page.
    Kind regards
    Max

    Max

    Hi, why vertical-media-gallery.js is not included/referenced in main-product.liquid? also on iOS devices, after implementing the code, I was not able to swipe up and down on product pages. Dawn version 4.0.0

    Sophia

    Can you tell me how can we make them Fade effect on slides?

    Muhammad Naveed

    Please make sure you are copying the code. The javascript is responsible for buttons to work. If this doesn’t work then you are missing that code or might have an error.

    Made4uo

    Deixe um comentário