Skip to content
How To Add Different Banner Images For Desktop and Mobile - Free Tutorial
Browse other ways to boost conversion rate & profit

How To Add Different Banner Images For Desktop and Mobile - Free Tutorial

Want personalized guidance adding this to your store?

Check out our Insiders community: https://www.skool.com/the-prompted

Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.

---

In this tutorial, we're adding device-specific banner images to your Shopify store.

This will optimize your site's banners for both desktop and mobile to create a more device native experience, which can lead to better conversions.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

 

Create section image-banner-custom.liquid

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign desktop_image = section.settings.image
  assign mobile_image = section.settings.image_2
  assign desktop_height = section.settings.desktop_image_height
  assign mobile_height = section.settings.mobile_image_height

  assign desktop_sizes = '100vw'
  assign mobile_sizes = '100vw'
  assign desktop_widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
  assign mobile_widths = '375, 550, 750, 1100'

  if section.settings.image_behavior == 'ambient'
    assign desktop_sizes = '120vw'
    assign mobile_sizes = '120vw'
    assign desktop_widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
    assign mobile_widths = '450, 660, 900, 1320'
  elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
    assign desktop_sizes = '100vw'
    assign mobile_sizes = '100vw'
  endif

  assign fetch_priority = 'auto'
  if section.index == 1
    assign fetch_priority = 'high'
  endif
-%}

<div class="banner__desktop">
  <div 
    id="Banner-{{ section.id }}" 
    class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--{{ desktop_height }}{% if settings.animations_reveal_on_scroll %}{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %} scroll-trigger animate--fade-in{% endif %}"
  >
    {%- if desktop_image != blank -%}
      {%- if section.settings.image_link != blank -%}
        <a href="{{ section.settings.image_link }}" class="banner__link">
      {%- endif -%}
      <div class="banner__media media{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
        {%- liquid
          assign image_height_desktop = desktop_image.width | divided_by: desktop_image.aspect_ratio
        -%}
        {{
          desktop_image
          | image_url: width: 3840
          | image_tag:
            width: desktop_image.width,
            height: image_height_desktop,
            class: '',
            sizes: desktop_sizes,
            widths: desktop_widths,
            fetchpriority: fetch_priority
        }}
      </div>
      {%- if section.settings.image_link != blank -%}
        </a>
      {%- endif -%} 
    {%- else -%}
      <div class="banner__media media placeholder{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
        {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
  
    <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
        {%- if section.settings.image_link == blank -%}
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'heading' -%}
                <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
                  {{ block.settings.heading }}
                </h2>
              {%- when 'text' -%}
                <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
                  <p>{{ block.settings.text }}</p>
                </div>
              {%- when 'buttons' -%}
                <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
                  {%- if block.settings.button_label_1 != blank -%}
                    <a {% if block.settings.button_link_1 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">
                      {{- block.settings.button_label_1 | escape -}}
                    </a>
                  {%- endif -%}
                  {%- if block.settings.button_label_2 != blank -%}
                    <a {% if block.settings.button_link_2 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">
                      {{- block.settings.button_label_2 | escape -}}
                    </a>
                  {%- endif -%}
                </div>
            {%- endcase -%}
          {%- endfor -%}
        {%- endif -%}
      </div>
    </div>
    
  </div>
</div>

<div class="banner__mobile">
  <div 
    id="Banner-{{ section.id }}" 
    class="banner banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ mobile_height }}{% if settings.animations_reveal_on_scroll %}{% if section.settings.show_text_below and section.settings.image_link == blank %} banner--mobile-bottom{% endif %}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %} scroll-trigger animate--fade-in{% endif %}"
  >
    {%- if mobile_image != blank -%}
      <div class="banner__media media{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
        {%- liquid
          assign image_height_mobile = mobile_image.width | divided_by: mobile_image.aspect_ratio
        -%}
        {{
          mobile_image
          | image_url: width: 1100
          | image_tag:
            width: mobile_image.width,
            height: image_height_mobile,
            class: '',
            sizes: mobile_sizes,
            widths: mobile_widths,
            fetchpriority: fetch_priority
        }}
      </div>
    {%- else -%}
      <div class="banner__media media placeholder{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
        {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}

    {%- if section.settings.image_link != blank -%}
      <a href="{{ section.settings.image_link }}" class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {%- else -%}
      <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {%- endif -%}
      <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
        {%- if section.settings.image_link == blank -%}
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'heading' -%}
                <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
                  {{ block.settings.heading }}
                </h2>
              {%- when 'text' -%}
                <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
                  <p>{{ block.settings.text }}</p>
                </div>
              {%- when 'buttons' -%}
                <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
                  {%- if block.settings.button_label_1 != blank -%}
                    <a {% if block.settings.button_link_1 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">
                      {{- block.settings.button_label_1 | escape -}}
                    </a>
                  {%- endif -%}
                  {%- if block.settings.button_label_2 != blank -%}
                    <a {% if block.settings.button_link_2 == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">
                      {{- block.settings.button_label_2 | escape -}}
                    </a>
                  {%- endif -%}
                </div>
            {%- endcase -%}
          {%- endfor -%}
        {%- endif -%}
      </div>
    {%- if section.settings.image_link != blank -%}
      </a>
    {%- else -%}
      </div>
    {%- endif -%}
        
  </div>
</div>

<style>
  @media screen and (max-width: 749px) {
  
      .banner__desktop {
          display: none !important;
      }
      .banner__mobile {
          display: block !important;
      }
  }
  @media screen and (min-width: 750px) {
  
      .banner__mobile {
          display: none !important;
      }
      .banner__desktop {
          display: block !important;
      }
  }
  .banner__link {
      display: block;
      z-index: 3; 
  }
</style>
    
{% schema %}
  {
    "name": "Image Banner Custom",
    "tag": "section",
    "class": "section",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "image_2",
        "label": "Mobile image"
      },
      {
        "type": "range",
        "id": "image_overlay_opacity",
        "min": 0,
        "max": 100,
        "step": 10,
        "unit": "%",
        "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
        "default": 0
      },
      {
        "type": "color_scheme",
        "id": "color_scheme",
        "label": "t:sections.all.colors.label",
        "default": "scheme-1"
      },
      {
        "type": "url",
        "id": "image_link",
        "label": "Link URL",
        "info": "Add a link to make the images clickable. Cannot be used with banner content."
      },
      {
        "type": "header",
        "content": "t:sections.all.animation.content"
      },
      {
        "type": "select",
        "id": "image_behavior",
        "options": [
          {
            "value": "none",
            "label": "t:sections.all.animation.image_behavior.options__1.label"
          },
          {
            "value": "ambient",
            "label": "t:sections.all.animation.image_behavior.options__2.label"
          },
          {
            "value": "fixed",
            "label": "t:sections.all.animation.image_behavior.options__3.label"
          },
          {
            "value": "zoom-in",
            "label": "t:sections.all.animation.image_behavior.options__4.label"
          }
        ],
        "default": "none",
        "label": "t:sections.all.animation.image_behavior.label"
      },
      {
        "type": "header",
        "content": "t:sections.collage.settings.desktop_layout.label"
      },
      {
        "type": "select",
        "id": "desktop_image_height",
        "options": [
          {
            "value": "small",
            "label": "t:sections.image-banner.settings.image_height.options__2.label"
          },
          {
            "value": "medium",
            "label": "t:sections.image-banner.settings.image_height.options__3.label"
          },
          {
            "value": "large",
            "label": "t:sections.image-banner.settings.image_height.options__4.label"
          }
        ],
        "default": "medium",
        "label": "Desktop image height",
        "info": "t:sections.image-banner.settings.image_height.info"
      },
      {
        "type": "select",
        "id": "desktop_content_position",
        "options": [
          {
            "value": "top-left",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
          },
          {
            "value": "top-center",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
          },
          {
            "value": "top-right",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
          },
          {
            "value": "middle-left",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
          },
          {
            "value": "middle-center",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
          },
          {
            "value": "middle-right",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
          },
          {
            "value": "bottom-left",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
          },
          {
            "value": "bottom-center",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
          },
          {
            "value": "bottom-right",
            "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
          }
        ],
        "default": "middle-center",
        "label": "t:sections.image-banner.settings.desktop_content_position.label"
      },
      {
        "type": "checkbox",
        "id": "show_text_box",
        "default": true,
        "label": "t:sections.image-banner.settings.show_text_box.label"
      },
      {
        "type": "select",
        "id": "desktop_content_alignment",
        "options": [
          {
            "value": "left",
            "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
          },
          {
            "value": "center",
            "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
          },
          {
            "value": "right",
            "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
          }
        ],
        "default": "center",
        "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
      },
      {
        "type": "header",
        "content": "t:sections.image-banner.settings.mobile.content"
      },
      {
        "type": "select",
        "id": "mobile_image_height",
        "options": [
          {
            "value": "small",
            "label": "t:sections.image-banner.settings.image_height.options__2.label"
          },
          {
            "value": "medium",
            "label": "t:sections.image-banner.settings.image_height.options__3.label"
          },
          {
            "value": "large",
            "label": "t:sections.image-banner.settings.image_height.options__4.label"
          }
        ],
        "default": "medium",
        "label": "Mobile image height",
        "info": "For best results, use an image with a 1:1 aspect ratio."
      },
      {
        "type": "select",
        "id": "mobile_content_alignment",
        "options": [
          {
            "value": "left",
            "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
          },
          {
            "value": "center",
            "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
          },
          {
            "value": "right",
            "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
          }
        ],
        "default": "center",
        "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
      },
      {
        "type": "checkbox",
        "id": "show_text_below",
        "default": true,
        "label": "t:sections.image-banner.settings.show_text_below.label"
      }
    ],
    "blocks": [
      {
        "type": "heading",
        "name": "t:sections.image-banner.blocks.heading.name",
        "limit": 1,
        "settings": [
          {
            "type": "inline_richtext",
            "id": "heading",
            "default": "t:sections.image-banner.blocks.heading.settings.heading.default",
            "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
          },
          {
            "type": "select",
            "id": "heading_size",
            "options": [
              {
                "value": "h2",
                "label": "t:sections.all.heading_size.options__1.label"
              },
              {
                "value": "h1",
                "label": "t:sections.all.heading_size.options__2.label"
              },
              {
                "value": "h0",
                "label": "t:sections.all.heading_size.options__3.label"
              },
              {
                "value": "hxl",
                "label": "t:sections.all.heading_size.options__4.label"
              },
              {
                "value": "hxxl",
                "label": "t:sections.all.heading_size.options__5.label"
              }
            ],
            "default": "h1",
            "label": "t:sections.all.heading_size.label"
          }
        ]
      },
      {
        "type": "text",
        "name": "t:sections.image-banner.blocks.text.name",
        "limit": 1,
        "settings": [
          {
            "type": "inline_richtext",
            "id": "text",
            "default": "t:sections.image-banner.blocks.text.settings.text.default",
            "label": "t:sections.image-banner.blocks.text.settings.text.label"
          },
          {
            "type": "select",
            "id": "text_style",
            "options": [
              {
                "value": "body",
                "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
              },
              {
                "value": "subtitle",
                "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
              },
              {
                "value": "caption-with-letter-spacing",
                "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
              }
            ],
            "default": "body",
            "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
          }
        ]
      },
      {
        "type": "buttons",
        "name": "t:sections.image-banner.blocks.buttons.name",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label_1",
            "default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
            "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
            "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
          },
          {
            "type": "url",
            "id": "button_link_1",
            "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
          },
          {
            "type": "checkbox",
            "id": "button_style_secondary_1",
            "default": false,
            "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
            "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
            "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
          },
          {
            "type": "checkbox",
            "id": "button_style_secondary_2",
            "default": false,
            "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Image Banner Custom",
        "blocks": [
          {
            "type": "heading"
          },
          {
            "type": "text"
          },
          {
            "type": "buttons"
          }
        ]
      }
    ]
  }
{% endschema %}

 

 

Browse other ways to boost conversion rate & profit