Solved

Different images for mobile than desktop web

nooreen
Tourist
7 0 3

Hello,

 

I am wondering what code I need to enter (and where!) to allow for different images on mobile web than desktop web view?

 

I currently am using a custom theme - does this determine where I need to be looking to add the code?

 

Thanks in advance!

Nooreen

 

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

It's completely understandable you're lost. At first the way that shopify does things doesnt make a whole lot of sense. Your template pages are they key parts of your site. So when you want to edit the homepage, you want to edit index.liquid. Now, if you have not developed the theme yourself, probably all you're going to even see inside of index.liquid is "{{ content_for_index }}" <--- That's a liquid object. Basically that renders everything that you've specified inside of your Customize section, your visual editor.

 

Take the section you posted, "banner.liquid" -- That's probably one of your sections you can edit when you open your visual editor. All of that:

{{ section.settings.link }}

 stuff is referring to all the options in your customize editor.  All that stuff underneath it inbetween the {% schema %} tags are where you define what kinds of things you want to have in your section. I have not worked with sections much, but I'm fairly certain I can walk you through so you can make this change. Duplicate your theme just to be sure you have a copy in case anything goes wrong.

 

First go into your {% schema %} tags and look for this portion:

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},

Copy that and paste it below it and change the ID to "mobile_image":

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},

Be sure to keep the comma after the closing curly bracket. 

 

Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags  a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:

 

<style>
.hidden_desktop{
  display:block;
}
.hidden_mobile {
  display: none;
}
@media (min-width:992px){
  .hidden_desktop{
    display:none;
  }
  .hidden_mobile {
    display: block;
  }
}
</style>
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}
{% if section.settings.mobile_image != blank %}
<img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" />
{% else %}
<img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>

Now you should be able to go into your customize section and find the portion for mobile image and upload an image there. I think this will work, like I said I have not worked in sections a whole lot but the logic seems there for me. I didn't change the other sections like image_size and whatnot, but this shouldn't matter unless you don't have an image uploaded there. Like I said, be sure to duplicate your theme and give this a shot.  Let me know how it turns out.

 

If my solution helped you, please like it and accept it as the solution!
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 😄

View solution in original post

Replies 201 (201)
SalihSyr
Visitor
2 0 0

Hi  

this code worked very good for me, but can you modify it in a way where it is turned into a slider with 3 addable pictures and with the option to add a "Shop Now" button?

Thanks a lot bro

NandoMedina
Visitor
2 0 0

Hi , Thanks for the explanation and the code. It worked perfectly for me.

Desktop main bannerDesktop main bannerMobile main bannerMobile main banner

RumRosesStudio
Visitor
1 0 0

This is brilliant!! Worked FLAWLESSLY for me! I know this is from a few years ago but thank you so much for this, as a small business just getting a shopify store going, I appreciate it!! 

MySweetSmileCo
Visitor
3 0 0

Hi Ninthony, 

I've been trying to crack this for over 12 hours now. I've got this section to show up in my theme customiser and I'm able to add the desired photos and move the section around my home page, however, the pictures just don't show up even though I'm able to choose which pictures I want in my theme customiser. I'm launching my store this week and would really like this solved as the custom banner I had made looks terrible on mobile.

I know you're probably sick of this thread by now but I would really appreciate your help! The theme I'm using is debut, and I'm sure others are facing the same problem too!

Look forward to hopefully hearing back from you

Ninthony
Shopify Partner
2329 350 1023

It should work just fine, have you selected both the mobile image and the desktop image? It will not show up otherwise. If you send me a dm with your store url I can request access and take a look for you.

If my solution helped you, please like it and accept it as the solution!
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 😄
RVN3996
Excursionist
16 0 1

Can you please help me fix my banner. I'm trying left and right but I feel lost after a while. This is my current hero.liquid for image banner for Debut theme:

 

<style>
.hidden-mobile {
  display: none;
}
.hidden-desktop {
  display: block;
}
@media (min-width: 767px){
  .hidden-mobile {
    display: block;
  }
  .hidden-desktop {
    display: none;
  }
}
</style>

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}

<div data-aos="fade-right" data-aos-duration="1000" data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}">
      {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.image.width < max_width -%}
        {%- assign slide_width = section.settings.image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            <a href="{{ section.settings.button_link }}" class="btn hero__btn">
              {{ section.settings.button_label | escape }}
            </a>
          {%- endif -%}
        </div>
      </div>
      
      {%- if section.settings.image != blank -%}
        <img class="hero-fixed-width__image hidden_mobile lazyload lazypreload"
             src="{{ section.settings.image | img_url: '2000x' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      
      {%- if section.settings.mobile_image != blank -%}
      <img class="hero-fixed-width__image hidden_desktop lazyload lazypreload"
             src="{{ section.settings.mobile_image | img_url: '992x' }}"
             data-src="{{ img_url  }}"
             data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
             data-aspectratio="{{ section.settings.image.aspect_ratio }}"
             data-sizes="auto"
             style="{%- if slide_width <= max_width -%}
                      {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                    {%- endif -%}
                    object-position: {{ section.settings.alignment }};"
             alt="{{ section.settings.image.alt | escape }}">
      {%- else -%}
        <span>
          {% capture current %}{% cycle 1, 2 %}{% endcapture %}
          {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </span>
      {%- endif -%}
      
      
      <noscript>
        <div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
      </noscript>
    </div>
  {%- else -%}
    <div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         {%- if section.settings.image -%}
          {% unless section.settings.image.alt == blank %}
          role="img"
          aria-label="{{ section.settings.image.alt | escape }}"
          data-alt="{{ section.settings.image.alt | escape }}"
          {% endunless %}
         data-bg="{{ section.settings.image | img_url: '300x300' }}"
         data-bgset="{% include 'bgset', image: section.settings.image %}"
         data-sizes="auto"
         data-parent-fit="cover"
         style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});"
         {%- endif -%}>
    {%- if section.settings.image == blank -%}
      <div class="placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
          {%- endif -%}
        </div>
      </div>
    </div>
    <noscript>
      <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
    </noscript>
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    </div>
  {%- endif -%}
</div>

{% schema %}
{
  "name": {
    "da": "Billede med tekstoverlejring",
    "de": "Foto mit überlegtem Text",
    "en": "Image with text overlay",
    "es": "magen con texto superpuesto",
    "fi": "Kuva päällä olevalla tekstillä",
    "fr": "Image avec calque texte",
    "hi": "पाठ ओवरले के साथ इमेज",
    "it": "Immagine con testo",
    "ja": "テキストオーバーレイ付き画像",
    "ko": "텍스트 오버레이 포함 이미지",
    "nb": "Bilde med tekstoverlegg",
    "nl": "Foto met tekstoverlay",
    "pt-BR": "Imagem com texto",
    "pt-PT": "Imagem com sobreposição de texto",
    "sv": "Bild med textöverlagring",
    "th": "การวางซ้อนรูปภาพพร้อมข้อความ",
    "zh-CN": "带文本叠加的图片",
    "zh-TW": "附文字疊加層的圖片"
  },
  "class": "index-section index-section--flush",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "deskimg"
    },
    {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "mobimg"
        },
    {
      "type": "select",
      "id": "alignment",
      "label": {
        "da": "Justering af billede",
        "de": "Fotoausrichtung",
        "en": "Image alignment",
        "es": "Alineación de imagen",
        "fi": "Kuvan tasaus",
        "fr": "Alignement de l'image",
        "hi": "इमेज पंक्तिबद्ध करना",
        "it": "Allineamento immagine",
        "ja": "画像アラインメント",
        "ko": "이미지 정렬",
        "nb": "Bildejustering",
        "nl": "Afbeelding uitlijnen",
        "pt-BR": "Alinhamento da imagem",
        "pt-PT": "Alinhamento da imagem",
        "sv": "Bildjustering",
        "th": "การจัดวางรูปภาพ",
        "zh-CN": "图片对齐方式",
        "zh-TW": "圖片對齊"
      },
      "default": "center",
      "options": [
        {
          "value": "top",
          "label": {
            "da": "Top",
            "de": "Oben",
            "en": "Top",
            "es": "Superior",
            "fi": "Ylös",
            "fr": "Haut",
            "hi": "सबसे ऊपर",
            "it": "In alto",
            "ja": "上",
            "ko": "위쪽",
            "nb": "Topp",
            "nl": "Boven",
            "pt-BR": "Acima",
            "pt-PT": "Acima",
            "sv": "Högst upp",
            "th": "ด้านบน",
            "zh-CN": "顶部",
            "zh-TW": "頂部"
          }
        },
        {
          "value": "center",
          "label": {
            "da": "I midten",
            "de": "Mitte",
            "en": "Middle",
            "es": "Centrada",
            "fi": "Keskelle",
            "fr": "Milieu",
            "hi": "मध्य में",
            "it": "Al centro",
            "ja": "中央",
            "ko": "중간",
            "nb": "Midten",
            "nl": "Midden",
            "pt-BR": "Meio",
            "pt-PT": "Meio",
            "sv": "Mitten",
            "th": "ตรงกลาง",
            "zh-CN": "中间",
            "zh-TW": "中央"
          }
        },
        {
          "value": "bottom",
          "label": {
            "da": "Bund",
            "de": "Unten",
            "en": "Bottom",
            "es": "Inferior",
            "fi": "Alas",
            "fr": "Bas",
            "hi": "नीचे का",
            "it": "In basso",
            "ja": "下",
            "ko": "아래쪽",
            "nb": "Bunn",
            "nl": "Onder",
            "pt-BR": "Abaixo",
            "pt-PT": "Abaixo",
            "sv": "Längst ner",
            "th": "ด้านล่าง",
            "zh-CN": "底部",
            "zh-TW": "底部"
          }
        }
      ]
    },
    {
      "type": "select",
      "id": "hero_layout",
      "label": {
        "da": "Layout",
        "de": "Layout",
        "en": "Layout",
        "es": "Diseño",
        "fi": "Asettelu",
        "fr": "Mise en page",
        "hi": "लेआउट",
        "it": "Layout",
        "ja": "レイアウト",
        "ko": "레이아웃",
        "nb": "Oppsett",
        "nl": "Opmaak",
        "pt-BR": "Layout",
        "pt-PT": "Esquema",
        "sv": "Layout",
        "th": "เลย์เอาต์",
        "zh-CN": "布局",
        "zh-TW": "版面配置"
      },
      "default": "full_width",
      "options": [
        {
          "label": {
            "da": "Fuld bredde",
            "de": "Volle Breite",
            "en": "Full width",
            "es": "Ancho completo",
            "fi": "Täysi leveys",
            "fr": "Pleine largeur",
            "hi": "पूर्ण चौड़ाई",
            "it": "Intera larghezza",
            "ja": "全幅",
            "ko": "전체 폭",
            "nb": "Full bredde",
            "nl": "Volledige breedte",
            "pt-BR": "Largura completa",
            "pt-PT": "Largura total",
            "sv": "Full bredd",
            "th": "เต็มความกว้าง",
            "zh-CN": "全宽",
            "zh-TW": "全寬度"
          },
          "value": "full_width"
        },
        {
          "label": {
            "da": "Fast bredde",
            "de": "Feste Breite",
            "en": "Fixed width",
            "es": "Ancho fijo",
            "fi": "Kiinteä leveys",
            "fr": "Largeur fixe",
            "hi": "निश्चित चौड़ाई",
            "it": "Larghezza fissa",
            "ja": "固定幅",
            "ko": "고정 폭",
            "nb": "Fast bredde",
            "nl": "Vaste breedte",
            "pt-BR": "Largura fixa",
            "pt-PT": "Largura fixa",
            "sv": "Fast bredd",
            "th": "ความกว้างตายตัว",
            "zh-CN": "固定宽度",
            "zh-TW": "固定寬度"
          },
          "value": "fixed_width"
        }
      ]
    },
    {
      "type": "select",
      "id": "hero_size",
      "label": {
        "da": "Højde på afsnit",
        "de": "Bereichs-Höhe",
        "en": "Section height",
        "es": "Altura de la sección",
        "fi": "Osan korkeus",
        "fr": "Hauteur de la section",
        "hi": "सेक्शन की ऊंचाई",
        "it": "Altezza sezione",
        "ja": "セクションの高さ",
        "ko": "섹션 높이",
        "nb": "Høyde på del",
        "nl": "Sectiehoogte",
        "pt-BR": "Altura da seção",
        "pt-PT": "Altura da secção",
        "sv": "Sektionshöjd",
        "th": "ความสูงของส่วน",
        "zh-CN": "分区高度",
        "zh-TW": "區塊高度"
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "da": "Tilpas til billede",
            "de": "An Bild anpassen",
            "en": "Adapt to image",
            "es": "Adaptar a la imagen",
            "fi": "Sovita kuvaan",
            "fr": "S'adapter à l'image",
            "hi": "इमेज के अनुकूल बनाएं",
            "it": "Adatta all'immagine",
            "ja": "画像に対応",
            "ko": "이미지에 맞춤",
            "nb": "Tilpass til bilde",
            "nl": "Aanpassen aan afbeelding",
            "pt-BR": "Adaptar à imagem",
            "pt-PT": "Adaptar à imagem",
            "sv": "Anpassa till bild",
            "th": "ปรับตามรูปภาพ",
            "zh-CN": "适应图片",
            "zh-TW": "配合圖片"
          },
          "value": "adapt"
        },
        {
          "label": {
            "da": "Ekstra lille",
            "de": "Extra klein",
            "en": "Extra Small",
            "es": "Extra pequeña",
            "fi": "Erikoispieni",
            "fr": "Très petite",
            "hi": "अतिरिक्त छोटा",
            "it": "Molto piccola",
            "ja": "極小",
            "ko": "특소",
            "nb": "Ekstra liten",
            "nl": "Extra klein",
            "pt-BR": "Extra pequeno",
            "pt-PT": "Extra pequeno",
            "sv": "Extra liten",
            "th": "ขนาดเล็กพิเศษ",
            "zh-CN": "特小",
            "zh-TW": "超小型"
          },
          "value": "x-small"
        },
        {
          "label": {
            "da": "Lille",
            "de": "Klein",
            "en": "Small",
            "es": "Pequeña",
            "fi": "Pieni",
            "fr": "Petite",
            "hi": "छोटा",
            "it": "Small",
            "ja": "小",
            "ko": "스몰",
            "nb": "Liten",
            "nl": "Klein",
            "pt-BR": "Pequeno",
            "pt-PT": "Pequeno",
            "sv": "Liten",
            "th": "เล็ก",
            "zh-CN": "小",
            "zh-TW": "小型"
          },
          "value": "small"
        },
        {
          "label": {
            "da": "Medium",
            "de": "Mitte",
            "en": "Medium",
            "es": "Mediana",
            "fi": "Keskisuuri",
            "fr": "Moyenne",
            "hi": "मध्यम",
            "it": "Medium",
            "ja": "中",
            "ko": "보통",
            "nb": "Middels",
            "nl": "Gemiddeld",
            "pt-BR": "Médio",
            "pt-PT": "Médio",
            "sv": "Medium",
            "th": "ปานกลาง",
            "zh-CN": "中等",
            "zh-TW": "中等"
          },
          "value": "medium"
        },
        {
          "label": {
            "da": "Stor",
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fi": "Suuri",
            "fr": "Grande",
            "hi": "बड़ा",
            "it": "Large",
            "ja": "大",
            "ko": "라지",
            "nb": "Stor",
            "nl": "Groot",
            "pt-BR": "Grande",
            "pt-PT": "Grande",
            "sv": "Stor",
            "th": "ใหญ่",
            "zh-CN": "大",
            "zh-TW": "大型"
          },
          "value": "large"
        },
        {
          "label": {
            "da": "Ekstra stor",
            "de": "Extra groß",
            "en": "Extra Large",
            "es": "Extra grande",
            "fi": "Erikoissuuri",
            "fr": "Très grande",
            "hi": "अतिरिक्त बड़ा",
            "it": "Molto grande",
            "ja": "特大",
            "ko": "특대",
            "nb": "Ekstra stort",
            "nl": "Extra groot",
            "pt-BR": "Extra grande",
            "pt-PT": "Extra grande",
            "sv": "Extra stor",
            "th": "ขนาดใหญ่พิเศษ",
            "zh-CN": "特大",
            "zh-TW": "超大型"
          },
          "value": "x-large"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_size",
      "label": {
        "da": "Tekststørrelse",
        "de": "Textgröße",
        "en": "Text size",
        "es": "Tamaño del texto",
        "fi": "Tekstin koko",
        "fr": "Taille du texte",
        "hi": "टेक्स्ट आकार",
        "it": "Dimensione testo",
        "ja": "文字サイズ",
        "ko": "텍스트 사이즈",
        "nb": "Tekststørrelse",
        "nl": "Tekengrootte",
        "pt-BR": "Tamanho do texto",
        "pt-PT": "Tamanho do texto",
        "sv": "Textstorlek",
        "th": "ขนาดตัวอักษร",
        "zh-CN": "文本大小",
        "zh-TW": "文字尺寸"
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "da": "Medium",
            "de": "Mitte",
            "en": "Medium",
            "es": "Mediano",
            "fi": "Keskisuuri",
            "fr": "Moyenne",
            "hi": "मध्यम",
            "it": "Medium",
            "ja": "中",
            "ko": "보통",
            "nb": "Middels",
            "nl": "Gemiddeld",
            "pt-BR": "Médio",
            "pt-PT": "Intermédio",
            "sv": "Medium",
            "th": "ปานกลาง",
            "zh-CN": "中等",
            "zh-TW": "中等"
          },
          "value": "medium"
        },
        {
          "label": {
            "da": "Stor",
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fi": "Suuri",
            "fr": "Grande",
            "hi": "बड़ा",
            "it": "Large",
            "ja": "大",
            "ko": "라지",
            "nb": "Stor",
            "nl": "Groot",
            "pt-BR": "Grande",
            "pt-PT": "Grande",
            "sv": "Stor",
            "th": "ใหญ่",
            "zh-CN": "大",
            "zh-TW": "大型"
          },
          "value": "large"
        }
      ]
    },
    {
      "type": "text",
      "id": "title",
      "label": {
        "da": "Overskrift",
        "de": "Titel",
        "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": "Billede med tekstoverlejring",
        "de": "Foto mit überlegtem Text",
        "en": "Image with text overlay",
        "es": "magen con texto superpuesto",
        "fi": "Kuva päällä olevalla tekstillä",
        "fr": "Image avec calque texte",
        "hi": "पाठ ओवरले के साथ इमेज",
        "it": "Immagine con testo",
        "ja": "テキストオーバーレイ付き画像",
        "ko": "텍스트 오버레이 포함 이미지",
        "nb": "Bilde med tekstoverlegg",
        "nl": "Foto met tekstoverlay",
        "pt-BR": "Imagem com sobreposição de texto",
        "pt-PT": "Imagem com sobreposição de texto",
        "sv": "Bild med textöverlagring",
        "th": "การวางซ้อนรูปภาพพร้อมข้อความ",
        "zh-CN": "带文本叠加的图片",
        "zh-TW": "附文字疊加層的圖片"
      }
    },
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "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": "文字"
      },
      "default": {
        "da": "<p>Brug tekstoverlejring til at give dine kunder indblik i dit brand. Vælg billeder og tekst, der passer til din stil og historie.</p>",
        "de": "<p>Nutzen Sie überlegten Text, um Kunden über Ihre Marke zu informieren. Wählen Sie Fotos und Text aus, die zu Ihrer Marke passen.</p>",
        "en": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>",
        "es": "<p>Usa el texto superpuesto para darles información útil a tus clientes sobre tu marca. Selecciona imágenes y textos que se relacionen con tu estilo e historia.</p>",
        "fi": "<p>Käytä taustan päällä olevaa tekstiä, jotta asiakkaat voivat tutustua tuotemerkkisi. Valitse tyylisi ja tarinasi liittyvät kuvat ja teksti.</p>",
        "fr": "<p>Utilisez la superposition de texte pour donner un aperçu de votre marque à vos clients. Utilisez une image et du texte qui se rapportent au style et à l'histoire de votre marque.</p>",
        "hi": "<p>अपने ब्रांड में अपने ग्राहकों को जानकारी देने के लिए ओवरले टेक्स्ट का उपयोग करें. अपनी स्टाइल और कहानी से संबंधित कल्पना और पाठ का चयन करें.</p>",
        "it": "<p>Utilizza il testo in sovrapposizione per dare ai clienti informazioni sul tuo brand. Seleziona immagini e testo legati al tuo stile e alla tua storia.</p>",
        "ja": "<p>オーバーレイテキストを使用して、お客様があなたのブランドについてよく理解できるようにします。あなたのスタイルやストーリーに関連する画像やテキストを選択してください。</p>",
        "ko": "<p>오버레이 텍스트를 사용하여 고객에게 브랜드에 대한 통찰력을 부여하십시오. 자신의 스타일과 이야기와 관련된 이미지와 텍스트를 선택하십시오.</p>",
        "nb": "<p>Bruk overleggstekst til å gi kundene dine innsikt i merkevaren din. Velg bildebruk og tekst som er relatert til din stil og historie.</p>",
        "nl": "<p>Gebruik overlay-tekst om je klanten inzicht te geven in je merk. Selecteer afbeeldingen en tekst die betrekking hebben op je stijl en verhaal.</p>",
        "pt-BR": "<p>Use o texto de sobreposição para apresentar insights sobre sua marca aos clientes. Selecione imagens e textos que reflitam seu estilo e sua história.</p>",
        "pt-PT": "<p>Utilize o texto de sobreposição para fornecer informações sobre a sua marca aos clientes. Selecione imagens e textos que reflitam o seu estilo e a sua história.</p>",
        "sv": "<p>Använd överläggningstext för att ge dina kunder inblick i ditt varumärke. Välj bildspråk och text som gäller din stil och historia.</p>",
        "th": "<p>ใช้ข้อความซ้อนทับเพื่อให้ลูกค้าของคุณทราบถึงรายละเอียดเกี่ยวกับแบรนด์ เลือกรูปภาพและข้อความที่มีความเกี่ยวข้องกับสไตล์กับเรื่องราวของคุณ</p>",
        "zh-CN": "<p>使用叠加文本让客户深入了解您的品牌。选择与您的风格和故事相关的图片和文本。</p>",
        "zh-TW": "<p>運用文字疊加層讓顧客更加瞭解您的品牌。選擇與您風格和品牌故事相關的圖像和文字。</p>"
      }
    },
    {
      "type": "text",
      "id": "button_label",
      "label": {
        "da": "Knaptekst",
        "de": "Button-Etikett",
        "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": "按鈕標籤"
      }
    },
    {
      "type": "url",
      "id": "button_link",
      "label": {
        "da": "Knaplink",
        "de": "Button-Etikett",
        "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": "按鈕連結"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "da": "Billede med tekstoverlejring",
        "de": "Foto mit überlegtem Text",
        "en": "Image with text overlay",
        "es": "magen con texto superpuesto",
        "fi": "Kuva päällä olevalla tekstillä",
        "fr": "Image avec calque texte",
        "hi": "पाठ ओवरले के साथ इमेज",
        "it": "Immagine con testo",
        "ja": "テキストオーバーレイ付き画像",
        "ko": "텍스트 오버레이 포함 이미지",
        "nb": "Bilde med tekstoverlegg",
        "nl": "Foto met tekstoverlay",
        "pt-BR": "Imagem com sobreposição de texto",
        "pt-PT": "Imagem com sobreposição de texto",
        "sv": "Bild med textöverlagring",
        "th": "การวางซ้อนรูปภาพพร้อมข้อความ",
        "zh-CN": "带文本叠加的图片",
        "zh-TW": "附文字疊加層的圖片"
      },
      "category": {
        "da": "Billede",
        "de": "Foto",
        "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": "圖片"
      }
    }
  ]
}
{% endschema %}
Ninthony
Shopify Partner
2329 350 1023

I'm going to be a little busy tomorrow, but if I get time, I'll write up my own section that uses my method for desktop banners and mobile banners. People seem to need this a lot, so I am just going to make a pretty functional section in my spare time and provide the code on here for free.

If my solution helped you, please like it and accept it as the solution!
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 😄
KrazyGear
Tourist
9 0 6

add my discord: aarxn#0003

MySweetSmileCo
Visitor
3 0 0

Think you could quite possibly become the most popular man in this community if you were to do that! I for one wouldn't be able to thank you enough.

RVN3996
Excursionist
16 0 1

Thanks man! I really appreciate it. I was just wondering if you can go over my code I feel like there is some small thing I missed as I have to publish the site today. I hope it's not a problem if you find time for it 😄

Ninthony
Shopify Partner
2329 350 1023

Just updating, I am currently still working on the section. I'm trying to add in a lot of functionality so it's going to be an ongoing project. 

If my solution helped you, please like it and accept it as the solution!
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 😄
MySweetSmileCo
Visitor
3 0 0

Sounds great Ninthony, we just need a very basic version. We're currently using Debut and love the look of the slideshow on desktop but would like to use a different image we have for the slideshow on mobile.

Any idea if a basic version of your section would do this for us? 

Really appreciate your help, thank you.

Oecksler
Visitor
3 0 0

Dear @Ninthony . Is it possible to check on my store which codes should be changed in order to implement different images for mobile and desktop?
I'm sorry but it's not obvious to me. I checked my codes and tried to do with your guidelines on 1st page but I was unable to do it. Thanks in advance.

casamee.myshopify.com

Ninthony
Shopify Partner
2329 350 1023

It would not, my section is just a single image, not a slideshow. That may be something I look into doing in the future.

If my solution helped you, please like it and accept it as the solution!
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 😄
EnableX
New Member
5 0 0

Hey @Ninthony 

 

I feel like I could speak for a few of us on this thread and potentials in the future. Would you please be able to create an updated (almost like a final form) slideshow that has the ability to

1) Have a sliding slideshow that is mobile responsive
2) Ability to have multiple images present
3) Contains a Button

This would be the most kickass section that I'd add to all my Shopify stores! Thanks in advanced


RachelHSS
Excursionist
12 0 3

Hi @Ninthony , just wondering if this section ever got finished/posted? I've read through all 18 pages of this thread and didn't see it but want to make sure  I'm not missing something. This solution would be great for me as I don't think I have the knowledge to follow the original solution you posted, especially as I am using a different theme than any of the ones you've previously referenced. Thanks in advance!

Ninthony
Shopify Partner
2329 350 1023

I posted a suboptimal solution on page 6. It's merely a section with 2 image pickers and you can link from them, it's a starting point for whoever is trying to develop their own sections or a simple way to display a desktop and mobile image that's not optimized for different screen resolutions:

https://community.shopify.com/c/shopify-design/different-images-for-mobile-than-desktop-web/m-p/8144...

 

If my solution helped you, please like it and accept it as the solution!
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 😄
RachelHSS
Excursionist
12 0 3

Saw that, thanks. I thought after that you had said you were working on a full section code we could use instead. Thanks though.

Ninthony
Shopify Partner
2329 350 1023

Honestly I have no idea, it was quite some time ago and I may have worked on something for a bit and got distracted with life stuff. If I do get time I will expand on it and make it a stand alone topic/tutorial as I would likely make it a functioning slideshow as well.

If my solution helped you, please like it and accept it as the solution!
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 😄
Brittany_Witt
Explorer
52 0 17

Hey @Ninthony 

You helped me so much with this piece of code to add a mobile and desktop image to my homepage and I've been using it ever since!

I have another question, I would love to know if you have a snippet of code I can use to show different images for mobile and desktop for regular pages, product pages & collection pages. I'm currently uploading images to my Assets folder then using the code <img src="{{ 'ASSET IMAGE' | asset_img_url: '1280x' }}"> then pasting it wherever I want the image to appear on say my product pages. I typically want to use this for marketing purposes at the top of the product page and collection pages but under all the header stuff. Here's an example:

Untitled design.png

This image is optimized for mobile and this is a desktop screenshot so I would love to use the desktop optimized image for desktop and the mobile-optimized image for mobile.

If you have any solutions to this I would be greatly appreciative!

Thanks!

- Brittany

Brittany Witt
Ninthony
Shopify Partner
2329 350 1023

Hey all, sorry I have been gone for a while. We have been redesigning our website at work which has required my full attention. I have 67 notifications, and if I'm being perfectly honest... Im not going to read through them all, just going through my latest couple.

@Brittany_Witt, you should just make two dedicated class names that will hide whatever you apply them to on desktop or mobile. I would keep it simple. Go into your theme.scss.liquid file and at the bottom make two class names, I typically do mobile styles first so:

 

.desktop-image {
display: none;
}

.mobile-image {
display: block;
}

@media(min-width: 992px){
.desktop-image {
display: block;
}

.mobile-image {
display: none;
}
}

 

 

Then when you put your image inline, give your mobile image the "mobile-image" class name and your desktop image the "desktop-image" class name:

 

<img class="desktop-image" src="{{ 'ASSET IMAGE' | asset_img_url: '1280x' }}">
<img class="mobile-image" src="{{ 'ASSET IMAGE' | asset_img_url: '992x' }}">

 

At any screen size larger than 992px, the desktop image will show and the mobile will be hidden, anything below that and the mobile image will show and the desktop image will be hidden. There are other ways to do this, with srcset or a picture element, but I think this will be the easiest for you. You can apply those class names to any html element and it will treat them the same way, so if there's content you want to hide on mobile you could give it's element the "desktop-image" class name and it would only show up on desktop. You may want to change the names of the classes though if you plan on using it like that.

If my solution helped you, please like it and accept it as the solution!
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 😄
Rbarker
Visitor
2 0 0

Hi @Ninthony please could you help? I tried the custom code and it showed in my theme customiser but after I added the images nothing appeared, not even on preview. I am using Debut theme. Please could you provide an updated custom css? My url is mustardinkstudios.myshopify.com, password: beoflo        Thank you!

 

shopsumo
Visitor
2 0 1

Thank you so much 😞

EastMeetsWestUS
New Member
4 0 0

Can this be used for slideshow? Essentially I am looking to have a slide show that I can have (2) seperate images - on for mobile and one for desktop

nealm759
Excursionist
35 0 2

I was not able to fix my issue the way I wanted.... but I did find a workaround. Piggybacking off of @Ninthony s css of hiding a class based on screensize

.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}

I duplicated my hero liquid template, changed the name image with text to mobileimage with text, then changed added class of mobile-image and desktop-image to each of the two templates respectively..

The downside is that the two image selectors are different sections in the customizer.... but it does get the job done.

Joshua28
Excursionist
13 0 5

Hi this code for for me!!

How to add text and button on the image for both desktop and mobile?

Philippa1
Visitor
3 0 1

Hi Ninthony! This all works great for me, thank you so much! Just wondering if there was any way to make these images clickable? Cheers!

Ninthony
Shopify Partner
2329 350 1023

On page 6 I posted a version you can add a link to, be sure to use the full path if trying to link outside of the website: https://www.google.com -- not www.google.com as this will take you to www.your-store.myshopify.com/www.google.com -- otherwise you can use relative links if for your website (/products/your-product  or /collections/your-collection/products/your-product).

<style>
.banner-container img{
  width: 100%;
}
.hidden-mobile {
  display: none;
}
.hidden-desktop {
  display: block;
}
@media (min-width: 767px){
  .hidden-mobile {
    display: block;
  }
  .hidden-desktop {
    display: none;
  }
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
  <a href="{{ section.settings.banner_link }}">
  <img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
  <img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
  </a>
</div>
{% endif %}

{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}
If my solution helped you, please like it and accept it as the solution!
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 😄
SarahCarrington
Visitor
2 0 0

Hiya @Ninthony 

 

I'm trying to do this on the Testament theme https://themes.shopify.com/themes/testament/styles/genesis

 

Do you think it's possible to do for this theme?

 

I managed to following some of the instructions but I'm not the most code savvy!

 

Many thanks

Sarah

SarahCarrington
Visitor
2 0 0

Hiya @Ninthony 

 

I seem to have got a bit further with this, trying to make the slideshow work on mobile but with the below code the desktop image previews above the mobile and I also get an element previewing at the bottom of the page. Are you able to help please?

 

{% render 'custom-content', page: page %}

<section class="index-section slideshow-section" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% if section.settings.display_wide %}
{% else %}
<div class="row">
<div class="desktop-12 tablet-6 mobile-3">
{% endif %}

{%- assign slider_speed = section.settings.slider_speed | times: 1000 -%}
{% capture slideshow_config %}{
"wrapAround":true,
"dragThreshold":"15",
"pauseAutoPlayOnHover":false,
"autoPlay": {{ slider_speed }},
"fade": true,
"pageDots":{% if section.settings.pager == 'arrows' %}false{% else %}true{% endif %},
"prevNextButtons":{% if section.settings.pager == 'arrows' %}true{% else %}false{% endif %}
}{% endcapture %}

{% if section.blocks.size > 0 %}
<div class="slideshow flickity__section js-slideshow" id="slideshow--{{ section.id }}" data-flickity='{{ slideshow_config }}'>
{% for block in section.blocks %}
<div id="slide--{{ block.id }}" data-block-id="{{ block.id }}" class="slide--{{ block.id }} slideshow__slide{% if block.settings.image == blank %} slideshow__slide-onboard{% endif %}" data-slider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank and block.settings.button_text == blank %}<a href="{{ block.settings.link }}">{% endif %}
{% if block.settings.image != blank %}
<div class="slideshow__slide-desktop{% if block.settings.overlay %} overlay{% endif %}">
{% render 'basic-responsive-image', type: block.settings.image %}
<noscript>
<img src="{{ block.settings.image | img_url: '1024x' }}" alt="{{ block.settings.image.alt | escape }}" class="slideshow__image slideshow__image--{{ block.id }}">
</noscript>
</div>
{% endif %}
{% if block.settings.link != blank and block.settings.button_text == blank %}</a>{% endif %}
{% if block.settings.image == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{%- assign placeholder = 'lifestyle-' | append: current -%}
{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.heading == blank and block.settings.subheading == blank and block.settings.button_text == blank and block.settings.second_button_text == blank %}
{% assign hide_caption = true %}
{% endif %}
{% unless hide_caption %}
<div class="slideshow__caption slide-{{ block.id }}">
<div class="slideshow__caption-wrapper">
{% if block.settings.heading != blank %}
<h2 class="slideshow__title">{{ block.settings.heading | escape }}</h2>
{% endif %}
{% if block.settings.subheading != blank %}
{{ block.settings.subheading }}
{% endif %}
{% if block.settings.button_text != blank and block.settings.link != blank %}
<div class="slideshow__btn-wrapper">
<a href="{{ block.settings.link }}">{{ block.settings.button_text | escape }}</a>
</div>
{% endif %}
{% if block.settings.second_button_text != blank and block.settings.second_link != blank %}
<div class="slideshow__btn-wrapper">
<a href="{{ block.settings.second_link }}">{{ block.settings.second_button_text | escape }}</a>
</div>
{% endif %}
</div>
</div>
{% endunless %}
<style>
.slideshow__caption.slide-{{ block.id }} .slideshow__caption-wrapper {
{% assign bg_color = block.settings.caption_background %}
{% assign number = block.settings.caption_background_opacity %}
{% assign caption_background_opacity = number | divided_by: 100.0 %}
{% if block.settings.caption_background == 'rgba(0,0,0,0)' %}
background: transparent;
{% else %}
background: {{ bg_color | color_modify: 'alpha', caption_background_opacity }};
{% endif %}
text-align: {{ block.settings.text_align }};
}
.slideshow__caption.slide-{{ block.id }} h2.slideshow__title,
.slideshow__caption.slide-{{ block.id }} p {
color: {{ block.settings.slide_text_color }};
}
.slideshow__caption.slide-{{ block.id }} .slideshow__btn-wrapper a {
color: {{ block.settings.cta_color }};
background: {{ block.settings.cta_background }};
border: 1px solid {{ block.settings.cta_background }};
}
.slideshow__caption.slide-{{ block.id }} .slideshow__btn-wrapper a:hover {
color: {{ block.settings.cta_background }};
}
.slideshow__caption.slide-{{ block.id }} {
top: {{ block.settings.caption_vertical }}%;
left: {{ block.settings.caption_horizontal }}%;
-webkit-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
-ms-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
-moz-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
-o-transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
transform: translate(-{{ block.settings.caption_horizontal }}%, -{{ block.settings.caption_vertical }}%);
}
@media screen and (max-width: 740px) {
{%- assign mobile_image = block.settings.mobile_image -%}
{% assign image_box_ratio = mobile_image.height | append: ".0" | times: 1 | divided_by: mobile_image.width | times: 100 | append: "%" %}

{% if mobile_image != blank %}
.slide--{{ block.id }} {
background-image: url('{{ mobile_image | img_url: '600x' }}') !important;
opacity: 1;
{% if block.settings.caption_below %}
padding-bottom: 0 !important;
{% else %}
padding-bottom: {{ image_box_ratio }} !important;
{% endif %}
background-size: contain;
bacground-position: top center;
background-repeat: no-repeat;
}
.slide--{{ block.id }} > a {
display: block;
width: 100%;
padding-bottom: 100%;
position: absolute;
top: 0;
height: 100%;
}
.slide--{{ block.id }} .slideshow__slide-desktop {
display: none;
}
{% else %}
.slide--{{ block.id }} .slideshow__slide-desktop .box-ratio {
padding-bottom: 550px !important;
}
.slide--{{ block.id }} .slideshow__slide-desktop img {
object-fit: cover;
object-position: center;
height: 550px !important;
}
.slide--{{ block.id }} .slideshow__slide-desktop {
display: block;
}
{% endif %}
{% if block.settings.caption_below %}
.slideshow__slide .slideshow__caption.slide-{{ block.id }} {
position: relative;
width: 100%;
{% if mobile_image != blank %}
margin-top: {{ image_box_ratio }};
{% endif %}
top: unset;
left: unset;
transform: translate(0, 0);
}
.slideshow__slide .slideshow__caption.slide-{{ block.id }} .slideshow__caption-wrapper {
width: 100%;
}
{% endif %}
{% if block.settings.hide_caption_background %}
.slideshow__caption.slide-{{ block.id }} .slideshow__caption-wrapper {
background: none;
}
{% endif %}
}
</style>
</div>
{% endfor %}
</div>
{% elsif section.blocks.size == 0 %}
{% render 'no-blocks' %}
{% endif %}

{% unless section.settings.display_wide %}</div></div>{% endunless %}


<style>
#slideshow--{{ section.id }} .slideshow__caption h2.slideshow__title {
font-size: {{ section.settings.slide_heading_size }}px;
}
#slideshow--{{ section.id }} .slideshow__caption p {
font-size: {{ section.settings.subheading_size }}px;
}
#slideshow--{{ section.id }} .slideshow__btn-wrapper a {
font-size: {{ section.settings.cta_size }}px;
}
</style>

</section>
<div class="clear"></div>


{% schema %}
{
"name": "Custom page two",
"max_blocks": 40,
"settings": [
{
"type": "range",
"id": "section_spacing",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Space between each block",
"default": 40
},
{
"type": "range",
"id": "section_heading_size",
"min": 13,
"max": 48,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 20
}
],
"blocks": [
{
"type": "page_title",
"name": "Page Title",
"limit": 1,
"settings": [
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "center",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
}
]
},
{
"type": "page_content",
"name": "Page Content",
"limit": 1,
"settings": [
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
}
]
},
{
"type": "page_contact_form",
"name": "Contact Form",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Contact Us"
},
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "left",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
},
{
"type": "checkbox",
"id": "cf_show_first_name",
"label": "Show first name",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_last_name",
"label": "Show last name",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_company_name",
"label": "Show company name",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_address",
"label": "Show address",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_website_url",
"label": "Show website url",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_phone",
"label": "Show phone number",
"default": true
},
{
"type": "checkbox",
"id": "cf_show_subject",
"label": "Show subject",
"default": true
},
{
"type": "header",
"content": "Custom Field One"
},
{
"type": "checkbox",
"id": "cf_show_custom_field_one",
"label": "Show custom field one",
"default": false
},
{
"type": "text",
"id": "cf_custom_field_one",
"label": "Placeholder",
"default": "Custom Field One"
},
{
"type": "select",
"id": "cf_custom_field_one_type",
"label": "Type",
"default": "input",
"options": [
{
"value": "textarea",
"label": "Multiple line text"
},
{
"value": "input",
"label": "Single line text"
}
]
},
{
"type": "header",
"content": "Custom Field Two"
},
{
"type": "checkbox",
"id": "cf_show_custom_field_two",
"label": "Show custom field two",
"default": false
},
{
"type": "text",
"id": "cf_custom_field_two",
"label": "Placeholder",
"default": "Custom Field Two"
},
{
"type": "select",
"id": "cf_custom_field_two_type",
"label": "Type",
"default": "input",
"options": [
{
"value": "textarea",
"label": "Multiple line text"
},
{
"value": "input",
"label": "Single line text"
}
]
}
]
},
{
"type": "accordion",
"name": "Accordion",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Accordion"
},
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "left",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "range",
"id": "block_padding",
"min": 0,
"max": 80,
"step": 5,
"unit": "px",
"label": "Add padding to the top and bottom of content within this block",
"default": 15
},
{
"type": "checkbox",
"id": "allow_multiple",
"label": "Allow multiple accordions open at one time",
"default": false
},
{
"type": "text",
"id": "ac_heading_1",
"label": "Item 1 Heading",
"default": "Item 1"
},
{
"type": "richtext",
"id": "ac_content_1",
"label": "Item 1 Content",
"default": "<p>Description and content for Item 1.</p>"
},
{
"type": "text",
"id": "ac_heading_2",
"label": "Item 2 Heading",
"default": "Item 2"
},
{
"type": "richtext",
"id": "ac_content_2",
"label": "Item 2 Content",
"default": "<p>Description and content for Item 2.</p>"
},
{
"type": "text",
"id": "ac_heading_3",
"label": "Item 3 Heading",
"default": "Item 3"
},
{
"type": "richtext",
"id": "ac_content_3",
"label": "Item 3 Content",
"default": "<p>Description and content for Item 3.</p>"
},
{
"type": "text",
"id": "ac_heading_4",
"label": "Item 4 Heading",
"default": "Item 4"
},
{
"type": "richtext",
"id": "ac_content_4",
"label": "Item 4 Content",
"default": "<p>Description and content for Item 4.</p>"
},
{
"type": "text",
"id": "ac_heading_5",
"label": "Item 5 Heading",
"default": "Item 5"
},
{
"type": "richtext",
"id": "ac_content_5",
"label": "Item 5 Content",
"default": "<p>Description and content for Item 5.</p>"
},
{
"type": "text",
"id": "ac_heading_6",
"label": "Item 6 Heading",
"default": "Item 6"
},
{
"type": "richtext",
"id": "ac_content_6",
"label": "Item 6 Content",
"default": "<p>Description and content for Item 6.</p>"
},
{
"type": "text",
"id": "ac_heading_7",
"label": "Item 7 Heading",
"default": "Item 7"
},
{
"type": "richtext",
"id": "ac_content_7",
"label": "Item 7 Content",
"default": "<p>Description and content for Item 7.</p>"
},
{
"type": "text",
"id": "ac_heading_8",
"label": "Item 8 Heading",
"default": "Item 8"
},
{
"type": "richtext",
"id": "ac_content_8",
"label": "Item 8 Content",
"default": "<p>Description and content for Item 8.</p>"
},
{
"type": "text",
"id": "ac_heading_9",
"label": "Item 9 Heading",
"default": "Item 9"
},
{
"type": "richtext",
"id": "ac_content_9",
"label": "Item 9 Content",
"default": "<p>Description and content for Item 9.</p>"
},
{
"type": "text",
"id": "ac_heading_10",
"label": "Item 10 Heading",
"default": "Item 10"
},
{
"type": "richtext",
"id": "ac_content_10",
"label": "Item 10 Content",
"default": "<p>Description and content for Item 10.</p>"
}
]
},
{
"type": "rich_text",
"name": "Rich Text",
"settings": [
{
"type": "text",
"id": "rt_heading",
"label": "Heading",
"default": "Welcome"
},
{
"type": "richtext",
"id": "rt_text",
"label": "Text",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "center",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 60
}
]
},
{
"type": "slideshow",
"name": "Slideshow",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "This block controls the on page position and controls of a slideshow, slideshow image blocks must be added or this section will remain empty."
},
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width"
},
{
"type": "range",
"id": "slider_speed",
"min": 3,
"max": 10,
"step": 1,
"label": "Slideshow speed (seconds)",
"default": 5
},
{
"type": "select",
"id": "pager",
"label": "Navigation style",
"options": [
{
"value": "dots",
"label": "Dots"
},
{
"value": "arrows",
"label": "Arrows"
}
]
},
{
"type": "header",
"content": "Slideshow caption text"
},
{
"type": "range",
"id": "slide_heading_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 22
},
{
"type": "range",
"id": "subheading_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 14
},
{
"type": "range",
"id": "cta_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Button text size",
"default": 14
}
]
},
{
"type": "slideshow_image",
"name": "Slideshow image",
"settings": [
{
"type": "paragraph",
"content": "This block will show images if a Slideshow block has been selected."
},
{
"type": "header",
"content": "Desktop settings"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1800px x 800px recommended"
},
{
"type": "select",
"id": "text_align",
"label": "Text align",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "caption_horizontal_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Caption horizontal position",
"default": 50
},
{
"type": "range",
"id": "caption_vertical_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Caption vertical position",
"default": 50
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image",
"info":"800px x 1200px recommended"
},
{
"type": "checkbox",
"id": "hide_caption_background",
"label": "Hide caption background on mobile"
},
{
"type": "checkbox",
"id": "caption_below",
"label": "Position caption below image"
},
{
"type": "header",
"content": "Caption content"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Slide image title"
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "<p>Slide image subheading</p>"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Add a button",
"info": "Visible only if a link is chosen"
},
{
"type": "header",
"content": "Caption styles"
},
{
"type": "color",
"id": "slide_text_color",
"label": "Heading and subheading",
"default": "#000000"
},
{
"type": "color",
"id": "cta_color",
"label": "Button text",
"default": "#ffffff"
},
{
"type": "color",
"id": "cta_background",
"label": "Button background",
"default": "#000000"
},
{
"type": "color",
"id": "caption_background",
"label": "Caption background",
"default": "transparent"
},
{
"type": "range",
"id": "caption_background_opacity",
"min": 10,
"max": 100,
"step": 10,
"unit": "%",
"label": "Caption background opacity",
"default": 20
}
]
},
{
"type": "image_text_overlay",
"name": "Image w/Text Overlay",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width",
"default":true
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_height",
"min": 300,
"max": 700,
"step": 100,
"label": "Desktop section height",
"default": 400
},
{
"type": "range",
"id": "mobile_image_height",
"min": 200,
"max": 600,
"step": 100,
"label": "Mobile section height",
"default": 400
},
{
"type": "header",
"content": "Overlay Caption"
},
{
"type": "range",
"id": "horizontal_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Horizontal position",
"default": 50
},
{
"type": "range",
"id": "vertical_position",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Vertical position",
"default": 50
},
{
"type": "select",
"id": "text_align",
"label": "Text align",
"default":"center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Overlay Heading"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Image with text overlay"
},
{
"type": "richtext",
"id": "subheading",
"label": "Text",
"default": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>"
},
{
"id": "button_text",
"type": "text",
"label": "Button text",
"default": "Add a button",
"info": "Visible only if a link is chosen"
},
{
"type": "url",
"id": "link",
"label": "Button link"
},
{
"type": "range",
"id": "heading_font_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 26
},
{
"type": "range",
"id": "subheading_font_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Text size",
"default": 16
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text",
"default": "#fff"
},
{
"type": "color",
"id": "button_color",
"label": "Button background",
"default": "#000"
}
]
},
{
"type": "image_blocks",
"name": "Image gallery",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width"
},
{
"type": "header",
"content": "Image One"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "url",
"id": "link_1",
"label": "Link",
"info": "Optional"
},
{
"type": "text",
"id": "heading_1",
"label": "Heading",
"default": "Our collections"
},
{
"type": "text",
"id": "button_1",
"label": "Button text",
"default": "Explore"
},
{
"type": "color",
"id": "heading_color_1",
"label": "Heading color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_color_1",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background_1",
"label": "Button background",
"default": "#000"
},
{
"type": "range",
"id": "size_1",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "select",
"id": "text_options_1",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position_1",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position_1",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
},
{
"type": "select",
"id": "align_text_1",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Image Two"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image"
},
{
"type": "url",
"id": "link_2",
"label": "Link",
"info": "Optional"
},
{
"type": "text",
"id": "heading_2",
"label": "Heading",
"default": "Our collections"
},
{
"type": "text",
"id": "button_2",
"label": "Button text",
"default": "Explore"
},
{
"type": "color",
"id": "heading_color_2",
"label": "Heading color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_color_2",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background_2",
"label": "Button background",
"default": "#000"
},
{
"type": "range",
"id": "size_2",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "select",
"id": "text_options_2",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position_2",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position_2",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
},
{
"type": "select",
"id": "align_text_2",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Image Three"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image"
},
{
"type": "url",
"id": "link_3",
"label": "Link",
"info": "Optional"
},
{
"type": "text",
"id": "heading_3",
"label": "Heading",
"default": "Our collections"
},
{
"type": "text",
"id": "button_3",
"label": "Button text",
"default": "Explore"
},
{
"type": "color",
"id": "heading_color_3",
"label": "Heading color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_color_3",
"label": "Button color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_background_3",
"label": "Button background",
"default": "#000"
},
{
"type": "range",
"id": "size_3",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "select",
"id": "text_options_3",
"default": "on_image",
"options": [
{
"value": "on_image",
"label": "Over image"
},
{
"value": "below_image",
"label": "Below image"
}
],
"label": "Text position"
},
{
"type": "range",
"id": "vertical_position_3",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image vertical position",
"default": 12
},
{
"type": "range",
"id": "horizontal_position_3",
"min": 0,
"max": 100,
"step": 2,
"unit": "%",
"label": "Text over image horizontal position",
"default": 14
},
{
"type": "select",
"id": "align_text_3",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
}
]
},
{
"type": "featured_collection",
"name": "Featured Collection",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured collections"
},
{
"id": "collection",
"type": "collection",
"label": "Collection"
},
{
"id": "carousel",
"type": "checkbox",
"label": "Display in carousel"
},
{
"type": "range",
"id": "grid",
"min": 2,
"max": 5,
"step": 1,
"label": "Product grid",
"default": 4
},
{
"type": "range",
"id": "limit",
"min": 4,
"max": 12,
"step": 1,
"label": "Products shown",
"default": 4
}
]
},
{
"type": "collection_list",
"name": "Collection List",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured collections"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "cl_collections_per_row",
"min": 2,
"max": 4,
"step": 1,
"label": "Collections per row",
"default": 4
},
{
"type": "select",
"id": "cl_title_position",
"label": "Collection title position",
"options": [
{
"value": "below",
"label": "Below image"
},
{
"value": "floating",
"label": "Floating on image"
}
]
},
{
"type": "header",
"content": "Choose Collections"
},
{
"label": "Collection 1",
"id": "cl_collection_1",
"type": "collection"
},
{
"label": "Collection 2",
"id": "cl_collection_2",
"type": "collection"
},
{
"label": "Collection 3",
"id": "cl_collection_3",
"type": "collection"
},
{
"label": "Collection 4",
"id": "cl_collection_4",
"type": "collection"
}
]
},
{
"type": "featured_video",
"name": "Featured Video",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Enable full width"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured video"
},
{
"type": "select",
"id": "text_align",
"label": "Heading alignment",
"default": "center",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
]
},
{
"type": "video_url",
"id": "video_url",
"label": "YouTube or Vimeo link",
"accept": [
"youtube",
"vimeo"
]
}
]
},
{
"type": "newsletter_subscribe",
"name": "Newsletter Subscribe",
"settings": [
{
"type": "range",
"id": "max_width",
"min": 50,
"max": 100,
"step": 5,
"unit": "%",
"label": "Content width less than 100% width will center on the page",
"default": 100
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Subscribe to our newsletter"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "#000000"
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "<p>Signup for our newsletter to stay up to date on sales and events.</p>"
},
{
"type": "range",
"id": "subheading_font_size",
"min": 12,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 16
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "#000"
},
{
"type": "paragraph",
"content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
}
]
}
],
"default": {
"blocks": [
{
"type": "image_text_overlay"
},
{
"type": "page_title"
},
{
"type": "page_content"
},
{
"type": "featured_collection"
},
{
"type": "rich_text"
},
{
"type": "image_blocks"
}
]
}
}
{% endschema %}

TagLock
Visitor
1 0 1

Hey Ninthony - can this be modified to create desktop and mobile settings for a slideshow? (i.e., the different specific images within a slideshow section). The image we'd like to use for our first slide needs to be modified into two separate image files to fit the desktop and mobile dimensions. Let me know

Ninthony
Shopify Partner
2329 350 1023

You can definitely use this same kind of approach but initialize a slider, I've done it for a few clients. If you know how to set up a slider, it should be fairly easy to adapt the code to fit your needs.

If my solution helped you, please like it and accept it as the solution!
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 😄
User3423523r35
Visitor
1 0 1

Ninthony,

 

Your solutions seems to have worked perfectly for us. Thank you for all your help. We have been searching months for a solution.

 

I have a question for you. How can we get this code to appear under a separate page on our website (pages.section)?

 

Edit: For some reason this was posted under the wrong thread - Here is the thread and code I am referring too: https://community.shopify.com/c/shopify-design/different-images-for-mobile-than-desktop-web/td-p/522...

HALLOPUPPY
Visitor
1 0 1

Hey !

I did what you said and it went perfect, the only problem is that I want to display differnt pictures for desktop and phone in the SLIDESHOW.

is there any code with schema that I can put in ? tried the one that you posted and it didnt work in that section...

thank you for your help! (:

JerryATL
New Member
5 0 0

Hi Nithony, I'm trying to follow your instructions as well and I got as far as adding the code to the schema in my theme's slideshow.liquid section and it allows me to upload a mobile image for each slide.

However, when I get to the HTML part, I'm a bit confused on where this goes. I inserted the Style code where the <Style>...</Style> section is in the theme.liquid code, but unsure of where to put the rest (<div class="velaBanner"....)

Below is the theme.liquid code for my Retina theme (from Out of the Sandbox) with the style code inserted

Thanks for the help!!

 

<!DOCTYPE html>
<html lang="{{ shop.locale }}">
  <head>
	  
    <meta name="p:domain_verify" content="3e626da3f585c470f9d76a74508aad0d"/> 
    <meta charset="utf-8">
    <meta http-equiv="cleartype" content="on">
    <meta name="robots" content="index,follow">
    
 

    {% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %}{% endif %}
    <title>{% if template contains "index" %}{{ page_title }}{% else %}{{ page_title }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}{% endif %}{% unless page_title contains shop.name %} - {{ shop.name }}{% endunless %}{% endif %}</title>

    {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags | escape }}.{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}.{% endif %}" />
    {% endif %}

    {% include 'social-meta-info' %}

    {% if collection.previous_product %}
    <link rel="prev" href="{{ collection.previous_product }}">
    {% endif %}
    {% if collection.next_product %}
    <link rel="next" href="{{ collection.next_product }}">
    {% endif %}

    <!-- Mobile Specific Metas -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="{{ settings.shop_bg_color }}">

    <!-- Stylesheets for Retina 4.7.0 -->
    {{ 'styles.scss.css' | asset_url | stylesheet_tag }}
    <!--[if lte IE 9]>
{{ 'ie.css' | asset_url | stylesheet_tag }}
<![endif]-->

    {% if settings.favicon != nil %}
    <link rel="shortcut icon" type="image/x-icon" href="{{ settings.favicon | img_url: '180x180' }}">
    <link rel="apple-touch-icon" href="{{ settings.favicon | img_url: '180x180' }}"/>
    <link rel="apple-touch-icon" sizes="72x72" href="{{ settings.favicon | img_url: '72x72' }}"/>
    <link rel="apple-touch-icon" sizes="114x114" href="{{ settings.favicon | img_url: '114x114' }}"/>
    <link rel="apple-touch-icon" sizes="180x180" href="{{ settings.favicon | img_url: '180x180' }}"/>
    <link rel="apple-touch-icon" sizes="228x228" href="{{ settings.favicon | img_url: '228x228' }}"/>
    {% else %}
    <link rel="shortcut icon" type="image/x-icon" href="{{ 'favicon.png' | asset_url }}">
    {% endif %}
    

    <link rel="canonical" href="{{ canonical_url }}" />

    <script>
      {% include 'js-variables' %}
    </script>

    {% if template contains 'customer' %}
    {{ "shopify_common.js" | shopify_asset_url | script_tag }}
    {{ "customer_area.js"  | shopify_asset_url | script_tag }}
    {% endif %}

    {{ 'app.js' | asset_url | script_tag }}
    {{ content_for_header }}
    {%- include 'bold-common' -%}
    {%- include 'bold-product' with product, hide_action: 'header' -%}
    {%- include 'bold-ro-init' -%}
    {{ 'bold-ro.css' | asset_url | stylesheet_tag }}

    <noscript>
      <style>
        
        .hidden_desktop{
          display:block;
        }
        .hidden_mobile {
          display: none;
        }
        @media (min-width:992px){
          .hidden_desktop{
            display:none;
          }
          .hidden_mobile {
            display: block;
          }
        }
        
        
        img.lazyload[data-sizes="auto"] {
          display: none !important;
        }
        .image__fallback {
          width: 100vw;
          display: block !important;
          max-width: 100vw !important;
          margin-bottom: 0;
        }
        .no-js-only {
          display: inherit !important;
        }
        .icon-cart.cart-button {
          display: none;
        }
        .lazyload {
          opacity: 1;
          -webkit-filter: blur(0);
          filter: blur(0);
        }
        .animate_right,
        .animate_left,
        .animate_up,
        .animate_down {
          opacity: 1;
        }
        .product_section .product_form {
          opacity: 1;
        }
        .multi_select,
        form .select {
          display: block !important;
        }
        .swatch_options {
          display: none;
        }
        .primary_logo {
          display: block;
        }
      </style>
    </noscript>

    {% render 'pagefly-header' %}
   
{% render 'pagefly-header' %}
 {% include 'kart_discount' %}
  {% include 'bold-checkout-fix' %}
  <script src='{{ 'better-search.js' | asset_url }}' defer='defer'></script></head>  
  {% if template contains "index" or template contains "article" or template contains "banner" or template contains "page.details" or template contains "blog" or template contains "faq" or template contains "contact" %}
  {% assign feature_image = true %}
  {% else %}
  {% assign feature_image = false %}
  {% endif %}
  <body class="{{ template | replace: '.', '-' | handle }} {% if feature_image %}feature_image{% endif %}"
        data-money-format="{{ shop.money_format }}" data-active-currency="{{ shop.currency }}">    
    
    
    <div id="content_wrapper">

      {% section 'header' %}

      {{ content_for_layout }}

      {% include 'cart-shipping-calculator' %}
      {% section 'footer' %}

      <div id="search">
        <div class="container">
          <div class="ten columns offset-by-three center">
            <div class="right search-close">
              <span class="icon-close"></span>
            </div>
            <form action="/search">
              {% if settings.search_option != 'everything' %}
              <input type="hidden" name="type" value="product" />
              {% endif %}
              <span class="icon-search search-submit"></span>
              <input type="text" name="q" placeholder="{{ 'general.search.placeholder_with_shop_name' | t: shop_name: shop.name }}" value="{% if search and search.results.first.price %}{{ search.terms }}{% endif %}" autocapitalize="off" autocomplete="off" autocorrect="off" />
            </form>
          </div>
        </div>
      </div>
    </div>
    {% if settings.size_chart != blank %}
    <div id="size-chart" class="size_chart_content">
      <h5 class="center">{{ pages[settings.size_chart].title }}</h5>
      {{ pages[settings.size_chart].content }}
    </div>
    {% endif %}

    {% include 'newsletter-popup' %}

    {% if settings.show_multiple_currencies %}
    {% include 'currencies' %}
    {% endif %}

    {% if settings.disqus_enabled %}
    {% if template contains "blog" or template contains "article" or template contains "index" %}
    <script id="dsq-count-scr" src="//{{ settings.disqus_shortname }}.disqus.com/count.js" async></script>
    {% endif %}
    {% endif %}
  </body>
</html>

 

Ninthony
Shopify Partner
2329 350 1023

The html would go in the related section, not in theme.liquid -- Also, I'd keep the style tags with the section as well. If you look above your initial post, I posted a very simple code that should allow you to put both a mobile and desktop image. If you want more functionality though you'll have to add it in yourself with the resources I provided underneath.

If my solution helped you, please like it and accept it as the solution!
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 😄
EnableX
New Member
5 0 0

hey @Ninthony 


is there a way to change this code to have a sliding slideshow? Ex. more than one image on mobile and desktop?

You are an amazing help in the community, thank you in advanced! 😄

Ninthony
Shopify Partner
2329 350 1023

Are you referring to the non optimized code that @Brittany_Witt is using? I can probably make up a slideshow version.

If my solution helped you, please like it and accept it as the solution!
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 😄
EnableX
New Member
5 0 0

@Ninthony I'm not sure, you posted some code that allowed for a "desktop-mobile-banner" on the homepage. that also allowed people to click it and it leads to a collection. This is the code I'm referring to:

<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>
</div>
{% endif %}

{% schema %}


{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

dawidglap
Visitor
1 0 0

hi i am trying your solution about the two different images for the header for mobile and desktop version. but i have always JSON error.. can you help me to solve it.

i used your code:  

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},

 

Brittany_Witt
Explorer
52 0 17

@Ninthony , 

I've since added 6 images on my homepage with this function (showing one image for desktop and a different one for mobile). But now my page speed has decreased from a score of 30 (which said that my site speed was as fast as similar sites) to a score of 27 (which now says that my site is slower than similar sites).

I'm looking into something called lazy loading which loads offscreen or hidden images after all critical resources have finished loading to lower "Time to Interactive". Here's the resource info on this.

Is there a way I could insert some lazy loading code so that when people are on mobile the desktop images load last. And if people are on desktop then mobile images load last?

Much appreciated!

Brittany Witt
Ninthony
Shopify Partner
2329 350 1023

@Brittany_Witt Yeah you could definitely implement lazy loading. Lazy loading is a technique that makes it so the images don't load until they come into the viewport, making the page render faster. As I stated when I posted it, the code is not optimized to load the images at different sizes depending on screen width and resolution which is typically how you should serve images to preserve page speed. 

I'd recommend Lazy Sizes: http://afarkas.github.io/lazysizes/#examples

Never mind the couple of broken images, they probably just dont exist anymore, Ive never had any trouble with the library.

 

Download & How to: https://github.com/aFarkas/lazysizes

Small js library that allows you to use lazy loading, . You will just need to adjust the image tags to follow a different syntax. You'll use data attributes to store the source of your images and add the class "lazyload" to the image tags. Then the JS will automatically listen for the images to come into the view port, then take their source out of the data attributes and put them into their src attribute so it displays on the page. Should be able to figure it out if you follow the How To section.

If my solution helped you, please like it and accept it as the solution!
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 😄
FoxStarr
Visitor
2 0 0

t crazy how you answered the other girl's question but just ignored mine. How do I delete my question. I will figure it out myself and I don't want to keep getting your responses to her.

Ninthony
Shopify Partner
2329 350 1023

@FoxStarr You should make your own topic and actually lay out the problem, the question is very vague. I didnt get notified to your question because you didn't @ mention me and when I clicked on my notification it brought me directly to her post, I don't review every reply made to a thread.

If my solution helped you, please like it and accept it as the solution!
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 😄
unofficial2321
Shopify Partner
18 0 3

hi ....

It's the code of the slide show of parallax theme ,,,,, i couldn't bring the mobile version image in the page

{% comment %}
** Slideshow - dynamic **
- Draggable section
- Uses blocks
{% endcomment %}

{% comment %} Content settings {% endcomment %}
{%- assign blocks = section.blocks -%}
{% comment %} End content settings {% endcomment %}

{% if blocks.size > 0 %}
  <section id="homepage_slider-{{ section.id }}" class="flexslider homepage_slider animation--fade {% if section.settings.image_stretch == false %}sixteen columns{% endif %} slider-loading mobile-parallax-enabled--{{ settings.enable_mobile_parallax }} mobile-image-crop-enabled--{{ settings.slideshow_images_crop }}" data-slider-id="homepage_slider-{{ section.id }}" data-slideshow-animation="fade" data-slideshow-speed="{{ section.settings.slideshow_speed}}">
    <ul class="slides">
      {% for block in blocks %}
        {% comment %} Content settings {% endcomment %}
        {%- assign image = block.settings.image -%}
        {% comment %} End content settings {% endcomment %}

        {%- assign text_position = block.settings.text_position | split: ' ' -%}

        <li {{ block.shopify_attributes }} data-block-id="{{ block.id }}">
          <div id="slider-{{ block.id }}" class="slide">
            {% comment %} Overwrite background-position values set by parallax library {% endcomment %}
            {% style %}
              #slider-{{ block.id }} .parallax__container .parallax {
                background-position: {{ block.settings.image_focal_point}} !important;
              }

              #slider-{{ block.id }} .banner__wrap img {
                object-position: {{ block.settings.image_focal_point }};
                -o-object-position: {{ block.settings.image_focal_point }};
              }
            {% endstyle %}

            {% capture i %}{% cycle "1", "2" %}{% endcapture %}

            {% if section.settings.parallax_effect %}
              <div class="parallax__wrap horizontal-text-position--{{ text_position[0] }} vertical-text-position--{{ text_position[1] }}">
                <div class="container banner__text text-align--{{ text_position[0] }}">
                  {% if block.settings.link != blank and block.settings.button_label == blank %}
                    <a href="{{ block.settings.link }}" class="full-link">{{ block.settings.link }}</a>
                  {% endif %}

                  <div class="banner__inner-text">
                    {% if forloop.first == true and block.settings.title != blank %}
                      <h1 class="headline">{{ block.settings.title | escape }}</h1>
                    {% elsif block.settings.title != blank %}
                      <p class="headline">{{ block.settings.title | escape }}</p>
                    {% endif %}

                    {% if block.settings.subtitle != blank %}
                      <div class="subtitle">
                        <p>{{ block.settings.subtitle }}</p>
                      </div>
                    {% endif %}

                    {% if block.settings.button_label != blank %}
                      <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} class="action_button">{{ block.settings.button_label | escape }}</a>
                    {% endif %}
                  </div>
                </div>

                <div class="parallax" {% if block.settings.image != blank %}data-parallax-image="{{ block.settings.image | img_url: '2048x' }}"{% else %}style="background-image:url({{ 'placeholder.svg' | asset_url  }})"{% endif %}>
                  <noscript>
                    <img src="{{ block.settings.image | img_url: '2000x' }}" alt="{{ alt | escape }}" class="image__fallback">
                  </noscript>
               
                </div>
                   
                <img alt class="mobile-placeholder-svg" src="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ block.settings.image.width }}'%20height='{{ block.settings.image.height }}'></svg>"/>
              </div>
            {% else %}
              <div class="banner__wrap">
                <div class="banner horizontal-text-position--{{ text_position[0] }} vertical-text-position--{{ text_position[1] }}">
                  <div class="container banner__text text-align--{{ text_position[0] }}">
                    {% if block.settings.link != blank and block.settings.button_label == blank %}
                      <a href="{{ block.settings.link }}" class="full-link">{{ block.settings.link }}</a>
                    {% endif %}

                    <div class="banner__inner-text">
                      {% if forloop.first == true and block.settings.title != blank %}
                        <h1 class="headline">{{ block.settings.title | escape }}</h1>
                      {% elsif block.settings.title != blank %}
                        <p class="headline">{{ block.settings.title | escape }}</p>
                      {% endif %}

                      {% if block.settings.subtitle != blank %}
                        <div class="subtitle">
                          <p>{{ block.settings.subtitle }}</p>
                        </div>
                      {% endif %}

                      {% if block.settings.button_label != blank %}
                        <a {% if block.settings.link != blank %}href="{{ block.settings.link }}"{% endif %} class="action_button">{{ block.settings.button_label | escape }}</a>
                      {% endif %}
                    </div>
                  </div>
                </div>

                {% if block.settings.image != blank %}
                  <div class="banner__image-wrapper">
                    {% render 'image-element',
                            image: block.settings.image,
                            alt: block.settings.image.alt,
                            stretch_width: true
                    %}
                  </div>
                {% else %}
                  <img src="{{ 'placeholder.svg' | asset_url }}"/>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

<style>
  {% if section.settings.parallax_effect %}
    #homepage_slider-{{ section.id }} .parallax__wrap,
    #homepage_slider-{{ section.id }} .parallax__container .parallax {
      height: {{ section.settings.parallax_image_height }}px;
    }
    .flexslider.parallax_effect--true .parallax--mobile img {
      display: block;
    }
  {% endif %}

  @media only screen and (max-width: 798px) {
    {% if settings.slideshow_images_crop or section.settings.parallax_effect and settings.enable_mobile_parallax %}
      #homepage_slider-{{ section.id }} .banner__wrap,
      #homepage_slider-{{ section.id }} .parallax__wrap,
      #homepage_slider-{{ section.id }} .parallax__container .parallax {
        height: {{ section.settings.parallax_image_height | divided_by: 2 }}px;
      }
    {% else %}
      #homepage_slider-{{ section.id }} .banner__wrap,
      #homepage_slider-{{ section.id }} .parallax__wrap {
        height: auto;
      }
    {% endif %}
  }
  .flexslider, .slides, .banner_warp img{
 
    height : 100vh !important;
 
  }
  @media only screen and (max-width: 376px) {
 
    .flexslider, .slides, .banner_warp img {
   
    height: 80vh !important;
     
    }
  }
 
</style>

{% schema %}
  {
    "name": "Slideshow",
    "class": "shopify-section--slideshow slideshow-section under-menu jsSlideshow parallax-banner",
    "max_blocks": 12,
    "settings": [
      {
        "type": "range",
        "id": "slideshow_speed",
        "label": "Change slides every",
        "min": 4,
        "max": 12,
        "step": 1,
        "default": 6,
        "unit": "sec"
      },
      {
        "type": "header",
        "content": "Parallax"
      },
      {
        "type": "checkbox",
        "id": "parallax_effect",
        "label": "Enable parallax scrolling",
        "default": true
      },
      {
        "type": "range",
        "id": "parallax_image_height",
        "label": "Parallax section height",
        "min": 300,
        "max": 1000,
        "step": 20,
        "default": 600,
        "unit": "px"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "1600 x 1000px recommended"
          },
 
{
"type" : "image_picker",
            "id" : "mobile_image",
            "label" : "Mobile Image",
            "info" : "400 x 600px is recommended"
          },

          {
            "type": "select",
            "id": "image_focal_point",
            "label": "Image focal point",
            "info": "Used to keep the subject of your photo in view. On mobile, only applies to cropped images.",
            "default": "center center",
            "options": [
              {
                "value": "20% 0",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "80% 0",
                "label": "Top right"
              },
              {
                "value": "20% 50%",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "80% 50%",
                "label": "Right"
              },
              {
                "value": "20% 100%",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "80% 100%",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Your headline here"
          },
          {
            "type": "text",
            "id": "subtitle",
            "label": "Subheading",
            "default": "This is a short subheading for your slideshow image"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          },
          {
            "type": "select",
            "id": "text_position",
            "label": "Text position",
            "default": "center center",
            "options": [
              {
                "value": "left top",
                "label": "Top left"
              },
              {
                "value": "center top",
                "label": "Top center"
              },
              {
                "value": "right top",
                "label": "Top right"
              },
              {
                "value": "left center",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "right center",
                "label": "Right"
              },
              {
                "value": "left bottom",
                "label": "Bottom left"
              },
              {
                "value": "center bottom",
                "label": "Bottom center"
              },
              {
                "value": "right bottom",
                "label": "Bottom right"
              }
            ]
          }
        ]
      }
    ],
    "presets": [{
      "name": "Slideshow",
      "category": "Image",
      "settings": {
      },
      "blocks": [
        {
          "type": "image",
          "settings": {
            "image": "",
            "title": "Parallax Shopify Theme",
            "subtitle": "",
            "text_position": "center center",
            "button_label": "",
            "link": ""
          }
        },
        {
          "type": "image",
            "settings": {
            "image": "",
            "title": "",
            "subtitle": "",
            "text_position": "center center",
            "button_label": "",
            "link": ""
          }
        }
      ]
    }]
  }
{% endschema %}

<script data-theme-editor-load-script src="{{ 'jsSlideshow.js' | asset_url }}"></script>

slideshow of parallax theme and i want to add different images for mobile than desktop web can anyone help me.....

Brittany_Witt
Explorer
52 0 17

Hello @Ninthony 

I'm trying to implement the lazy loading for the desktop-mobile-banner.liquid code you shared in order to achieve different images for desktop and mobile.

I followed the links you provided in this reply but I'm still not sure what I need to edit in the original code to apply the lazy loading. This resource shares a bunch of code snippets and I'm not sure how or where to use them. 

I have a file called lazysizes.js in my Assets folder that I believe came with my Debut theme, here's the code:

/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function (d) { b(a.lazySizes, d), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c, d) { "use strict"; function e(a) { var b = getComputedStyle(a, null) || {}, c = b.fontFamily || "", d = c.match(j) || "", e = d && c.match(k) || ""; return e && (e = e[1]), { fit: d && d[1] || "", position: n[e] || e || "center" } } function f(a, b) { var d, e, f = c.cfg, g = a.cloneNode(!1), h = g.style, i = function () { var b = a.currentSrc || a.src; b && e !== b && (e = b, h.backgroundImage = "url(" + (m.test(b) ? JSON.stringify(b) : b) + ")", d || (d = !0, c.rC(g, f.loadingClass), c.aC(g, f.loadedClass))) }, j = function () { c.rAF(i) }; a._lazysizesParentFit = b.fit, a.addEventListener("lazyloaded", j, !0), a.addEventListener("load", j, !0), g.addEventListener("load", function () { var a = g.currentSrc || g.src; a && a != l && (g.src=l, g.srcset = "") }), c.rAF(function () { var d = a, e = a.parentNode; "PICTURE" == e.nodeName.toUpperCase() && (d = e, e = e.parentNode), c.rC(g, f.loadedClass), c.rC(g, f.lazyClass), c.aC(g, f.loadingClass), c.aC(g, f.objectFitClass || "lazysizes-display-clone"), g.getAttribute(f.srcsetAttr) && g.setAttribute(f.srcsetAttr, ""), g.getAttribute(f.srcAttr) && g.setAttribute(f.srcAttr, ""), g.src=l, g.srcset = "", h.backgroundRepeat = "no-repeat", h.backgroundPosition = b.position, h.backgroundSize = b.fit, d.style.display = "none", a.setAttribute("data-parent-fit", b.fit), a.setAttribute("data-parent-container", "prev"), e.insertBefore(g, d), a._lazysizesParentFit && delete a._lazysizesParentFit, a.complete && i() }) } var g = b.createElement("a").style, h = "objectFit" in g, i = h && "objectPosition" in g, j = /object-fit["']*\s*:\s*["']*(contain|cover)/, k = /object-position["']*\s*:\s*["']*(.+?)(?=($|,|'|"|;))/, l = "data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", m = /\(|\)|'/, n = { center: "center", "50% 50%": "center" }; if (!h || !i) { var o = function (a) { if (a.detail.instance == c) { var b = a.target, d = e(b); !d.fit || h && "center" == d.position || f(b, d) } }; a.addEventListener("lazyunveilread", o, !0), d && d.detail && o(d) } });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; function d(b, c) { var d, e, f, g, h = a.getComputedStyle(b); e = b.parentNode, g = { isPicture: !(!e || !m.test(e.nodeName || "")) }, f = function (a, c) { var d = b.getAttribute("data-" + a); if (!d) { var e = h.getPropertyValue("--ls-" + a); e && (d = e.trim()) } if (d) { if ("true" == d) d = !0; else if ("false" == d) d = !1; else if (l.test(d)) d = parseFloat(d); else if ("function" == typeof j[a]) d = j[a](b, d); else if (q.test(d)) try { d = JSON.parse(d) } catch (a) { } g[a] = d } else a in j && "function" != typeof j[a] ? g[a] = j[a] : c && "function" == typeof j[a] && (g[a] = j[a](b, d)) }; for (d in j) f(d); return c.replace(p, function (a, b) { b in g || f(b, !0) }), g } function e(a, b) { var c = [], d = function (a, c) { return k[typeof b[c]] ? b[c] : a }; return c.srcset = [], b.absUrl && (s.setAttribute("href", a), a = s.href), a = ((b.prefix || "") + a + (b.postfix || "")).replace(p, d), b.widths.forEach(function (d) { var e = b.widthmap[d] || d, f = b.aspectratio || b.ratio, g = !b.aspectratio && j.traditionalRatio, h = { u: a.replace(n, e).replace(o, f ? g ? Math.round(d * f) : Math.round(d / f) : ""), w: d }; c.push(h), c.srcset.push(h.c = h.u + " " + d + "w") }), c } function f(a, c, d) { var f = 0, g = 0, h = d; if (a) { if ("container" === c.ratio) { for (f = h.scrollWidth, g = h.scrollHeight; !(f && g || h === b);)h = h.parentNode, f = h.scrollWidth, g = h.scrollHeight; f && g && (c.ratio = g / f) } a = e(a, c), a.isPicture = c.isPicture, u && "IMG" == d.nodeName.toUpperCase() ? d.removeAttribute(i.srcsetAttr) : d.setAttribute(i.srcsetAttr, a.srcset.join(", ")), Object.defineProperty(d, "_lazyrias", { value: a, writable: !0 }) } } function g(a, b) { var e = d(a, b); return j.modifyOptions.call(a, { target: a, details: e, detail: e }), c.fire(a, "lazyriasmodifyoptions", e), e } function h(a) { return a.getAttribute(a.getAttribute("data-srcattr") || j.srcAttr) || a.getAttribute(i.srcsetAttr) || a.getAttribute(i.srcAttr) || a.getAttribute("data-pfsrcset") || "" } var i, j, k = { string: 1, number: 1 }, l = /^\-*\+*\d+\.*\d*$/, m = /^picture$/i, n = /\s*\{\s*width\s*\}\s*/i, o = /\s*\{\s*height\s*\}\s*/i, p = /\s*\{\s*([a-z0-9]+)\s*\}\s*/gi, q = /^\[.*\]|\{.*\}$/, r = /^(?:auto|\d+(px)?)$/, s = b.createElement("a"), t = b.createElement("img"), u = "srcset" in t && !("sizes" in t), v = !!a.HTMLPictureElement && !u; !function () { var b, d = function () { }, e = { prefix: "", postfix: "", srcAttr: "data-src", absUrl: !1, modifyOptions: d, widthmap: {}, ratio: !1, traditionalRatio: !1, aspectratio: !1 }; i = c && c.cfg || a.lazySizesConfig, i || (i = {}, a.lazySizesConfig = i), i.supportsType || (i.supportsType = function (a) { return !a }), i.rias || (i.rias = {}), "widths" in (j = i.rias) || (j.widths = [], function (a) { for (var b, c = 0; !b || b < 3e3;)c += 5, c > 30 && (c += 1), b = 36 * c, a.push(b) }(j.widths)); for (b in e) b in j || (j[b] = e[b]) }(), addEventListener("lazybeforesizes", function (a) { if (a.detail.instance == c) { var b, d, e, k, l, m, o, p, q, s, t, u, x; if (b = a.target, a.detail.dataAttr && !a.defaultPrevented && !j.disabled && (q = b.getAttribute(i.sizesAttr) || b.getAttribute("sizes")) && r.test(q)) { if (d = h(b), e = g(b, d), t = n.test(e.prefix) || n.test(e.postfix), e.isPicture && (k = b.parentNode)) for (l = k.getElementsByTagName("source"), m = 0, o = l.length; m < o; m++)(t || n.test(p = h(l[m]))) && (f(p, e, l[m]), u = !0); t || n.test(d) ? (f(d, e, b), u = !0) : u && (x = [], x.srcset = [], x.isPicture = !0, Object.defineProperty(b, "_lazyrias", { value: x, writable: !0 })), u && (v ? b.removeAttribute(i.srcAttr) : "auto" != q && (s = { width: parseInt(q, 10) }, w({ target: b, detail: s }))) } } }, !0); var w = function () { var d = function (a, b) { return a.w - b.w }, e = function (a) { var b, c, d = a.length, e = a[d - 1], f = 0; for (f; f < d; f++)if (e = a[f], e.d = e.w / a.w, e.d >= a.d) { !e.cached && (b = a[f - 1]) && b.d > a.d - .13 * Math.pow(a.d, 2.2) && (c = Math.pow(b.d - .6, 1.6), b.cached && (b.d += .15 * c), b.d + (e.d - a.d) * c > a.d && (e = b)); break } return e }, f = function (a, b) { var d; return !a._lazyrias && c.pWS && (d = c.pWS(a.getAttribute(i.srcsetAttr || ""))).length && (Object.defineProperty(a, "_lazyrias", { value: d, writable: !0 }), b && a.parentNode && (d.isPicture = "PICTURE" == a.parentNode.nodeName.toUpperCase())), a._lazyrias }, g = function (b) { var d = a.devicePixelRatio || 1, e = c.getX && c.getX(b); return Math.min(e || d, 2.4, d) }, h = function (b, c) { var h, i, j, k, l, m; if (l = b._lazyrias, l.isPicture && a.matchMedia) for (i = 0, h = b.parentNode.getElementsByTagName("source"), j = h.length; i < j; i++)if (f(h[i]) && !h[i].getAttribute("type") && (!(k = h[i].getAttribute("media")) || (matchMedia(k) || {}).matches)) { l = h[i]._lazyrias; break } return (!l.w || l.w < c) && (l.w = c, l.d = g(b), m = e(l.sort(d))), m }, j = function (d) { if (d.detail.instance == c) { var e, g = d.target; if (!u && (a.respimage || a.picturefill || lazySizesConfig.pf)) return void b.removeEventListener("lazybeforesizes", j); ("_lazyrias" in g || d.detail.dataAttr && f(g, !0)) && (e = h(g, d.detail.width)) && e.u && g._lazyrias.cur != e.u && (g._lazyrias.cur = e.u, e.cached = !0, c.rAF(function () { g.setAttribute(i.srcAttr, e.u), g.setAttribute("src", e.u) })) } }; return v ? j = function () { } : addEventListener("lazybeforesizes", j), j }() });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = b(a, a.document); a.lazySizes = c, "object" == typeof module && module.exports && (module.exports = c) }(window, function (a, b) { "use strict"; if (b.getElementsByClassName) { var c, d, e = b.documentElement, f = a.Date, g = a.HTMLPictureElement, h = "addEventListener", i = "getAttribute", j = a[h], k = a.setTimeout, l = a.requestAnimationFrame || k, m = a.requestIdleCallback, n = /^picture$/i, o = ["load", "error", "lazyincluded", "_lazyloaded"], p = {}, q = Array.prototype.forEach, r = function (a, b) { return p[b] || (p[b] = new RegExp("(\\s|^)" + b + "(\\s|$)")), p[b].test(a[i]("class") || "") && p[b] }, s = function (a, b) { r(a, b) || a.setAttribute("class", (a[i]("class") || "").trim() + " " + b) }, t = function (a, b) { var c; (c = r(a, b)) && a.setAttribute("class", (a[i]("class") || "").replace(c, " ")) }, u = function (a, b, c) { var d = c ? h : "removeEventListener"; c && u(a, b), o.forEach(function (c) { a[d](c, b) }) }, v = function (a, d, e, f, g) { var h = b.createEvent("Event"); return e || (e = {}), e.instance = c, h.initEvent(d, !f, !g), h.detail = e, a.dispatchEvent(h), h }, w = function (b, c) { var e; !g && (e = a.picturefill || d.pf) ? (c && c.src && !b[i]("srcset") && b.setAttribute("srcset", c.src), e({ reevaluate: !0, elements: [b] })) : c && c.src && (b.src=c.src) }, x = function (a, b) { return (getComputedStyle(a, null) || {})[b] }, y = function (a, b, c) { for (c = c || a.offsetWidth; c < d.minSize && b && !a._lazysizesWidth;)c = b.offsetWidth, b = b.parentNode; return c }, z = function () { var a, c, d = [], e = [], f = d, g = function () { var b = f; for (f = d.length ? e : d, a = !0, c = !1; b.length;)b.shift()(); a = !1 }, h = function (d, e) { a && !e ? d.apply(this, arguments) : (f.push(d), c || (c = !0, (b.hidden ? k : l)(g))) }; return h._lsFlush = g, h }(), A = function (a, b) { return b ? function () { z(a) } : function () { var b = this, c = arguments; z(function () { a.apply(b, c) }) } }, B = function (a) { var b, c = 0, e = d.throttleDelay, g = d.ricTimeout, h = function () { b = !1, c = f.now(), a() }, i = m && g > 49 ? function () { m(h, { timeout: g }), g !== d.ricTimeout && (g = d.ricTimeout) } : A(function () { k(h) }, !0); return function (a) { var d; (a = !0 === a) && (g = 33), b || (b = !0, d = e - (f.now() - c), d < 0 && (d = 0), a || d < 9 ? i() : k(i, d)) } }, C = function (a) { var b, c, d = 99, e = function () { b = null, a() }, g = function () { var a = f.now() - c; a < d ? k(g, d - a) : (m || e)(e) }; return function () { c = f.now(), b || (b = k(g, d)) } }; !function () { var b, c = { lazyClass: "lazyload", loadedClass: "lazyloaded", loadingClass: "lazyloading", preloadClass: "lazypreload", errorClass: "lazyerror", autosizesClass: "lazyautosizes", srcAttr: "data-src", srcsetAttr: "data-srcset", sizesAttr: "data-sizes", minSize: 40, customMedia: {}, init: !0, expFactor: 1.5, hFac: .8, loadMode: 2, loadHidden: !0, ricTimeout: 0, throttleDelay: 125 }; d = a.lazySizesConfig || a.lazysizesConfig || {}; for (b in c) b in d || (d[b] = c[b]); a.lazySizesConfig = d, k(function () { d.init && F() }) }(); var D = function () { var g, l, m, o, p, y, D, F, G, H, I, J, K = /^img$/i, L = /^iframe$/i, M = "onscroll" in a && !/(gle|ing)bot/.test(navigator.userAgent), N = 0, O = 0, P = 0, Q = -1, R = function (a) { P-- , (!a || P < 0 || !a.target) && (P = 0) }, S = function (a) { return null == J && (J = "hidden" == x(b.body, "visibility")), J || "hidden" != x(a.parentNode, "visibility") && "hidden" != x(a, "visibility") }, T = function (a, c) { var d, f = a, g = S(a); for (F -= c, I += c, G -= c, H += c; g && (f = f.offsetParent) && f != b.body && f != e;)(g = (x(f, "opacity") || 1) > 0) && "visible" != x(f, "overflow") && (d = f.getBoundingClientRect(), g = H > d.left && G < d.right && I > d.top - 1 && F < d.bottom + 1); return g }, U = function () { var a, f, h, j, k, m, n, p, q, r, s, t, u = c.elements; if ((o = d.loadMode) && P < 8 && (a = u.length)) { for (f = 0, Q++; f < a; f++)if (u[f] && !u[f]._lazyRace) if (!M || c.prematureUnveil && c.prematureUnveil(u[f])) aa(u[f]); else if ((p = u[f][i]("data-expand")) && (m = 1 * p) || (m = O), r || (r = !d.expand || d.expand < 1 ? e.clientHeight > 500 && e.clientWidth > 500 ? 500 : 370 : d.expand, c._defEx = r, s = r * d.expFactor, t = d.hFac, J = null, O < s && P < 1 && Q > 2 && o > 2 && !b.hidden ? (O = s, Q = 0) : O = o > 1 && Q > 1 && P < 6 ? r : N), q !== m && (y = innerWidth + m * t, D = innerHeight + m, n = -1 * m, q = m), h = u[f].getBoundingClientRect(), (I = h.bottom) >= n && (F = h.top) <= D && (H = h.right) >= n * t && (G = h.left) <= y && (I || H || G || F) && (d.loadHidden || S(u[f])) && (l && P < 3 && !p && (o < 3 || Q < 4) || T(u[f], m))) { if (aa(u[f]), k = !0, P > 9) break } else !k && l && !j && P < 4 && Q < 4 && o > 2 && (g[0] || d.preloadAfterLoad) && (g[0] || !p && (I || H || G || F || "auto" != u[f][i](d.sizesAttr))) && (j = g[0] || u[f]); j && !k && aa(j) } }, V = B(U), W = function (a) { var b = a.target; if (b._lazyCache) return void delete b._lazyCache; R(a), s(b, d.loadedClass), t(b, d.loadingClass), u(b, Y), v(b, "lazyloaded") }, X = A(W), Y = function (a) { X({ target: a.target }) }, Z = function (a, b) { try { a.contentWindow.location.replace(b) } catch (c) { a.src=b } }, $ = function (a) { var b, c = a[i](d.srcsetAttr); (b = d.customMedia[a[i]("data-media") || a[i]("media")]) && a.setAttribute("media", b), c && a.setAttribute("srcset", c) }, _ = A(function (a, b, c, e, f) { var g, h, j, l, o, p; (o = v(a, "lazybeforeunveil", b)).defaultPrevented || (e && (c ? s(a, d.autosizesClass) : a.setAttribute("sizes", e)), h = a[i](d.srcsetAttr), g = a[i](d.srcAttr), f && (j = a.parentNode, l = j && n.test(j.nodeName || "")), p = b.firesLoad || "src" in a && (h || g || l), o = { target: a }, s(a, d.loadingClass), p && (clearTimeout(m), m = k(R, 2500), u(a, Y, !0)), l && q.call(j.getElementsByTagName("source"), $), h ? a.setAttribute("srcset", h) : g && !l && (L.test(a.nodeName) ? Z(a, g) : a.src=g), f && (h || l) && w(a, { src: g })), a._lazyRace && delete a._lazyRace, t(a, d.lazyClass), z(function () { var b = a.complete && a.naturalWidth > 1; p && !b || (b && s(a, "ls-is-cached"), W(o), a._lazyCache = !0, k(function () { "_lazyCache" in a && delete a._lazyCache }, 9)), "lazy" == a.loading && P-- }, !0) }), aa = function (a) { if (!a._lazyRace) { var b, c = K.test(a.nodeName), e = c && (a[i](d.sizesAttr) || a[i]("sizes")), f = "auto" == e; (!f && l || !c || !a[i]("src") && !a.srcset || a.complete || r(a, d.errorClass) || !r(a, d.lazyClass)) && (b = v(a, "lazyunveilread").detail, f && E.updateElem(a, !0, a.offsetWidth), a._lazyRace = !0, P++ , _(a, b, f, e, c)) } }, ba = C(function () { d.loadMode = 3, V() }), ca = function () { 3 == d.loadMode && (d.loadMode = 2), ba() }, da = function () { if (!l) { if (f.now() - p < 999) return void k(da, 999); l = !0, d.loadMode = 3, V(), j("scroll", ca, !0) } }; return { _: function () { p = f.now(), c.elements = b.getElementsByClassName(d.lazyClass), g = b.getElementsByClassName(d.lazyClass + " " + d.preloadClass), j("scroll", V, !0), j("resize", V, !0), a.MutationObserver ? new MutationObserver(V).observe(e, { childList: !0, subtree: !0, attributes: !0 }) : (e[h]("DOMNodeInserted", V, !0), e[h]("DOMAttrModified", V, !0), setInterval(V, 999)), j("hashchange", V, !0), ["focus", "mouseover", "click", "load", "transitionend", "animationend", "webkitAnimationEnd"].forEach(function (a) { b[h](a, V, !0) }), /d$|^c/.test(b.readyState) ? da() : (j("load", da), b[h]("DOMContentLoaded", V), k(da, 2e4)), c.elements.length ? (U(), z._lsFlush()) : V() }, checkElems: V, unveil: aa, _aLSL: ca } }(), E = function () { var a, c = A(function (a, b, c, d) { var e, f, g; if (a._lazysizesWidth = d, d += "px", a.setAttribute("sizes", d), n.test(b.nodeName || "")) for (e = b.getElementsByTagName("source"), f = 0, g = e.length; f < g; f++)e[f].setAttribute("sizes", d); c.detail.dataAttr || w(a, c.detail) }), e = function (a, b, d) { var e, f = a.parentNode; f && (d = y(a, f, d), e = v(a, "lazybeforesizes", { width: d, dataAttr: !!b }), e.defaultPrevented || (d = e.detail.width) && d !== a._lazysizesWidth && c(a, f, e, d)) }, f = function () { var b, c = a.length; if (c) for (b = 0; b < c; b++)e(a[b]) }, g = C(f); return { _: function () { a = b.getElementsByClassName(d.autosizesClass), j("resize", g) }, checkElems: g, updateElem: e } }(), F = function () { F.i || (F.i = !0, E._(), D._()) }; return c = { cfg: d, autoSizer: E, loader: D, init: F, uP: w, aC: s, rC: t, hC: r, fire: v, gW: y, rAF: z } } });

/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; if (a.addEventListener) { var d = /\s+(\d+)(w|h)\s+(\d+)(w|h)/, e = /parent-fit["']*\s*:\s*["']*(contain|cover|width)/, f = /parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/, g = /^picture$/i, h = function (a) { return getComputedStyle(a, null) || {} }, i = { getParent: function (b, c) { var d = b, e = b.parentNode; return c && "prev" != c || !e || !g.test(e.nodeName || "") || (e = e.parentNode), "self" != c && (d = "prev" == c ? b.previousElementSibling : c && (e.closest || a.jQuery) ? (e.closest ? e.closest(c) : jQuery(e).closest(c)[0]) || e : e), d }, getFit: function (a) { var b, c, d = h(a), g = d.content || d.fontFamily, j = { fit: a._lazysizesParentFit || a.getAttribute("data-parent-fit") }; return !j.fit && g && (b = g.match(e)) && (j.fit = b[1]), j.fit ? (c = a._lazysizesParentContainer || a.getAttribute("data-parent-container"), !c && g && (b = g.match(f)) && (c = b[1]), j.parent = i.getParent(a, c)) : j.fit = d.objectFit, j }, getImageRatio: function (b) { var c, e, f, h, i, j, k, l = b.parentNode, m = l && g.test(l.nodeName || "") ? l.querySelectorAll("source, img") : [b]; for (c = 0; c < m.length; c++)if (b = m[c], e = b.getAttribute(lazySizesConfig.srcsetAttr) || b.getAttribute("srcset") || b.getAttribute("data-pfsrcset") || b.getAttribute("data-risrcset") || "", f = b._lsMedia || b.getAttribute("media"), f = lazySizesConfig.customMedia[b.getAttribute("data-media") || f] || f, e && (!f || (a.matchMedia && matchMedia(f) || {}).matches)) { h = parseFloat(b.getAttribute("data-aspectratio")), h || (i = e.match(d), i ? "w" == i[2] ? (j = i[1], k = i[3]) : (j = i[3], k = i[1]) : (j = b.getAttribute("width"), k = b.getAttribute("height")), h = j / k); break } return h }, calculateSize: function (a, b) { var c, d, e, f, g = this.getFit(a), h = g.fit, i = g.parent; return "width" == h || ("contain" == h || "cover" == h) && (e = this.getImageRatio(a)) ? (i ? b = i.clientWidth : i = a, f = b, "width" == h ? f = b : (d = i.clientHeight) > 40 && (c = b / d) && ("cover" == h && c < e || "contain" == h && c > e) && (f = b * (e / c)), f) : b } }; c.parentFit = i, b.addEventListener("lazybeforesizes", function (a) { if (!a.defaultPrevented && a.detail.instance == c) { var b = a.target; a.detail.width = i.calculateSize(b, a.detail.width) } }) } });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; var d, e = c && c.cfg, f = b.createElement("img"), g = "sizes" in f && "srcset" in f, h = /\s+\d+h/g, i = function () { var a = /\s+(\d+)(w|h)\s+(\d+)(w|h)/, d = Array.prototype.forEach; return function () { var e = b.createElement("img"), f = function (b) { var c, d, e = b.getAttribute(lazySizesConfig.srcsetAttr); e && (d = e.match(a)) && (c = "w" == d[2] ? d[1] / d[3] : d[3] / d[1], c && b.setAttribute("data-aspectratio", c), b.setAttribute(lazySizesConfig.srcsetAttr, e.replace(h, ""))) }, g = function (a) { if (a.detail.instance == c) { var b = a.target.parentNode; b && "PICTURE" == b.nodeName && d.call(b.getElementsByTagName("source"), f), f(a.target) } }, i = function () { e.currentSrc && b.removeEventListener("lazybeforeunveil", g) }; b.addEventListener("lazybeforeunveil", g), e.onload = i, e.onerror = i, e.srcset = "data:,a 1w 1h", e.complete && i() } }(); if (e.supportsType || (e.supportsType = function (a) { return !a }), a.HTMLPictureElement && g) return void (!c.hasHDescriptorFix && b.msElementsFromPoint && (c.hasHDescriptorFix = !0, i())); a.picturefill || e.pf || (e.pf = function (b) { var c, e; if (!a.picturefill) for (c = 0, e = b.elements.length; c < e; c++)d(b.elements[c]) }, d = function () { var f = function (a, b) { return a.w - b.w }, i = /^\s*\d+\.*\d*px\s*$/, j = function (a) { var b, c, d = a.length, e = a[d - 1], f = 0; for (f; f < d; f++)if (e = a[f], e.d = e.w / a.w, e.d >= a.d) { !e.cached && (b = a[f - 1]) && b.d > a.d - .13 * Math.pow(a.d, 2.2) && (c = Math.pow(b.d - .6, 1.6), b.cached && (b.d += .15 * c), b.d + (e.d - a.d) * c > a.d && (e = b)); break } return e }, k = function () { var a, b = /(([^,\s].[^\s]+)\s+(\d+)w)/g, c = /\s/, d = function (b, c, d, e) { a.push({ c: c, u: d, w: 1 * e }) }; return function (e) { return a = [], e = e.trim(), e.replace(h, "").replace(b, d), a.length || !e || c.test(e) || a.push({ c: e, u: e, w: 99 }), a } }(), l = function () { l.init || (l.init = !0, addEventListener("resize", function () { var a, c = b.getElementsByClassName("lazymatchmedia"), e = function () { var a, b; for (a = 0, b = c.length; a < b; a++)d(c[a]) }; return function () { clearTimeout(a), a = setTimeout(e, 66) } }())) }, m = function (b, d) { var f, g = b.getAttribute("srcset") || b.getAttribute(e.srcsetAttr); !g && d && (g = b._lazypolyfill ? b._lazypolyfill._set : b.getAttribute(e.srcAttr) || b.getAttribute("src")), b._lazypolyfill && b._lazypolyfill._set == g || (f = k(g || ""), d && b.parentNode && (f.isPicture = "PICTURE" == b.parentNode.nodeName.toUpperCase(), f.isPicture && a.matchMedia && (c.aC(b, "lazymatchmedia"), l())), f._set = g, Object.defineProperty(b, "_lazypolyfill", { value: f, writable: !0 })) }, n = function (b) { var d = a.devicePixelRatio || 1, e = c.getX && c.getX(b); return Math.min(e || d, 2.5, d) }, o = function (b) { return a.matchMedia ? (o = function (a) { return !a || (matchMedia(a) || {}).matches })(b) : !b }, p = function (a) { var b, d, g, h, k, l, p; if (h = a, m(h, !0), k = h._lazypolyfill, k.isPicture) for (d = 0, b = a.parentNode.getElementsByTagName("source"), g = b.length; d < g; d++)if (e.supportsType(b[d].getAttribute("type"), a) && o(b[d].getAttribute("media"))) { h = b[d], m(h), k = h._lazypolyfill; break } return k.length > 1 ? (p = h.getAttribute("sizes") || "", p = i.test(p) && parseInt(p, 10) || c.gW(a, a.parentNode), k.d = n(a), !k.src || !k.w || k.w < p ? (k.w = p, l = j(k.sort(f)), k.src=l) : l = k.src) : l = k[0], l }, q = function (a) { if (!g || !a.parentNode || "PICTURE" == a.parentNode.nodeName.toUpperCase()) { var b = p(a); b && b.u && a._lazypolyfill.cur != b.u && (a._lazypolyfill.cur = b.u, b.cached = !0, a.setAttribute(e.srcAttr, b.u), a.setAttribute("src", b.u)) } }; return q.parse = k, q }(), e.loadedClass && e.loadingClass && function () { var a = [];['img[sizes$="px"][srcset].', "picture > img:not([srcset])."].forEach(function (b) { a.push(b + e.loadedClass), a.push(b + e.loadingClass) }), e.pf({ elements: b.querySelectorAll(a.join(", ")) }) }()) });
/*! lazysizes - v4.1.8 */
!function (a, b) { var c = function () { b(a.lazySizes), a.removeEventListener("lazyunveilread", c, !0) }; b = b.bind(null, a, a.document), "object" == typeof module && module.exports ? b(require("lazysizes")) : a.lazySizes ? c() : a.addEventListener("lazyunveilread", c, !0) }(window, function (a, b, c) { "use strict"; if (a.addEventListener) { var d = /\s+/g, e = /\s*\|\s+|\s+\|\s*/g, f = /^(.+?)(?:\s+\[\s*(.+?)\s*\])(?:\s+\[\s*(.+?)\s*\])?$/, g = /^\s*\(*\s*type\s*:\s*(.+?)\s*\)*\s*$/, h = /\(|\)|'/, i = { contain: 1, cover: 1 }, j = function (a) { var b = c.gW(a, a.parentNode); return (!a._lazysizesWidth || b > a._lazysizesWidth) && (a._lazysizesWidth = b), a._lazysizesWidth }, k = function (a) { var b; return b = (getComputedStyle(a) || { getPropertyValue: function () { } }).getPropertyValue("background-size"), !i[b] && i[a.style.backgroundSize] && (b = a.style.backgroundSize), b }, l = function (a, b) { if (b) { var c = b.match(g); c && c[1] ? a.setAttribute("type", c[1]) : a.setAttribute("media", lazySizesConfig.customMedia[b] || b) } }, m = function (a, c, g) { var h = b.createElement("picture"), i = c.getAttribute(lazySizesConfig.sizesAttr), j = c.getAttribute("data-ratio"), k = c.getAttribute("data-optimumx"); c._lazybgset && c._lazybgset.parentNode == c && c.removeChild(c._lazybgset), Object.defineProperty(g, "_lazybgset", { value: c, writable: !0 }), Object.defineProperty(c, "_lazybgset", { value: h, writable: !0 }), a = a.replace(d, " ").split(e), h.style.display = "none", g.className = lazySizesConfig.lazyClass, 1 != a.length || i || (i = "auto"), a.forEach(function (a) { var c, d = b.createElement("source"); i && "auto" != i && d.setAttribute("sizes", i), (c = a.match(f)) ? (d.setAttribute(lazySizesConfig.srcsetAttr, c[1]), l(d, c[2]), l(d, c[3])) : d.setAttribute(lazySizesConfig.srcsetAttr, a), h.appendChild(d) }), i && (g.setAttribute(lazySizesConfig.sizesAttr, i), c.removeAttribute(lazySizesConfig.sizesAttr), c.removeAttribute("sizes")), k && g.setAttribute("data-optimumx", k), j && g.setAttribute("data-ratio", j), h.appendChild(g), c.appendChild(h) }, n = function (a) { if (a.target._lazybgset) { var b = a.target, d = b._lazybgset, e = b.currentSrc || b.src; if (e) { var f = c.fire(d, "bgsetproxy", { src: e, useSrc: h.test(e) ? JSON.stringify(e) : e }); f.defaultPrevented || (d.style.backgroundImage = "url(" + f.detail.useSrc + ")") } b._lazybgsetLoading && (c.fire(d, "_lazyloaded", {}, !1, !0), delete b._lazybgsetLoading) } }; addEventListener("lazybeforeunveil", function (a) { var d, e, f; !a.defaultPrevented && (d = a.target.getAttribute("data-bgset")) && (f = a.target, e = b.createElement("img"), e.alt = "", e._lazybgsetLoading = !0, a.detail.firesLoad = !0, m(d, f, e), setTimeout(function () { c.loader.unveil(e), c.rAF(function () { c.fire(e, "_lazyloaded", {}, !0, !0), e.complete && n({ target: e }) }) })) }), b.addEventListener("load", n, !0), a.addEventListener("lazybeforesizes", function (a) { if (a.detail.instance == c && a.target._lazybgset && a.detail.dataAttr) { var b = a.target._lazybgset, d = k(b); i[d] && (a.target._lazysizesParentFit = d, c.rAF(function () { a.target.setAttribute("data-parent-fit", d), a.target._lazysizesParentFit && delete a.target._lazysizesParentFit })) } }, !0), b.documentElement.addEventListener("lazybeforesizes", function (a) { !a.defaultPrevented && a.target._lazybgset && a.detail.instance == c && (a.detail.width = j(a.target._lazybgset)) }) } });

I also have two snippets of code within the <head> in my theme.liquid
- Line 25: <link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">
- Line 153: <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>

The code you gave for the desktop-mobile-banner.liquid function has "hidden-mobile" or "hidden-desktop" as shown:

<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>

So I just added "lazyload" to that which looks like this:

<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile""lazyload" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop""lazyload" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>

Is this the correct way to implement lazy loading for these images?

Much appreciated!

Brittany Witt
jonlenaway
Visitor
1 0 0

Hi, I'm trying to follow these same steps to add this functionality to our store.  We're using the debut theme.  I was able to locate the "{% schema %}" section to edit, but i'm not seeing where the rest of that goes in the "html" section.  Do I wedge that into "theme.liquid" under layout?

davispa2002
Tourist
9 0 2

@Ninthony 

When you say "go into the html," does that mean that we enter into the theme.liquid file? I am using the Brooklyn theme and have managed to get the image pickers working, but haven't figured out where to put the code to make each separate image show up.

Ninthony
Shopify Partner
2329 350 1023

The html that is output from dynamic sections (the sections you can drag around in the customize editor) are all output through the section itself above the schema. Take this blank dynamic section for example, feel free to use this as a little starter template to play with dynamic sections:

{% if section.settings.my_text != blank %}
  <h1>{{ section.settings.my_text}}</h1>
{% endif %}

{% schema %}
{
"name": "Dynamic Section",
"class": "dynamic-section",
"tag": "section",
"settings": [
{
"type": "text",
"id": "my_text",
"label": "Insert text here"
}

],
"presets": [
{
"name": "Dynamic Section",
"category":"Custom",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

If you go into your files and add a new section, called whatever you want -- paste this code and save -- then head over to your customize editor, when you press Add Section you'll see a section under the category of "Custom" called "Dynamic Section. When you add it, you'll notice nothing happens. Thats because of the statement at the top:


{% if section.settings.my_text != blank %}
  <h1>{{ section.settings.my_text}}</h1>
{% endif %}

 

That's saying, if your setting with the id of "my_text" is not empty, then output it. You'll notice that you can add some text in a text field in the customize editor with the label "Insert text here" -- if you type something in there, it'll end up outputting that <h1> tag with your text. 

Your section with the image picker likely has many more settings and information above the schema. But this is the general idea. That's where you'll be looking to edit.

If my solution helped you, please like it and accept it as the solution!
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 😄
davispa2002
Tourist
9 0 2

@Ninthony 

Thanks so much for the reply. Sorry for asking so much but this is completely new to me.
I believe that I have found the area of code where the changes need to be made, but I cannot figure out exactly what it is I need to change (I believe I need to change the parts where it says "hero__image hero__image--"). In addition to adding the multiple image pickers by changing the code between the schema tags, I also added the top part between the style tags. Below is the slideshow.liquid code area where I think the changes need to be made.

Any help would be awesome!

 

<style>
.hidden_desktop{
display:block;
}
.hidden_mobile {
display: none;
}
@media (min-width:992px){
.hidden_desktop{
display:none;
}
.hidden_mobile {
display: block;
}
}
</style>

<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="{{ section.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 -%}