Custom mobile only and desktop only slideshows - Debut theme

Valeria_Kuznets
Tourist
19 0 2

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"
          },
          {
            "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"
          },
          {
            "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.

🙂

Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂
Replies 25 (25)

Priyanka6
Explorer
39 1 12

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
Visitor
2 0 1

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

shopsers
Visitor
1 0 0

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

Valeria_Kuznets
Tourist
19 0 2

@shopsers / @Dsol  / @eilidh 

 

do you still need help?

pls email me at:

valery.k18@gmail.com
Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂
Edgars_Rudzitis
Excursionist
33 0 3

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
Excursionist
33 0 3

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

Dsol
Visitor
1 0 0

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

eilidh
Visitor
1 0 0

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:

 

Screen Shot 2019-08-14 at 12.44.52.png

lony
Visitor
1 0 0

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

Valeria_Kuznets
Tourist
19 0 2
the code i wrote is no longer working, the theme was updated since then so
my code is old.
Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂
arvidmueller
Tourist
42 0 1

Do you habe the new one?

Edgars_Rudzitis
Excursionist
33 0 3

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

Valeria_Kuznets
Tourist
19 0 2
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
Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂

stassiav
Visitor
1 0 0
Hey there, does this work for all themes or only debut?

Thanks for taking your time on this!
emilieatypique
Tourist
13 0 1

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
Tourist
10 0 0

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
Tourist
19 0 2
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.
Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂
Balboshy
Tourist
10 0 0

Thanks, hopefully this will solve it 

emilieatypique
Tourist
13 0 1

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 !

 

Balboshy
Tourist
10 0 0

I am not good at all in coding as well but searching for a way to make it. If I figured it out, will send you immediately. 

AlohaAkahai
Shopify Partner
68 3 25

This is very simple to do. You just wrap original code in Div and Id with mobile or desktop 

Then use css @media tag to tell browser to display on desktop or mobile. CSS does all the work. 

 

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Michele19
Visitor
2 0 0

è possibile aggiungere un video per la slideshow?

Valeria_Kuznets
Tourist
19 0 2
hi, this code is very old
not working with the new theme
Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂

made4Uo
Shopify Partner
3804 713 1124

For future viewers, 

 

You can easily do this by adding a simple code snippet in your section. It can work on any section and of course slideshow, also it does not matter on what theme you have. Just follow the simple steps on the video

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
rrrrrrrr
Shopify Partner
1 0 0

Hi @made4Uo 
I tried your solution and then I got my page crush 

rrrrrrrr_0-1669115739617.png

but your solution does work
only make this error that crushed my website
when I'm adding the CSS part 
the CSS part is causing this problem...
Do you know how can I fix it ?