Different images for mobile than desktop web

Solved
New Member
1 0 0

Hi Ninthony,

 

I managed to get the schema edits showing up correctly in the customizer however can't get the html portion to show the mobile image. 

 

I'm editing slideshow.liquid in the Debut theme - i'm guessing the code required is slightly different.

 

Any thoughts?

 

{%- if section.settings.slideshow_height == 'adapt' -%}
  {% comment %}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'slideshow_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {% endcomment %}

  {%- assign first_block = section.blocks[0] -%}
  {%- if first_block.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
  {%- endif -%}
  {% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}

{%- assign text_alignments = section.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  {%- if section.blocks.size > 0 -%}
    <div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1">
      <div class="slideshow slideshow--{{ section.settings.slideshow_height }}{% if display_controls %} slideshow--display-controls{% endif %}"
           id="Slideshow-{{ section.id }}"
           data-autorotate="{{ section.settings.autorotate }}"
           data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
           data-adapt-height="{% if section.settings.slideshow_height == 'adapt' %}true{% else %}false{% endif %}"
           data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
           {% if section.settings.slideshow_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
           style="height: {{- wrapper_height -}}vw"{% endif %}>

        {%- for block in section.blocks -%}
          <div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}>
            {% 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>
                {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
              </div>
            {% else %}
              <div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
                   data-bgset="{% include 'bgset', image: block.settings.image %}"
                   data-sizes="auto"
                   data-parent-fit="contain"
                   style="background-position: {{ block.settings.alignment }};
                          background-image: url('{{ block.settings.image | img_url: '300x300' }}');">
                {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% 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">
                    {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                {% endif %}
              </div>
            </noscript>

            <div class="slideshow__text-wrap slideshow__text-wrap--desktop">
              <div class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignment }} text-{{ text_horizontal_alignment }}">
                <div class="page-width">
                  {% unless block.settings.slide_title == blank and block.settings.subheading == blank %}
                    <ul class="slideshow__text-content-list">
                      {%- unless block.settings.slide_title == blank -%}
                        <li>
                          <h2 class="h1 mega-title slideshow__title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                            {{ block.settings.slide_title }}
                          </h2>
                        </li>
                      {%- endunless -%}
                      {%- unless block.settings.subheading == blank -%}
                        <li>
                          <span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                            {{ block.settings.subheading }}
                          </span>
                        </li>
                      {%- endunless -%}
                    </ul>
                  {% endunless %}

                  {%- assign show_link_button = false -%}
                  {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                    {%- assign show_link_button = true -%}
                  {%- endif -%}
                  {%- if show_link_button -%}
                    <div class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %}">
                      <a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
                        {{ block.settings.button_label | escape }}
                      </a>
                    </div>
                  {%- endif -%}
                </div>
              </div>
            </div>
          </div>
        {%- endfor -%}
      </div>
      <div class="slideshow__controls">
        {%- if section.blocks.size > 1 -%}
          {%- assign arrows_width = section.blocks.size | times: 18 | plus: 115 -%}
          <div class="slideshow__arrows"
               style="width: {{- arrows_width -}}px">
            <button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
            <button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
          </div>
          {%- if section.settings.autorotate -%}
            <button type="button" class="slideshow__pause" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false">
              <span class="slideshow__pause-stop">
                {% include 'icon-pause' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
              </span>
              <span class="slideshow__pause-rotate">
                {% include 'icon-play' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.rotate_slideshow' | t }}</span>
              </span>
            </button>
          {%- endif -%}
        {%- endif -%}
      </div>
    </div>
    <div class="slideshow__text-wrap slideshow__text-wrap--mobile">
      {% if section.blocks.size > 1 %}
        <div class="slideshow__arrows slideshow__arrows--mobile">
          <button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
          <button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
        </div>
      {% endif %}
      {%- for block in section.blocks -%}
        {%- assign show_text = false -%}
        {%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%}
          {%- assign show_text = true -%}
        {%- endunless -%}
        {%- assign show_link_button = false -%}
        {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
          {%- assign show_link_button = true -%}
        {%- endif -%}
        {%- if show_text or show_link_button -%}
          <div class="slideshow__text-content slideshow__text-content--mobile slideshow__text-content--mobile-{{ forloop.index0 }} text-center">
            <div class="page-width">
              {%- unless block.settings.slide_title == blank -%}
                <h2 class="h1 mega-title slideshow__title slideshow__title--mobile{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                  {{ block.settings.slide_title | escape }}
                </h2>
              {%- endunless -%}
              {%- unless block.settings.subheading == blank -%}
                <span class="mega-subtitle slideshow__subtitle slideshow__subtitle--mobile{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                  {{ block.settings.subheading | escape }}
                </span>
              {%- endunless -%}

              {%- if show_link_button -%}
                <a href="{{ block.settings.button_link }}" class="btn slideshow__btn slideshow__btn--mobile">
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- endif -%}

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

Hi Ninthony (or anyone listening). I am trying to follow your instructions on this post for having different banner images for desktop and mobile viewing of my home page, but I can't figure out where to place the actual html portion in my theme.

0 Likes
Astronaut
1082 147 272

Just posting this for Venture theme, had another user contact me about it so I looked into it and it was fairly easy. Everyone backup your themes before you attempt it. Used on the "Snowboarding" option of Venture, not sure if it matters. Here's the section code for slideshow.liquid:

 

{%- if section.settings.hero_home_height == 'adapt' -%}
  {%- comment -%}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'hero_home_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {%- endcomment -%}

  {%- assign first_block = section.blocks[0] -%}
  {%- if first_block.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
  {%- endif -%}
  {% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}

{% if section.blocks.size > 0 %}
  <div class="hero-wrapper hero-wrapper--{{ section.settings.hero_home_height }}"
       role="region"
       aria-label="slideshow"
       aria-describedby="a11y-slideshow-info">
    <div class="hero hero--{{ section.settings.hero_home_height }}{% if section.settings.hero_home_height == 'adapt' %} hero--adapt-height page-width{% endif %}"
         id="Slideshow-{{ section.id }}"
         data-section-id="{{ section.id }}"
         data-section-type="slideshow"
         data-autoplay="{{ section.settings.hero_home_auto }}"
         data-adapt-height="{% if section.settings.hero_home_height == 'adapt' %}true{% else %}false{% endif %}"
         data-speed="{{ section.settings.hero_home_auto_speed | times: 1000 }}"
         {% if section.settings.hero_home_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
         style="height: {{- wrapper_height -}}vw"{% endif %}>
      {%- for block in section.blocks -%}
        <div class="hero__slide hero__slide--{{ block.id }}" {{ block.shopify_attributes }}>
          <div class="hero__image-content">
            {%- if block.settings.image != blank -%}
              <noscript>
                <div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              </noscript>
              {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              {% assign mobile_img_url = block.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %} hidden-mobile"
                {% if forloop.first == true %}
                  src="{{ block.settings.image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                style="object-position: {{ block.settings.image_position }}">
            <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %} hidden-desktop"
                {% if forloop.first == true %}
                  src="{{ block.settings.mobile_image | img_url: '300x' }}"
                {% endif %}
                data-src="{{ mobile_img_url }}"
                data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                data-sizes="auto"
                data-parent-fit="cover"
                alt="{{ block.settings.image.alt | escape }}"
                style="object-position: {{ block.settings.image_position }}">
            {%- else -%}
              {%- 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 -%}
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>
    <div class="hero-content">
      <div class="page-width">
        <div class="hero-content__title-wrapper">
          {%- if section.settings.hero_home_height == 'adapt' -%}
            <div class="hero-content__inner-text">
          {%- endif -%}
          {%- for block in section.blocks -%}
            {%- unless block.settings.title == blank -%}
              <h2 data-slide-id="{{ forloop.index }}" class="hero-content__title h1{% if section.blocks.size == 1 %} hero-title-active{% endif %}">
                {{ block.settings.title | escape }}
              </h2>
            {%- endunless -%}
          {%- endfor -%}
          {%- if section.settings.hero_home_height == 'adapt' -%}
            </div>
          {%- endif -%}
        </div>
        {%- if section.settings.hero_home_height == 'adapt' -%}
          <div class="hero-content__inner-controls">
        {%- endif -%}
        <div class="hero-content__controls">
          {%- if section.blocks.size > 1 -%}
            <div class="hero-content__controls-item hero-content__controls-item--count" aria-label="{{ 'homepage.hero.slide_number' | t: slide_number: '[slide_number]' }}">
              <span class="slide-counter" aria-hidden="true">1/{{ section.blocks.size }}</span>
            </div>
            {%- if section.settings.hero_home_auto -%}
              <div class="hero-content__controls-item hero-content__controls-item--pause">
                <button type="button" class="hero__pause"
                                      aria-live="polite"
                                      aria-label="{{ 'homepage.hero.pause_slideshow' | t }}"
                                      aria-pressed="false"
                                      data-label-pause="{{ 'homepage.hero.pause_slideshow' | t }}"
                                      data-label-play="{{ 'homepage.hero.play_slideshow' | t }}">
                  <span class="hero-toggle-stop">
                    {% include 'icon-pause' %}
                    <span class="icon__fallback-text">{{ 'homepage.hero.pause_slideshow' | t }}</span>
                  </span>
                  <span class="hero-toggle-play">
                    {% include 'icon-play' %}
                    <span class="icon__fallback-text">{{ 'homepage.hero.play_slideshow' | t }}</span>
                  </span>
                </button>
              </div>
            {%- endif -%}
            <ul class="hero-content-navigation">
              <li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow">
                <button class="text"
                        type="button"
                        data-control="previous"
                        aria-label="{{ 'homepage.hero.previous_slide' | t }}">
                  {% include 'icon-arrow-left' %}
                  <span class="icon__fallback-text">{{ 'homepage.hero.previous_slide' | t }}</span>
                </button>
              </li>
              <li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow">
                <button class="text"
                        type="button"
                        data-control="next"
                        aria-label="{{ 'homepage.hero.next_slide' | t }}">
                  {% include 'icon-arrow-right' %}
                  <span class="icon__fallback-text">{{ 'homepage.hero.next_slide' | t }}</span>
                </button>
              </li>
            </ul>
          {%- endif -%}
          {%- for block in section.blocks -%}
            {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
              <a data-slide-id="{{ forloop.index }}"
                href="{{ block.settings.button_link }}"
                class="hero-content__controls-item hero-content__controls-item--text{% if section.blocks.size == 1 %} hero-link-active{% endif %}">
                {{ block.settings.button_label | escape }} <span aria-hidden="true">&rarr;</span>
              </a>
            {%- endif -%}
          {%- endfor -%}
          {%- if section.settings.hero_home_height == 'adapt' -%}
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}

{% schema %}
{
  "name": {
    "da": "Diasshow",
    "de": "Slideshow",
    "en": "Slideshow",
    "es": "Diapositivas",
    "fi": "Diaesitys",
    "fr": "Diaporama",
    "hi": "स्लाइडशो",
    "it": "Presentazione",
    "ja": "スライドショー",
    "ko": "슬라이드 쇼",
    "ms": "Tayangan slaid",
    "nb": "Lysbildefremvisning",
    "nl": "Diavoorstelling",
    "pt-BR": "Apresentação de slides",
    "pt-PT": "Apresentação de diapositivos",
    "sv": "Bildspel",
    "th": "สไลด์โชว์",
    "zh-CN": "幻灯片",
    "zh-TW": "投影片輪播"
  },
  "class": "shopify-section--slideshow",
  "max_blocks": 4,
  "settings": [
    {
      "type": "select",
      "id": "hero_home_height",
      "label": {
        "da": "Diashøjde",
        "de": "Diahöhe",
        "en": "Slide height",
        "es": "Altura de diapositiva",
        "fi": "Dian korkeus",
        "fr": "Hauteur de la diapositive",
        "hi": "स्लाइड ऊंचाई",
        "it": "Altezza slide",
        "ja": "スライドの高さ",
        "ko": "슬라이드 높이",
        "ms": "Ketinggian slaid",
        "nb": "Lysbildehøyde",
        "nl": "Diahoogte",
        "pt-BR": "Altura do slide",
        "pt-PT": "Altura do diapositivo",
        "sv": "Bildhöjd",
        "th": "ความสูงของสไลด์",
        "zh-CN": "幻灯片高度",
        "zh-TW": "投影片高度"
      },
      "default": "small",
      "info": {
        "da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "de": "Erfahren Sie mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
        "en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "es": "Más información sobre [pautas de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "fi": "Lisätietoja [diaesitysohjeet](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
        "hi": "[स्लाइड शो दिशानिर्देश](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific) के बारे में अधिक जानें.",
        "it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)に関する詳細情報はこちら。",
        "ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
        "ms": "Ketahui lebih lanjut tentang [garis panduan tayangan slaid](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
        "pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).",
        "th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
        "zh-CN": "详细了解 [幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)",
        "zh-TW": "深入瞭解 [投影片輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)。"
      },
      "options": [
        {
          "value": "small",
          "label": {
            "da": "Lille",
            "de": "Klein",
            "en": "Small",
            "es": "Pequeño",
            "fi": "Pieni",
            "fr": "Petite",
            "hi": "छोटा",
            "it": "Piccolo",
            "ja": "小",
            "ko": "스몰",
            "ms": "Kecil",
            "nb": "Liten",
            "nl": "Klein",
            "pt-BR": "Pequeno",
            "pt-PT": "Pequeno",
            "sv": "Liten",
            "th": "เล็ก",
            "zh-CN": "小",
            "zh-TW": "小型"
          }
        },
        {
          "value": "large",
          "label": {
            "da": "Stor",
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fi": "Suuri",
            "fr": "Grande",
            "hi": "बड़ा",
            "it": "Grande",
            "ja": "大",
            "ko": "라지",
            "ms": "Besar",
            "nb": "Stor",
            "nl": "Groot",
            "pt-BR": "Grande",
            "pt-PT": "Grande",
            "sv": "Stor",
            "th": "ใหญ่",
            "zh-CN": "大",
            "zh-TW": "大型"
          }
        },
        {
          "value": "adapt",
          "label": {
            "da": "Tilpas til første side",
            "de": "An erstes Bild anpassen",
            "en": "Adapt to first image",
            "es": "Adaptar a la primera imagen",
            "fi": "Mukauta ensimmäisen kuvan mukaan",
            "fr": "Adapter à la première image",
            "hi": "पहली इमेज को अनुकूल बनाएं",
            "it": "Adatta alla prima immagine",
            "ja": "最初の画像に適応する",
            "ko": "첫 번째 이미지에 맞춤",
            "ms": "Menyesuaikan kepada imej pertama",
            "nb": "Tilpass etter første bilde",
            "nl": "Aanpassen aan eerste afbeelding",
            "pt-BR": "Adaptar à primeira imagem",
            "pt-PT": "Adaptar à primeira imagem",
            "sv": "Anpassa efter första bilden",
            "th": "ปรับให้เข้ากับรูปภาพแรก",
            "zh-CN": "适应第一张图片",
            "zh-TW": "配合第一張圖片"
          }
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "hero_home_auto",
      "label": {
        "da": "Roter automatisk slides",
        "de": "Auto-rotieren der Slides",
        "en": "Auto-rotate slides",
        "es": "Rotar las diapositivas automáticamente",
        "fi": "Käännä diat automaattisesti",
        "fr": "Rotation automatique des diapositives",
        "hi": "ऑटो-रोटेट स्लाइड",
        "it": "Ruota slide automaticamente",
        "ja": "スライドの自動切り替え",
        "ko": "슬라이드 자동 회전",
        "ms": "Slaid auto putar",
        "nb": "Autoroter lysbildene",
        "nl": "Dia's automatisch draaien",
        "pt-BR": "Rodar os slides automaticamente",
        "pt-PT": "Reprodução automática de diapositivos",
        "sv": "Auto-rotera bilder",
        "th": "หมุนสไลด์อัตโนมัติ",
        "zh-CN": "自动旋转幻灯片",
        "zh-TW": "自動旋轉投影片"
      },
      "default": false
    },
    {
      "type": "range",
      "id": "hero_home_auto_speed",
      "label": {
        "da": "Skift slide hver",
        "de": "Slides überall ändern",
        "en": "Change slides every",
        "es": "Cambiar diapositivas cada",
        "fi": "Vaihda diat joka",
        "fr": "Changer de diapositive toutes les",
        "hi": "प्रत्येक स्लाइड बदलें",
        "it": "Cambia slide ogni",
        "ja": "スライドを変更する間隔",
        "ko": "슬라이드를 매번 변경",
        "ms": "Ubah slaid setiap",
        "nb": "Endre lysbilde hvert",
        "nl": "Wijzig dia's elke",
        "pt-BR": "Mudar os slides a cada",
        "pt-PT": "Mudar diapositivos a cada",
        "sv": "Byt bilder varje",
        "th": "เปลี่ยนสไลด์ทุก",
        "zh-CN": "幻灯片更改时间间隔",
        "zh-TW": "每過以下時間即變更投影片"
      },
      "max": 9,
      "min": 3,
      "step": 2,
      "unit": {
        "da": " s",
        "de": " s",
        "en": " s",
        "es": " s",
        "fi": " s",
        "fr": " s",
        "hi": " s",
        "it": " s",
        "ja": " s",
        "ko": " s",
        "ms": " s",
        "nb": " s",
        "nl": " s",
        "pt-BR": " s",
        "pt-PT": " s",
        "sv": " s",
        "th": " s",
        "zh-CN": " s",
        "zh-TW": " s"
      },
      "default": 5
    }
  ],
  "presets": [
    {
      "name": {
        "da": "Diasshow",
        "de": "Slideshow",
        "en": "Slideshow",
        "es": "Diapositivas",
        "fi": "Diaesitys",
        "fr": "Diaporama",
        "hi": "स्लाइडशो",
        "it": "Presentazione",
        "ja": "スライドショー",
        "ko": "슬라이드 쇼",
        "ms": "Tayangan slaid",
        "nb": "Lysbildefremvisning",
        "nl": "Diavoorstelling",
        "pt-BR": "Apresentação de slides",
        "pt-PT": "Apresentação de diapositivos",
        "sv": "Bildspel",
        "th": "สไลด์โชว์",
        "zh-CN": "幻灯片",
        "zh-TW": "投影片輪播"
      },
      "category": {
        "da": "Billede",
        "de": "Bild",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "hi": "इमेज",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "ms": "Imej",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "settings": {
        "hero_home_auto": false,
        "hero_home_auto_speed": 5
      },
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": {
        "da": "Slide",
        "de": "Folie",
        "en": "Slide",
        "es": "Diapositiva",
        "fi": "Dia",
        "fr": "Diapositive",
        "hi": "स्लाइड",
        "it": "Scorrimento",
        "ja": "スライド",
        "ko": "슬라이드",
        "ms": "Slaid",
        "nb": "Lysbilde",
        "nl": "Dia",
        "pt-BR": "Slide",
        "pt-PT": "Diapositivo",
        "sv": "Bild",
        "th": "สไลด์",
        "zh-CN": "幻灯片",
        "zh-TW": "投影片"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "da": "Billede",
            "de": "Foto",
            "en": "Image",
            "es": "Imagen",
            "fi": "Kuva",
            "fr": "Image",
            "hi": "इमेज",
            "it": "Immagine",
            "ja": "画像",
            "ko": "이미지",
            "ms": "Imej",
            "nb": "Bilde",
            "nl": "Afbeelding",
            "pt-BR": "Imagem",
            "pt-PT": "Imagem",
            "sv": "Bild",
            "th": "รูปภาพ",
            "zh-CN": "图片",
            "zh-TW": "圖片"
          }
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": {
            "da": "Billede",
            "de": "Foto",
            "en": "Mobile Image",
            "es": "Imagen",
            "fi": "Kuva",
            "fr": "Image",
            "hi": "इमेज",
            "it": "Immagine",
            "ja": "画像",
            "ko": "이미지",
            "ms": "Imej",
            "nb": "Bilde",
            "nl": "Afbeelding",
            "pt-BR": "Imagem",
            "pt-PT": "Imagem",
            "sv": "Bild",
            "th": "รูปภาพ",
            "zh-CN": "图片",
            "zh-TW": "圖片"
          }
        },
        {
          "type": "select",
          "id": "image_position",
          "label": {
            "da": "Placering af billede",
            "de": "Bildposition",
            "en": "Image position",
            "es": "Posición de la imagen",
            "fi": "Kuvan sijainti",
            "fr": "Position de l'image",
            "hi": "इमेज स्थिति",
            "it": "Posizione Immagine",
            "ja": "画像の位置",
            "ko": "이미지 위치",
            "ms": "Kedudukan imej",
            "nb": "Bildeposisjon",
            "nl": "Afbeeldingspositie",
            "pt-BR": "Posição da imagem",
            "pt-PT": "Posição da imagem",
            "sv": "Bildposition",
            "th": "ตำแหน่งรูปภาพ",
            "zh-CN": "图片位置",
            "zh-TW": "圖片位置"
          },
          "default": "center center",
          "options": [
            {
              "label": {
                "da": "Øverst til venstre",
                "de": "Oben links",
                "en": "Top left",
                "es": "Arriba a la izquierda",
                "fi": "Ylhäällä vasemmalla",
                "fr": "En haut à gauche",
                "hi": "शीर्ष पर बाईं ओर",
                "it": "In alto a sinistra",
                "ja": "左上",
                "ko": "왼쪽 상단",
                "ms": "Kiri atas",
                "nb": "Øverst til venstre",
                "nl": "Linksboven",
                "pt-BR": "Superior esquerdo",
                "pt-PT": "Canto superior esquerdo",
                "sv": "Överst till vänster",
                "th": "ซ้ายบน",
                "zh-CN": "左上方",
                "zh-TW": "左上角"
              },
              "value": "left top"
            },
            {
              "label": {
                "da": "Øverst i midten",
                "de": "Oben zentriert",
                "en": "Top center",
                "es": "Centrar arriba",
                "fi": "Keskellä ylhäällä",
                "fr": "En haut au centre",
                "hi": "शीर्ष केंद्र",
                "it": "In alto al centro",
                "ja": "中央上",
                "ko": "맨 위 중간",
                "ms": "Tengah-tengah atas",
                "nb": "Toppsentrert",
                "nl": "Midden boven",
                "pt-BR": "Superior centro",
                "pt-PT": "Superior centro",
                "sv": "Längst upp i mitten",
                "th": "กลางบน",
                "zh-CN": "顶部居中",
                "zh-TW": "中央上方"
              },
              "value": "center top"
            },
            {
              "label": {
                "da": "Øverst til højre",
                "de": "Oben rechts",
                "en": "Top right",
                "es": "Arriba a la derecha",
                "fi": "Ylhäällä oikealla",
                "fr": "En haut à droite",
                "hi": "शीर्ष पर दाईं ओर",
                "it": "In alto a destra",
                "ja": "右上",
                "ko": "오른쪽 상단",
                "ms": "Kanan atas",
                "nb": "Øverst til høyre",
                "nl": "Rechtsboven",
                "pt-BR": "Superior direito",
                "pt-PT": "Canto superior direito",
                "sv": "Överst till höger",
                "th": "ขวาบน",
                "zh-CN": "右上方",
                "zh-TW": "右上角"
              },
              "value": "right top"
            },
            {
              "label": {
                "da": "Midt på til venstre",
                "de": "Mittig links",
                "en": "Middle left",
                "es": "Centro a la izquierda",
                "fi": "Keskellä vasemmalla",
                "fr": "Au milieu à gauche",
                "hi": "मध्य में बाईं ओर",
                "it": "Centrale a sinistra",
                "ja": "中央左",
                "ko": "왼쪽 중간",
                "ms": "Kiri tengah",
                "nb": "Midt til venstre",
                "nl": "Midden links",
                "pt-BR": "Meio esquerdo",
                "pt-PT": "Intermédio à esquerda",
                "sv": "Mitten till vänster",
                "th": "ซ้ายกลาง",
                "zh-CN": "中间居左",
                "zh-TW": "中央左方"
              },
              "value": "left center"
            },
            {
              "label": {
                "da": "Midt på centreret",
                "de": "Mittig zentriert",
                "en": "Middle center",
                "es": "Centro",
                "fi": "Keskellä keskellä",
                "fr": "Centré au milieu",
                "hi": "मध्य केंद्र",
                "it": "Al centro",
                "ja": "中央中",
                "ko": "가운데 중간",
                "ms": "Tengah-tengah",
                "nb": "Midt i senter",
                "nl": "Midden centrum",
                "pt-BR": "Meio centro",
                "pt-PT": "Intermédio ao centro",
                "sv": "Mitten centrerat",
                "th": "กึ่งกลาง",
                "zh-CN": "中间居中",
                "zh-TW": "正中央"
              },
              "value": "center center"
            },
            {
              "label": {
                "da": "Midt på til højre",
                "de": "Mittig rechts",
                "en": "Middle right",
                "es": "Centro a la derecha",
                "fi": "Keskellä oikealla",
                "fr": "Au milieu à droite",
                "hi": "मध्य में दाईं ओर",
                "it": "Centrale a destra",
                "ja": "中央右",
                "ko": "오른쪽 중간",
                "ms": "Kanan tengah",
                "nb": "Midt til høyre",
                "nl": "Midden rechts",
                "pt-BR": "Meio direito",
                "pt-PT": "Intermédio à direita",
                "sv": "Mitten till höger",
                "th": "ขวากลาง",
                "zh-CN": "中间居右",
                "zh-TW": "中央右方"
              },
              "value": "right center"
            },
            {
              "label": {
                "da": "Nederst til venstre",
                "de": "Unten links",
                "en": "Bottom left",
                "es": "Abajo a la izquierda",
                "fi": "Alhaalla vasemmalla",
                "fr": "En bas à gauche",
                "hi": "सबसे नीचे बाईं ओर",
                "it": "In basso a sinistra",
                "ja": "左下",
                "ko": "왼쪽 하단",
                "ms": "Kiri bawah",
                "nb": "Nederst til venstre",
                "nl": "Linksonder",
                "pt-BR": "Inferior esquerdo",
                "pt-PT": "Canto inferior esquerdo",
                "sv": "Nere till vänster",
                "th": "ซ้ายล่าง",
                "zh-CN": "左下方",
                "zh-TW": "左下角"
              },
              "value": "left bottom"
            },
            {
              "label": {
                "da": "Nederst i midten",
                "de": "Unten zentriert",
                "en": "Bottom center",
                "es": "Centro abajo",
                "fi": "Keskellä alhaalla",
                "fr": "En bas au centre",
                "hi": "निचला केंद्र",
                "it": "In basso al centro",
                "ja": "中央下",
                "ko": "맨아래 중간",
                "ms": "Tengah bawah",
                "nb": "Bunnsentrert",
                "nl": "Midden onder",
                "pt-BR": "Inferior centro",
                "pt-PT": "Inferior centro",
                "sv": "Längst ner i mitten",
                "th": "กลางล่าง",
                "zh-CN": "底部居中",
                "zh-TW": "中央下方"
              },
              "value": "center bottom"
            },
            {
              "label": {
                "da": "Nederst til højre",
                "de": "Unten rechts",
                "en": "Bottom right",
                "es": "Abajo a la derecha",
                "fi": "Alhaalla oikealla",
                "fr": "En bas à droite",
                "hi": "सबसे नीचे दाईं ओर",
                "it": "In basso a destra",
                "ja": "右下",
                "ko": "오른쪽 아래",
                "ms": "Kanan bawah",
                "nb": "Nederst til høyre",
                "nl": "Rechtsonder",
                "pt-BR": "Inferior direito",
                "pt-PT": "Canto inferior direito",
                "sv": "Nere till höger",
                "th": "ขวาล่าง",
                "zh-CN": "右下方",
                "zh-TW": "右下角"
              },
              "value": "right bottom"
            }
          ]
        },
        {
          "type": "header",
          "content": {
            "da": "Tekst",
            "de": "Textfarbe",
            "en": "Text",
            "es": "texto",
            "fi": "Teksti",
            "fr": "Couleur du texte",
            "hi": "टेक्स्ट",
            "it": "Testo",
            "ja": "テキスト",
            "ko": "텍스트",
            "ms": "Teks",
            "nb": "Tekst",
            "nl": "Tekst",
            "pt-BR": "Texto",
            "pt-PT": "Texto",
            "sv": "Text",
            "th": "ข้อความ",
            "zh-CN": "文本",
            "zh-TW": "文字"
          }
        },
        {
          "type": "text",
          "id": "title",
          "label": {
            "da": "Overskrift",
            "de": "Titel",
            "en": "Heading",
            "es": "Título",
            "fi": "Otsake",
            "fr": "Titre",
            "hi": "शीर्षक",
            "it": "Heading",
            "ja": "見出し",
            "ko": "제목",
            "ms": "Tajuk",
            "nb": "Overskrift",
            "nl": "Kop",
            "pt-BR": "Título",
            "pt-PT": "Título",
            "sv": "Rubrik",
            "th": "ส่วนหัว",
            "zh-CN": "标题",
            "zh-TW": "標題"
          },
          "default": {
            "da": "Slide",
            "de": "Folie",
            "en": "Slide",
            "es": "Diapositiva",
            "fi": "Dia",
            "fr": "Diapositive",
            "hi": "स्लाइड",
            "it": "Scorrimento",
            "ja": "スライド",
            "ko": "슬라이드",
            "ms": "Slaid",
            "nb": "Lysbilde",
            "nl": "Dia",
            "pt-BR": "Slide",
            "pt-PT": "Diapositivo",
            "sv": "Bild",
            "th": "สไลด์",
            "zh-CN": "幻灯片",
            "zh-TW": "投影片"
          }
        },
        {
          "type": "text",
          "id": "button_label",
          "label": {
            "da": "Knapetiket",
            "de": "Schaltflächenbezeichnung",
            "en": "Button label",
            "es": "Etiqueta de botón",
            "fi": "Painikkeen merkintä",
            "fr": "Texte du bouton",
            "hi": "बटन लेबल",
            "it": "Etichetta pulsante",
            "ja": "ボタンラベル",
            "ko": "버튼 레이블",
            "ms": "Label butang",
            "nb": "Knappetikett",
            "nl": "Knoplabel",
            "pt-BR": "Etiqueta do botão",
            "pt-PT": "Etiqueta do botão",
            "sv": "Knappetikett",
            "th": "ป้ายกำกับปุ่ม",
            "zh-CN": "按钮标签",
            "zh-TW": "按鈕標籤"
          },
          "default": {
            "da": "Se alle produkter",
            "de": "Alle Produkte ansehen",
            "en": "View all products",
            "es": "Ver todos los productos",
            "fi": "Näytä kaikki tuotteet",
            "fr": "Afficher tous les résultats de produits",
            "hi": "सभी उत्पाद देखें",
            "it": "Visualizza tutti i prodotti",
            "ja": "すべての商品を表示する",
            "ko": "모든 제품보기",
            "ms": "Lihat semua produk",
            "nb": "Vis alle produktene",
            "nl": "Alle producten bekijken",
            "pt-BR": "Exibir todos os produtos",
            "pt-PT": "Mostrar todos os produtos",
            "sv": "Visa alla produkter",
            "th": "ดูสินค้าทั้งหมด",
            "zh-CN": "查看所有产品",
            "zh-TW": "檢視所有產品"
          }
        },
        {
          "type": "url",
          "id": "button_link",
          "label": {
            "da": "Knaplink",
            "de": "Schaltflächenlink",
            "en": "Button link",
            "es": "Enlace de botón",
            "fi": "Painikkeen linkki",
            "fr": "Lien du bouton",
            "hi": "बटन लिंक",
            "it": "Link pulsante",
            "ja": "ボタンリンク",
            "ko": "버튼 링크",
            "ms": "Pautan butang",
            "nb": "Kobling for knapp",
            "nl": "Knoplink",
            "pt-BR": "Link do botão",
            "pt-PT": "Ligação do botão",
            "sv": "Knapplänk",
            "th": "ลิงก์ของปุ่ม",
            "zh-CN": "按钮链接",
            "zh-TW": "按鈕連結"
          }
        }
      ]
    }
  ]
}
{% endschema %}

Then add this to bottom of your theme.scss.liquid file in your assets folder:

 

.slick-slide .hero__image-content img.hero__image.hidden-mobile {
    display: block;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
    display: none;
}
.hero {
height: auto;
}

@media (max-width:750px){
.slick-slide .hero__image-content img.hero__image.hidden-mobile {
    display: none;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
    display: block;
}

}

Now in each of your slides you should be able to pick a separate mobile image. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
15 0 0

Hi @Ninthony ,

 

I'm using the theme Minimal with Flexslider with my website www.narrawatches.com, and I'm also a beginner at liquid and coding in general. I think I was able to mostly follow the code logic for Slickslider in Debut, wherein I was able to show the mobile image picker on theme customizer and I was able to  except for the last part in the theme.scss, particularly this part

.slick-slide .hero__image-content img.hero__image.hidden-mobile {
    display: block;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
    display: none;
}
.hero {
height: auto;
}

@media (max-width:750px){
.slick-slide .hero__image-content img.hero__image.hidden-mobile {
    display: none;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
    display: block;
}

}

I can't seem to replicate this in Flexslider or figure out the necessary code that would hide the second slideshow banner for flexslider. 

 

Basically the current end result is me having one slideshow directly below the other slideshow, with the main image showing on all formats, including mobile view as I haven't been able to bring out the mobile view on mobile screens or hide the other slideshow in the assets theme.

 

Any help would be greatly appreciated! Thank you and I also learned quite a lot reading this thread.

0 Likes
Astronaut
1082 147 272

Yeah the class names are likely not the same in any other theme other than Venture. You can send me a private message with your site and password if password protected so I can inspect and see what class names you need.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
2 0 0

Hey @Ninthony , hope you don't mind me jumping in on this but i've been looking for a solution to this also and noticed this thread is still active. Not sure if you've had a PM yet but could I ping you mine to have a look also? (Running Minimal theme too!) 

0 Likes
Highlighted
Astronaut
1082 147 272

Since @chugsy  and @narrawatches are both using Minimal, I'll take a look at the slideshow section for minimal and see how much trouble it'll be to get the swap working for the default Minimal theme. I'll report back when I get the time as I currently have something pressing to deal with, probably going to take up a good chunk of my week. I will let you both know by direct message when I take a look and if I find a solution I'll post it here as well. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
New Member
2 0 0

Thanks @Ninthony much appreciated. Take as much time as you need understand you have other things on your plate! Can manage in the meantime :-) 

0 Likes
Tourist
15 0 0
Awesome! Take your time and hope that everything’s going well for you too.
Really appreciate you taking the time to help out others in need :)
0 Likes
Tourist
9 0 1

It works, but not the best way for the performance. Imagine you have size-chart. You need image for mobile/desktop. Also need CM/inch. So you need 4 images. Even you don't even take a look to the size-chart you download 4 images each time.  Same for slider on mobile, even you don't display desktop images, you forced to download that image...

1 Like