Custom mobile only and desktop only slideshows - Debut theme

[Valeria_Kuznets]

Hi, so after looking for solution online I managed to edit the code by myself and created 2 new slides (one for mobile and one for desktop), I used the basic slideshow code to define the new ones.

Basically this is crated to allow load different images when your website is loaded on mobile phone.

The dimensions I use for my images are:

Mobile 800X800

Desktop 1900X1188

Go to Edit code on your website and in the Sections folder, choose Create new section:

Call the file: index-slideshow-mobile

Use the Create section button to complete.

Erase all the default code that’s generated.

Replace with all the code:

<div class="slideshow-mobile" data-section-id="{{ section.id }}" data-section-type="slideshow-section">

  {% if section.blocks.size > 0 %}
    <div class="slideshow-wrapper">
      <button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
        <span class="slideshow__pause-stop">
          {% include 'icon-pause' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
        </span>
        <span class="slideshow__pause-play">
          {% include 'icon-play' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
        </span>
      </button>

      <div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
        {% for block in section.blocks %}
          {%- assign is_background_video = false -%}
          {% if block.type == 'video' %}
            {% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
              {%- assign is_background_video = true -%}
            {% endif %}
          {% endif %}

          <div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
            {% if block.settings.link != blank %}
              <a href="{{ block.settings.link }}" class="slideshow__link">
            {% endif %}

            {% if block.type == 'video' %}
              {% if block.settings.video_url != blank %}
                <div class="video-loader"></div>
              {% endif %}
              {% unless block.settings.video_type == 'background' %}
                <button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
                  {% include 'icon-close' %}
                  <span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
                </button>
              {% endunless %}
              {% if block.settings.video_url != blank %}
                <div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
                  data-id="{{ block.settings.video_url.id }}"
                  data-type="{{ block.settings.video_type }}"
                  data-slideshow="Slideshow-{{ section.id }}"></div>
              {% endif %}
            {% endif %}

            {% if block.settings.image == blank %}
              <div class="slideshow__image js">
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              </div>
            {% else %}
              <div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="cover"
                   style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
              </div>
            {% endif %}

            <noscript>
              <div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
                {% if block.settings.image == blank %}
                  <div class="placeholder-background">
                    {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                    {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                {% endif %}
              </div>
            </noscript>
            <div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
              <div class="slideshow__text-content">
                <div class="page-width">
                  {% unless block.settings.title == blank %}
                    <h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                      {{ block.settings.title | escape }}
                    </h2>
                  {% endunless %}
                  {% unless block.settings.subheading == blank %}
                    <span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                      {{ block.settings.subheading | escape }}
                    </span>
                  {% endunless %}
                  {% if block.type == 'video' %}
                    {% unless block.settings.video_type == 'background' %}
                      <div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
                        <button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
                          {% include 'icon-play-video' %}
                          <span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
                        </button>
                      </div>
                    {% endunless %}
                  {% endif %}
                </div>
              </div>
            </div>

            {% if block.settings.link != blank %}
              </a>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'homepage.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": {
      "en": "Slideshow Mobile",
      "de": "Slideshow Mobile",
      "fr": "Slideshow Mobile"
    },
    "class": "index-section index-section--flush",
    "max_blocks": 8,
    "settings": [
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": {
          "en": "Auto-rotate slides",
          "de": "Auto-rotieren der Slides",
          "fr": "Rotation automatique des diapositives"
        },
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": {
          "en": "Change slides every",
          "de": "Slides überall ändern",
          "fr": "Changer de diapositive toutes les"
        },
        "max": 10,
        "min": 5,
        "step": 1,
        "unit": {
          "en": "sec",
          "de": "sek",
          "fr": "sec"
        },
        "default": 7
      },
      {
        "type": "select",
        "id": "slideshow_height",
        "label": {
          "en": "Section height",
          "de": "Höhe des Bereichs",
          "fr": "Taille de la section"
        },
        "default": "small",
        "options": [
          {
            "label": {
              "en": "Small",
              "de": "Klein",
              "fr": "Petite"
            },
            "value": "small"
          },
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      },
      {
        "type": "select",
        "id": "text_size",
        "label": {
          "en": "Text size",
          "de": "Textgröße",
          "fr": "Taille du texte"
        },
        "default": "medium",
        "options": [
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": {
          "en": "Image slide",
          "de": "Foto-Slide",
          "fr": "Diapositive (image)"
        },
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            }
          },
          {
            "type": "select",
            "id": "alignment",
            "label": {
              "en": "Image alignment",
              "de": "Fotoausrichtung",
              "fr": "Alignement de l'image"
            },
            "default": "top",
            "options": [
              {
                "value": "top",
                "label": {
                  "en": "Top",
                  "de": "Oben",
                  "fr": "Haut"
                }
              },
              {
                "value": "center",
                "label": {
                  "en": "Middle",
                  "de": "Mitte",
                  "fr": "Milieu"
                }
              },
              {
                "value": "bottom",
                "label": {
                  "en": "Bottom",
                  "de": "Unten",
                  "fr": "Bas"
                }
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Image slide",
              "de": "Foto-Slide",
              "fr": "Diapositive (image)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          },
          {
            "type": "url",
            "id": "link",
            "label": {
              "en": "Slide link",
              "de": "Slide-Link",
              "fr": "Lien de la diapositive"
            }
          }
        ]
      },
      {
        "type": "video",
        "name": {
          "en": "Video slide",
          "de": "Video-Slide",
          "fr": "Diapositive (vidéo)"
        },
        "settings": [
          {
            "type": "video_url",
            "id": "video_url",
            "label": {
              "en": "Video link",
              "de": "Video-Link",
              "fr": "Lien de la vidéo"
            },
            "accept": ["youtube"],
            "default": "https:\/\/[www.youtube.com\/watch?v=_9VUPq3SxOc](http://www.youtube.com\/watch?v=_9VUPq3SxOc)"
          },
          {
            "type": "select",
            "id": "video_type",
            "label": {
              "en": "Style",
              "de": "Stil",
              "fr": "Style"
            },
            "options": [
              {
                "value": "chrome",
                "label": {
                  "en": "Image with play button",
                  "de": "Foto mit Play Button",
                  "fr": "Image avec bouton de lecture"
                }
              },
              {
                "value": "background-chrome",
                "label": {
                  "en": "Background video with play button",
                  "de": "Hintergrund-Video mit Play Button",
                  "fr": "Vidéo d'arrière-plan avec bouton de lecture"
                }
              },
              {
                "value": "background",
                "label": {
                  "en": "Background video",
                  "de": "Hintergrund-Video",
                  "fr": "Vidéo d'arrière-plan"
                }
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            },
            "info": {
              "en": "Fallback when autoplaying video is not supported on mobile devices",
              "de": "Ersatz, falls Video nicht automatisch auf Mobilgeräten abspielt",
              "fr": "Image affichée lorsque la vidéo n'est pas supportée sur les appareils mobiles"
            }
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Video slide",
              "de": "Video-Slide",
              "fr": "Diapositive (vidéo)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          }
        ]
      }
    ],
    "presets": [{
      "name": {
        "en": "Slideshow Mobile",
        "de": "Slideshow Mobile",
        "fr": "Slideshow Mobile"
      },
      "category": {
        "en": "Image",
        "de": "Foto",
        "fr": "Image"
      },
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }]
  }
{% endschema %}

Save the file.

Next, create a second section file:

In the Sections folder, choose Create new section:

Call the file: index-slideshow-desktop

Use the Create section button to complete.

Erase all the default code that’s generated:

Replace with all the code:

<div class="slideshow-desktop" data-section-id="{{ section.id }}" data-section-type="slideshow-section">

  {% if section.blocks.size > 0 %}
    <div class="slideshow-wrapper">
      <button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
        <span class="slideshow__pause-stop">
          {% include 'icon-pause' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
        </span>
        <span class="slideshow__pause-play">
          {% include 'icon-play' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
        </span>
      </button>

      <div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
        {% for block in section.blocks %}
          {%- assign is_background_video = false -%}
          {% if block.type == 'video' %}
            {% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
              {%- assign is_background_video = true -%}
            {% endif %}
          {% endif %}

          <div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
            {% if block.settings.link != blank %}
              <a href="{{ block.settings.link }}" class="slideshow__link">
            {% endif %}

            {% if block.type == 'video' %}
              {% if block.settings.video_url != blank %}
                <div class="video-loader"></div>
              {% endif %}
              {% unless block.settings.video_type == 'background' %}
                <button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
                  {% include 'icon-close' %}
                  <span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
                </button>
              {% endunless %}
              {% if block.settings.video_url != blank %}
                <div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
                  data-id="{{ block.settings.video_url.id }}"
                  data-type="{{ block.settings.video_type }}"
                  data-slideshow="Slideshow-{{ section.id }}"></div>
              {% endif %}
            {% endif %}

            {% if block.settings.image == blank %}
              <div class="slideshow__image js">
                <div class="placeholder-background">
                  {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                  {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                </div>
              </div>
            {% else %}
              <div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="cover"
                   style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
              </div>
            {% endif %}

            <noscript>
              <div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
                {% if block.settings.image == blank %}
                  <div class="placeholder-background">
                    {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                    {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                {% endif %}
              </div>
            </noscript>
            <div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
              <div class="slideshow__text-content">
                <div class="page-width">
                  {% unless block.settings.title == blank %}
                    <h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                      {{ block.settings.title | escape }}
                    </h2>
                  {% endunless %}
                  {% unless block.settings.subheading == blank %}
                    <span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                      {{ block.settings.subheading | escape }}
                    </span>
                  {% endunless %}
                  {% if block.type == 'video' %}
                    {% unless block.settings.video_type == 'background' %}
                      <div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
                        <button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
                          {% include 'icon-play-video' %}
                          <span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
                        </button>
                      </div>
                    {% endunless %}
                  {% endif %}
                </div>
              </div>
            </div>

            {% if block.settings.link != blank %}
              </a>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'homepage.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": {
      "en": "Slideshow Desktop",
      "de": "Slideshow Desktop",
      "fr": "Slideshow Desktop"
    },
    "class": "index-section index-section--flush",
    "max_blocks": 8,
    "settings": [
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": {
          "en": "Auto-rotate slides",
          "de": "Auto-rotieren der Slides",
          "fr": "Rotation automatique des diapositives"
        },
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": {
          "en": "Change slides every",
          "de": "Slides überall ändern",
          "fr": "Changer de diapositive toutes les"
        },
        "max": 10,
        "min": 5,
        "step": 1,
        "unit": {
          "en": "sec",
          "de": "sek",
          "fr": "sec"
        },
        "default": 7
      },
      {
        "type": "select",
        "id": "slideshow_height",
        "label": {
          "en": "Section height",
          "de": "Höhe des Bereichs",
          "fr": "Taille de la section"
        },
        "default": "small",
        "options": [
          {
            "label": {
              "en": "Small",
              "de": "Klein",
              "fr": "Petite"
            },
            "value": "small"
          },
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      },
      {
        "type": "select",
        "id": "text_size",
        "label": {
          "en": "Text size",
          "de": "Textgröße",
          "fr": "Taille du texte"
        },
        "default": "medium",
        "options": [
          {
            "label": {
              "en": "Medium",
              "de": "Mittel",
              "fr": "Moyenne"
            },
            "value": "medium"
          },
          {
            "label": {
              "en": "Large",
              "de": "Groß",
              "fr": "Grande"
            },
            "value": "large"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": {
          "en": "Image slide",
          "de": "Foto-Slide",
          "fr": "Diapositive (image)"
        },
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            }
          },
          {
            "type": "select",
            "id": "alignment",
            "label": {
              "en": "Image alignment",
              "de": "Fotoausrichtung",
              "fr": "Alignement de l'image"
            },
            "default": "top",
            "options": [
              {
                "value": "top",
                "label": {
                  "en": "Top",
                  "de": "Oben",
                  "fr": "Haut"
                }
              },
              {
                "value": "center",
                "label": {
                  "en": "Middle",
                  "de": "Mitte",
                  "fr": "Milieu"
                }
              },
              {
                "value": "bottom",
                "label": {
                  "en": "Bottom",
                  "de": "Unten",
                  "fr": "Bas"
                }
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Image slide",
              "de": "Foto-Slide",
              "fr": "Diapositive (image)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          },
          {
            "type": "url",
            "id": "link",
            "label": {
              "en": "Slide link",
              "de": "Slide-Link",
              "fr": "Lien de la diapositive"
            }
          }
        ]
      },
      {
        "type": "video",
        "name": {
          "en": "Video slide",
          "de": "Video-Slide",
          "fr": "Diapositive (vidéo)"
        },
        "settings": [
          {
            "type": "video_url",
            "id": "video_url",
            "label": {
              "en": "Video link",
              "de": "Video-Link",
              "fr": "Lien de la vidéo"
            },
            "accept": ["youtube"],
            "default": "https:\/\/[www.youtube.com\/watch?v=_9VUPq3SxOc](http://www.youtube.com\/watch?v=_9VUPq3SxOc)"
          },
          {
            "type": "select",
            "id": "video_type",
            "label": {
              "en": "Style",
              "de": "Stil",
              "fr": "Style"
            },
            "options": [
              {
                "value": "chrome",
                "label": {
                  "en": "Image with play button",
                  "de": "Foto mit Play Button",
                  "fr": "Image avec bouton de lecture"
                }
              },
              {
                "value": "background-chrome",
                "label": {
                  "en": "Background video with play button",
                  "de": "Hintergrund-Video mit Play Button",
                  "fr": "Vidéo d'arrière-plan avec bouton de lecture"
                }
              },
              {
                "value": "background",
                "label": {
                  "en": "Background video",
                  "de": "Hintergrund-Video",
                  "fr": "Vidéo d'arrière-plan"
                }
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": {
              "en": "Image",
              "de": "Foto",
              "fr": "Image"
            },
            "info": {
              "en": "Fallback when autoplaying video is not supported on mobile devices",
              "de": "Ersatz, falls Video nicht automatisch auf Mobilgeräten abspielt",
              "fr": "Image affichée lorsque la vidéo n'est pas supportée sur les appareils mobiles"
            }
          },
          {
            "type": "text",
            "id": "title",
            "label": {
              "en": "Heading",
              "de": "Titel",
              "fr": "En-tête"
            },
            "default": {
              "en": "Video slide",
              "de": "Video-Slide",
              "fr": "Diapositive (vidéo)"
            }
          },
          {
            "type": "text",
            "id": "subheading",
            "label": {
              "en": "Subheading",
              "de": "Untertitel",
              "fr": "Sous-titre"
            },
            "default": {
              "en": "Tell your brand's story through video and images",
              "de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
              "fr": "Racontez votre histoire avec des vidéos et des images"
            }
          }
        ]
      }
    ],
    "presets": [{
      "name": {
        "en": "Slideshow Desktop",
        "de": "Slideshow Desktop",
        "fr": "Slideshow Desktop"
      },
      "category": {
        "en": "Image",
        "de": "Foto",
        "fr": "Image"
      },
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }]
  }
{% endschema %}

Open your theme.scss.liquid file

at the end add the following code:

@media screen and (max-width:749px){
    .slideshow-desktop {display:none;
        display: none;
    }
}

@media screen and (min-width:750px){
    .slideshow-mobile {display:none;
        display: none;
    }
}

Thats it, now do to “Customize” on your theme and you will see under “Sections”:

• Slideshow Desktop
• Slideshow Mobile

Add both of them to your website and load 800X800 images on Mobile slideshow and 1900X1188 on Desktop slideshow.

[Priyanka6]

Hi Valeria,

So you don’t want to show the mobile image section on desktop and Desktop image section on the mobile right?

Please let me know.

Thanks.

Regards,
Priyanka.

[Kaitlin]

This is great! do you have the same code for the Brooklyn theme??

[shopsers]

Hi Valeria,

first of all, I would like to thank you for taking your time with this. It works perfect for me but I have one additional question. Is there any possible way to add “Adapt to first image” option in slide/section height like it is in original theme under “slideshow” element/section?

Thanks!

I hope it’s clear what I want

Vasja

[Dsol]

Hello, it is not working and followed the instructions properly. any thing I’m missing?

[eilidh]

Hey! Thank you for this!

I’ve followed the steps you posted but I’m still having some issues. Both slideshows (mobile and desktop version) elements seem to load into the page, and I can see they are pulling images but nothing is displayed. Basically, I can see the space where the slideshow should be, and I can see it loading if I inspect it but the slideshow itself doesn’t seem to be working. Any ideas?

These are the errors I get in Console:

[Valeria_Kuznets]

@shopsers / @Dsol / @eilidh

do you still need help?

pls email me at:

valery.k18@gmail.com

[Edgars_Rudzitis]

I did everything as described and it works although my desktop images are super low quality now.

www.enammo.com

Can you help me?

[Edgars_Rudzitis]

Found another glitch - first slideshow picture is showing but next ones do not.

[lony]

I followed all the steps but the options to chose do not appear under the Section when I go to customise.

[Valeria_Kuznets]

the code i wrote is no longer working, the theme was updated since then so
my code is old.

[arvidmueller]

Do you habe the new one?

[Edgars_Rudzitis]

Yeah it’s working but i suggest you to contact Valeria as she edited my code

[Valeria_Kuznets]

Hey, due to themes updates my fix is not working properly. In order to make
it work it needs to be customized to your current theme

[stassiav]

Hey there, does this work for all themes or only debut?

Thanks for taking your time on this!

[emilieatypique]

Hello everyone,

I’m new in Shopify. I’m using Debut theme and I would like to create 2 sections for the slideshow, one in mobile and the other one in desktop, as all my images are cropping and this is horrible.

Or maybe, is it possible to avoid cropping the images ?

Do you have the code for this ?

Thank you !

Emilie

[Balboshy]

Have the same problem.

I don’t mind making both mobile and desktop the same but I expect the image adapt/respond differently with each screen instead of being stretched or cropped.

[Valeria_Kuznets]

Hi. my solution is no longer working because the theme was updated.
you need to duplicate the slideshow section and make one for desktop and
one for mobile.
give to each one a class that will hide them on different screen resolution.
for example to hide the mobile on 720px and up
and hide the desktop on 720px and down.

[Balboshy]

Thanks, hopefully this will solve it

[emilieatypique]

Thanks Valeria !

Unfortunately I’m really bad with coding as I don’t know anything !

Will it be possible to have directly the new code to paste it in the theme.css from you or @Balboshy ?

Thank you very much for your help !