Different images for mobile than desktop web

Solved
Highlighted
New Member
1 0 0

I am also very new to the shopify liquid coding. I am having a problem with the Flow theme, featured product section. The featured image looks fine on mobile but not on desktop. If I size the image for desktop it doesn't display correctly on mobile and vice versa. It appears the img div for mobile is a rectangle, but for desktop it's square. How do I make the image divs the same shape for both, or use different images for mobile and desktop? I tried following the code for similar posts, but the file names are all different which makes it even more difficult. Any help would be greatly appreciated!

I cannot post a link to the site as we are working on customizing this theme to replace the theme that is currently live, but here are screen shots of both:

Mobile view

mobile-screen-shot.jpg:

Desktop view

desktop-screen-shot.jpg

Thank you in advance!

 

0 Likes
Highlighted
Shopify Partner
1 0 0

Hey Ninthony, 

 

I'm trying to add this code to my html for gallery section on Narrative theme. I see the <style> I just don't know where to paste the code you provided. Also I did the first step for schema and it worked.!I have the option to use 2 different images just trying to get them to display on the different devices thankdesktop viewdesktop viewmobile viewmobile view

0 Likes
New Member
1 0 0

Hey dear, 

can you help me in this, I want different images for my desktop view and from the mobile view. 

 

As in desktop, we have more area horizontally, so I want to update a horizontal banner size image

 

For mobile, we have more areas vertically, so I want to update a verticle banner size image.

When my webpage loads on desktop, mobile images hides and when my webpage loads on mobile, desktop image hides .

 

is it possible on products page ?

 

 

0 Likes
Highlighted
New Member
3 0 0

@Ninthony Thank you for posting this. I've tried adapting this to my brooklyn theme and I'm getting close!


I have managed to show the image mobile picker and upload it, however when switching to mobile it doesn't actually show the new image.


Can you please give me a few pointers?

 

My slideshow.liquid is:

 

{%- if section.settings.home_hero_height == 'adapt' -%}
  {% comment %}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'home_hero_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 -%}

  {% comment %}
    Change the hero slideshow's dots color based on the slides' text color.
  {% endcomment %}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
      overflow: hidden;
    }
    .hero-{{ section.id }} .slick-track,
    .hero-{{ section.id }} .slideshow__overlay:before {
      height: {{- wrapper_height -}}vw;
    }
  {%- endstyle -%}
{%- endif -%}

<div id="HeroWrapper-{{ section.id }}"{% if section.settings.home_hero_height == 'adapt' %} class="hero--adapt"{% endif %} data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  {%- if section.blocks.size > 0 -%}
    <div class="hero-{{ section.id }} hero"
         id="Hero-{{ section.id }}"
         aria-label="slideshow"
         aria-describedby="a11y-slideshow-info"
         tabindex="-1"
         role="region"
         data-autoplay="{{ section.settings.hero_home_auto }}"
         data-autoplayspeed="{{ section.settings.home_hero_auto_speed | times: 1000 }}"
         data-adapt="{% if section.settings.home_hero_height == 'adapt' %}true{% else %}false{% endif %}"
         data-slide-nav-a11y="{{ 'home_page.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
         data-slide-nav-active-a11y="{{ 'home_page.slideshow.active_slide' | t: slide_number: '[slide_number]' }}"
         data-slide-index="0">
      {%- for block in section.blocks -%}
        {%- style -%}
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause,
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause .icon:before,
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-prev .icon:before,
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-next .icon:before,
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slide--{{ block.id }} {
            color: {{ block.settings.slide_text_color }};
          }
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-dots li a:before {
            background: transparent;
            border-color: {{ block.settings.slide_text_color }};
          }
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} li.slick-active a:before {
            background: {{ block.settings.slide_text_color }};
            border-color: transparent;
          }
          #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause .icon {
            fill: {{ block.settings.slide_text_color }};
          }
          #HeroWrapper-{{ section.id }} .slide--{{ block.id }} .hero__text-wrap {
            text-align: {{ block.settings.text_alignment }}
          }
        {%- endstyle -%}
        {%- comment -%}
          Apply a color overlay on a per-slide basis. The overlay is defined by
          a linear gradient with 4 points along it. The last 3 points cause the
          bottom of the overlay to be more opaque, in order to increase contrast
          with the controls for a11y purposes. Remove the 'background-image'
          style below and change to the following to remove the gradient:

          background-color: {{ block.settings.image_overlay }};
          opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.00 }};

        {%- endcomment -%}
        {%- if block.settings.image_overlay -%}
          {%- style -%}
            .slide--{{ block.id }} .slideshow__overlay:before {
              {%- assign opacity_alpha = block.settings.image_overlay_opacity | divided_by: 100.00 -%}
              {%- assign opacity_alpha_3 = opacity_alpha | plus: 0.25 | at_most: 1.0 -%}
              {%- assign opacity_alpha_2 = opacity_alpha_3 | minus: opacity_alpha | divided_by: 2.0 | plus: opacity_alpha -%}
              background-image: linear-gradient(to bottom,
                                                {{ '#000' | color_modify: 'alpha', opacity_alpha }},
                                                {{ '#000' | color_modify: 'alpha', opacity_alpha }} calc(100% - 150px),
                                                {{ '#000' | color_modify: 'alpha', opacity_alpha_2 }} calc(100% - 60px),
                                                {{ '#000' | color_modify: 'alpha', opacity_alpha_3 }});
            }
          {%- endstyle -%}
        {%- endif -%}
    
        <div class=" hero__slide slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}"
              data-hero-slide
              {{ block.shopify_attributes }}>
          {%- if block.settings.image == blank -%}
            <div class="placeholder-background">
              {%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
              {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          {%- else -%}
            <noscript>
              {%- if forloop.first == true -%}
                <div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
              {%- endif -%}
            </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 fade-in{% 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"
              data-hero-image
              alt="{{ block.settings.image.alt | escape }}"
              style="object-position: {{ block.settings.image_position }}">
          <img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% 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"
              data-hero-image
              alt="{{ block.settings.image.alt | escape }}"
              style="object-position: {{ block.settings.image_position }}">
          {%- endif -%}

          <div class="slider-desktop hero__text-wrap{% if block.settings.image_overlay %} slideshow__overlay{% endif %}">
            <div class="hero__text-align wrapper">
              <div class="hero__text-content" data-hero-text-content>
                {%- unless block.settings.slide_subheading == blank -%}
                  <p class="hero__subtitle">
                    {{ block.settings.slide_subheading | escape }}
                  </p>
                {%- endunless -%}
                {%- unless block.settings.slide_heading == blank -%}
                  <h2 class="hero__title h1">
                    {{ block.settings.slide_heading | escape }}
                  </h2>
                {%- endunless -%}
                {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                  <a href="{{ block.settings.button_link }}" style="color: {{ block.settings.slide_button_label_color }}; background-color: {{ block.settings.slide_button_background_color }}" class="btn hero__cta">
                    {{ block.settings.button_label | escape }}
                  </a>
                {%- endif -%}
              </div>
            </div>
          </div>
        </div>

      {%- endfor -%}

      {%- if section.blocks.size > 1 -%}
        <div class="hero__controls wrapper">
          {%- if section.settings.hero_home_auto -%}
            <button class="hero__pause" aria-live="polite" aria-label="{{ 'home_page.slideshow.pause' | t }}" data-label-pause="{{ 'home_page.slideshow.pause' | t }}" data-label-play="{{ 'home_page.slideshow.play' | t }}" data-pause>
              <span class="icon icon-pause" aria-hidden="true"></span>
              <span class="icon icon-play" aria-hidden="true"></span>
            </button>
          {%- endif -%}
          <ul>
            <li>
              <button class="slick-prev" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slide-previous>
                <span class="icon icon-slide-prev" aria-hidden="true"></span>
              </button>
            </li>
            <li>
              <button class="slick-next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slide-next>
                <span class="icon icon-slide-next" aria-hidden="true"></span>
              </button>
            </li>
          </ul>
          <div class="hero__dots-wrapper" data-hero-dots-wrapper></div>
        </div>
      {%- endif -%}
    </div>
    {%- if section.settings.home_hero_height == 'adapt' -%}
      <div class="hero__adapt-text-wrap wrapper" data-hero-adapt-text-wrap>
        {%- for block in section.blocks -%}
          <div class="hero__text-content hero__text-content--adapt text-center" data-index="{{ forloop.index0 }}" data-hero-text-content>
            {%- unless block.settings.slide_subheading == blank -%}
              <p class="hero__subtitle">
                {{ block.settings.slide_subheading | escape }}
              </p>
            {%- endunless -%}
            {%- unless block.settings.slide_heading == blank -%}
              <h2 class="hero__title h1">
                {{ block.settings.slide_heading | escape }}
              </h2>
            {%- endunless -%}
            {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
              <a href="{{ block.settings.button_link }}" class="hero__cta btn">
                {{ block.settings.button_label | escape }}
              </a>
            {%- endif -%}
          </div>
        {%- endfor -%}
      </div>
    {%- endif -%}
  {%- endif -%}
</div>

{% schema %}
{
  "name": {
    "da": "Diasshow",
    "de": "Slideshow",
    "en": "Slideshow",
    "es": "Diapositivas",
    "fi": "Diaesitys",
    "fr": "Diaporama",
    "hi": "स्लाइडशो",
    "it": "Presentazione",
    "ja": "スライドショー",
    "ko": "슬라이드 쇼",
    "nb": "Lysbildefremvisning",
    "nl": "Diavoorstelling",
    "pt-BR": "Apresentação de slides",
    "pt-PT": "Apresentação de diapositivos",
    "sv": "Bildspel",
    "th": "สไลด์โชว์",
    "zh-CN": "幻灯片",
    "zh-TW": "素材輪播"
  },
  "class": "index-section index-slideshow-section shopify-section--full-width",
  "max_blocks": 6,
  "settings": [
    {
      "type": "select",
      "id": "home_hero_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": "슬라이드 높이",
        "nb": "Lysbildehøyde",
        "nl": "Diahoogte",
        "pt-BR": "Altura do slide",
        "pt-PT": "Altura do diapositivo",
        "sv": "Bildhöjd",
        "th": "ความสูงของสไลด์",
        "zh-CN": "幻灯片高度",
        "zh-TW": "投影片高度"
      },
      "default": "full",
      "info": {
        "da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "de": "Erfahren Sie mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "es": "Más información sobre [directrices de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "fi": "Lisätietoja [diaesitysohjeista](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "hi": "[स्लाइडशो दिशानिर्देश](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow) के बारे में अधिक जानें",
        "it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)に関する詳細情報をご覧ください",
        "ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "zh-CN": "详细了解[幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)",
        "zh-TW": "深入瞭解 [素材輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)"
      },
      "options": [
        {
          "value": "full",
          "label": {
            "da": "Fuld skærm",
            "de": "Vollbild",
            "en": "Full screen",
            "es": "Pantalla completa",
            "fi": "Kokonäyttö",
            "fr": "Plein écran",
            "hi": "पूरी स्क्रीन",
            "it": "A schermo intero",
            "ja": "全画面表示",
            "ko": "전체 화면",
            "nb": "Fullskjerm",
            "nl": "Volledig scherm",
            "pt-BR": "Tela cheia",
            "pt-PT": "Ecrã inteiro",
            "sv": "Helskärm",
            "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": "첫 번째 이미지에 맞춤",
            "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": "슬라이드 자동 회전",
        "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": "home_hero_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": "슬라이드를 매번 변경",
        "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",
        "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": "슬라이드 쇼",
        "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": "이미지",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      },
      "settings": {
        "hero_home_auto": false,
        "home_hero_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": "슬라이드",
        "nb": "Lysbilde",
        "nl": "Dia",
        "pt-BR": "Slide",
        "pt-PT": "Diapositivo",
        "sv": "Bild",
        "th": "สไลด์",
        "zh-CN": "幻灯片",
        "zh-TW": "投影片"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": {
            "en": "Image mobile"
          }
        },
        {
          "type": "select",
          "id": "image_position",
          "label": {
            "en": "Image position"
          },
          "default": "center center",
          "options": [
            {
              "label": {
                "en": "Top left"
              },
              "value": "left top"
            },
            {
              "label": {
                "en": "Top center"
              },
              "value": "center top"
            },
            {
              "label": {
                "en": "Top right"
              },
              "value": "right top"
            },
            {
              "label": {
                "en": "Middle left"
              },
              "value": "left center"
            },
            {
              "label": {
                "en": "Middle center"
              },
              "value": "center center"
            },
            {
              "label": {
                "en": "Middle right"
              },
              "value": "right center"
            },
            {
              "label": {
                "en": "Bottom left"
              },
              "value": "left bottom"
            },
            {
              "label": {
                "en": "Bottom center"
              },
              "value": "center bottom"
            },
            {
              "label": {
                "en": "Bottom right"
              },
              "value": "right bottom"
            }
          ]
        },
        {
          "type": "checkbox",
          "id": "image_overlay",
          "label": {
            "en": "Show overlay"
          },
          "default": true
        },
        {
          "type": "range",
          "id": "image_overlay_opacity",
          "label": {
            "en": "Overlay opacity"
          },
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": {
            "en": "%"
          },
          "default": 25
        },    
        {
          "type": "header",
          "content": {
            "da": "Tekst",
            "de": "Text",
            "en": "Text",
            "es": "texto",
            "fi": "Teksti",
            "fr": "Texte",
            "hi": "टेक्स्ट",
            "it": "Testo",
            "ja": "テキスト",
            "ko": "텍스트",
            "nb": "Tekst",
            "nl": "Tekst",
            "pt-BR": "Texto",
            "pt-PT": "Texto",
            "sv": "Text",
            "th": "ข้อความ",
            "zh-CN": "文本",
            "zh-TW": "文字"
          }
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": {
            "da": "Tekstjustering",
            "de": "Textausrichtung",
            "en": "Text alignment",
            "es": "Alineación de texto",
            "fi": "Tekstin tasaus",
            "fr": "Alignement du texte",
            "hi": "टेक्स्ट पंक्तिबद्ध",
            "it": "Allineamento del testo",
            "ja": "テキストアラインメント",
            "ko": "텍스트 정렬",
            "nb": "Tekstjustering",
            "nl": "Tekstuitlijning",
            "pt-BR": "Alinhamento de texto",
            "pt-PT": "Alinhamento de texto",
            "sv": "Textjustering",
            "th": "การจัดตำแหน่งข้อความ",
            "zh-CN": "文本对齐方式",
            "zh-TW": "文字對齊"
          },
          "options": [
            {
              "value": "left",
              "label": {
                "da": "Venstre",
                "de": "Links",
                "en": "Left",
                "es": "Izquierda",
                "fi": "Vasen",
                "fr": "Gauche",
                "hi": "बाएँ",
                "it": "Sinistra",
                "ja": "左",
                "ko": "왼쪽",
                "nb": "Venstre",
                "nl": "Links",
                "pt-BR": "Esquerda",
                "pt-PT": "Esquerda",
                "sv": "Vänster",
                "th": "ด้านซ้าย",
                "zh-CN": "左侧",
                "zh-TW": "左方"
              }
            },
            {
              "value": "center",
              "label": {
                "da": "Centreret",
                "de": "Mitte",
                "en": "Center",
                "es": "Centrar",
                "fi": "Keskitetty",
                "fr": "Centre",
                "hi": "केंद्र",
                "it": "Al centro",
                "ja": "中央",
                "ko": "센터",
                "nb": "Sentrer",
                "nl": "Midden",
                "pt-BR": "Centro",
                "pt-PT": "Centro",
                "sv": "Centrera",
                "th": "ตรงกลาง",
                "zh-CN": "居中",
                "zh-TW": "置中"
              }
            },
            {
              "value": "right",
              "label": {
                "da": "Højre",
                "de": "Rechts",
                "en": "Right",
                "es": "Derecha",
                "fi": "Oikea",
                "fr": "Droite",
                "hi": "दाएँ",
                "it": "Destra",
                "ja": "右",
                "ko": "오른쪽",
                "nb": "Høyre",
                "nl": "Rechts",
                "pt-BR": "Direita",
                "pt-PT": "Direita",
                "sv": "Höger",
                "th": "ด้านขวา",
                "zh-CN": "右侧",
                "zh-TW": "右方"
              }
            }
          ],
          "default": "center"
        },
        {
          "type": "text",
          "id": "slide_heading",
          "label": {
            "da": "Overskrift",
            "de": "Überschrift",
            "en": "Heading",
            "es": "Título",
            "fi": "Otsake",
            "fr": "En-tête",
            "hi": "शीर्षक",
            "it": "Heading",
            "ja": "見出し",
            "ko": "제목",
            "nb": "Overskrift",
            "nl": "Kop",
            "pt-BR": "Título",
            "pt-PT": "Título",
            "sv": "Rubrik",
            "th": "ส่วนหัว",
            "zh-CN": "标题",
            "zh-TW": "標題"
          },
          "default": {
            "da": "Forgrundsbanner",
            "de": "Hero-Banner",
            "en": "Hero Banner",
            "es": "Banner destacado",
            "fi": "Hero Banner",
            "fr": "Bannière de premier plan",
            "hi": "हीरो बैनर",
            "it": "Banner hero",
            "ja": "ヒーローバナー",
            "ko": "히어로 배너",
            "nb": "Hero-banner",
            "nl": "Hero banner",
            "pt-BR": "Banner principal",
            "pt-PT": "Faixa do Hero",
            "sv": "Hero Banner",
            "th": "แบนเนอร์หลัก",
            "zh-CN": "Hero 横幅",
            "zh-TW": "主頁橫幅"
          }
        },
        {
          "type": "text",
          "id": "slide_subheading",
          "label": {
            "da": "Underoverskrift",
            "de": "Untertitel",
            "en": "Subheading",
            "es": "Subtítulo",
            "fi": "Alaotsikko",
            "fr": "Sous-titre",
            "hi": "उपशीर्षक",
            "it": "Sottotitolo",
            "ja": "小見出し",
            "ko": "소제목",
            "nb": "Underoverskrift",
            "nl": "Subkop",
            "pt-BR": "Subtítulo",
            "pt-PT": "Subtítulo",
            "sv": "Underrubrik",
            "th": "หัวเรื่องย่อย",
            "zh-CN": "副标题",
            "zh-TW": "子標題"
          },
          "default": {
            "da": "Introduktion",
            "de": "Für den Einstieg:",
            "en": "An introductory",
            "es": "Frase introductoria",
            "fi": "Aloittaminen",
            "fr": "Introduction",
            "hi": "एक परिचयात्मक",
            "it": "Come introduzione",
            "ja": "紹介",
            "ko": "소개",
            "nb": "En introduksjon",
            "nl": "Een inleiding",
            "pt-BR": "Uma introdução",
            "pt-PT": "Uma introdução",
            "sv": "En introduktion",
            "th": "การเกริ่นนำ",
            "zh-CN": "介绍性的 ",
            "zh-TW": "首次優惠"
          }
        },
        {
          "type": "text",
          "id": "button_label",
          "label": {
            "da": "Knaptekst",
            "de": "Schaltflächenbezeichnung",
            "en": "Button label",
            "es": "Etiqueta de botón",
            "fi": "Tekstipainike",
            "fr": "Texte du bouton",
            "hi": "बटन लेबल",
            "it": "Etichetta pulsante",
            "ja": "ボタンのラベル",
            "ko": "버튼 레이블",
            "nb": "Knappetikett",
            "nl": "Knoplabel",
            "pt-BR": "Etiqueta de botão",
            "pt-PT": "Etiqueta do botão",
            "sv": "Knappetikett",
            "th": "ป้ายกำกับปุ่ม",
            "zh-CN": "按钮标签",
            "zh-TW": "按鈕標籤"
          },
          "default": {
            "da": "Shop nu",
            "de": "Jetzt shoppen",
            "en": "Shop now",
            "es": "Compra ya",
            "fi": "Tee nyt ostoksia",
            "fr": "Acheter maintenant",
            "hi": "अभी खरीदें",
            "it": "Acquista ora",
            "ja": "今すぐ購入",
            "ko": "지금 쇼핑하기",
            "nb": "Handle nå",
            "nl": "Nu winkelen",
            "pt-BR": "Compre agora",
            "pt-PT": "Comprar agora",
            "sv": "Handla nu",
            "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": "Painikelinkki",
            "fr": "Lien du bouton",
            "hi": "बटन लिंक",
            "it": "Link pulsante",
            "ja": "ボタンのリンク",
            "ko": "버튼 링크",
            "nb": "Kobling for knapp",
            "nl": "Knoplink",
            "pt-BR": "Link de botão",
            "pt-PT": "Ligação do botão",
            "sv": "Knapplänk",
            "th": "ลิงก์ปุ่ม",
            "zh-CN": "按钮链接",
            "zh-TW": "按鈕連結"
          }
        },
        {
          "type": "color",
          "id": "slide_text_color",
          "label": {
            "da": "Tekst og ikoner",
            "de": "Text und Symbole",
            "en": "Text and icons",
            "es": "Texto e iconos",
            "fi": "Teksti ja kuvakkeet",
            "fr": "Texte et icônes",
            "hi": "टेक्स्ट और आइकन",
            "it": "Testo e icone",
            "ja": "テキストとアイコン",
            "ko": "텍스트 및 아이콘",
            "nb": "Tekst og ikoner",
            "nl": "Tekst en pictogrammen",
            "pt-BR": "Texto e ícones",
            "pt-PT": "Texto e ícones",
            "sv": "Text och ikoner",
            "th": "ข้อความและไอคอน",
            "zh-CN": "文本和图标",
            "zh-TW": "文字和圖示"
          },
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "slide_button_label_color",
          "label": {
            "da": "Knaptekst",
            "de": "Schaltflächenbezeichnung",
            "en": "Button label",
            "es": "Etiqueta de botón",
            "fi": "Tekstipainike",
            "fr": "Texte du bouton",
            "hi": "बटन लेबल",
            "it": "Etichetta pulsante",
            "ja": "ボタンのラベル",
            "ko": "버튼 레이블",
            "nb": "Knappetikett",
            "nl": "Knoplabel",
            "pt-BR": "Etiqueta de botão",
            "pt-PT": "Etiqueta do botão",
            "sv": "Knappetikett",
            "th": "ป้ายกำกับปุ่ม",
            "zh-CN": "按钮标签",
            "zh-TW": "按鈕標籤"
          },
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "slide_button_background_color",
          "label": {
            "da": "Knap",
            "de": "Schaltfläche",
            "en": "Button",
            "es": "Botón",
            "fi": "Painike",
            "fr": "Bouton",
            "hi": "बटन",
            "it": "Pulsante",
            "ja": "ボタン",
            "ko": "버튼",
            "nb": "Knapp",
            "nl": "Knop",
            "pt-BR": "Botão",
            "pt-PT": "Botão",
            "sv": "Knapp",
            "th": "ปุ่ม",
            "zh-CN": "按钮",
            "zh-TW": "按鈕"
          },
          "default": "#1f2021"
        }
      ]
    }
  ]
}
{% endschema %}

I have simply copied your theme.scss.liquid

 

.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;
}

}

Thank you in advance!

0 Likes