Image Banner For Mobile & Desktop

Retired Boards Appdev Store Design
1

Hi ! I’m using the Dawn Theme and I’m trying to find some code that can help me to make separate image banner for desktop and mobile. I’ve found this video below which it may help me if the code shown there wasn’t way different from what I can see on my Shopify store but the result shown in that video is the same I’d like to achive.

https://www.youtube.com/watch?v=JpTarKjCFi8

Anyone who can help me out with the code to add please ?

2

Hello @mauro6

  1. Create the section file
    1. In Shopify Admin: Online Store → Themes → … → Edit code
    2. In the left sidebar, open /sections → click Add a new section.
    3. Name it: image-banner.liquid
  2. Paste this starter section (copy–paste)
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
  {% style %}
    @media screen and (max-width: 767px) {
      .desktop_image {
        display: none;
      }
      .mobile_image {
        display: block;
      }
    }
    @media screen and (min-width: 768px) {
      .desktop_image {
        display: block;
      }
      .mobile_image {
        display: none;
      }
    }
  {% endstyle %}
{% elsif section.settings.desktop_image != blank and section.settings.mobile_image == blank %}
  {% style %}
    @media screen and (max-width: 767px) {
      .desktop_image {
        display: block !important;
      }
      .mobile_image {
        display: none !important;
      }
    }
  {% endstyle %}
{% endif %}

<style>
  .desktop_image,
  .mobile_image {
    width: 100%;
    object-fit: cover;
    height: auto;
  }
  svg {
    background-color: #a9a9a9;
    width: 100%;
  }
</style>
{%- if section.settings.desktop_image != blank -%}
  <img
    src="{{ section.settings.desktop_image | image_url }}"
    class="desktop_image"
    width=""
    height="">
  {%- if section.settings.mobile_image != blank -%}
    <img
      src="{{ section.settings.mobile_image | image_url }}"
      class="mobile_image"
      width=""
      height="">
  {% endif %}
{% else %}
 {{ 'lifestyle-1' | placeholder_svg_tag }}
{% endif %}

{% schema %}
  {
    "name": "image banner",
    "settings": [
      {
        "type": "image_picker",
        "id": "desktop_image",
        "label": "Desktop Image"
      },
      {
        "type": "image_picker",
        "id": "mobile_image",
        "label": "Mobile Image"
      }
    ],
    "presets": [
      {
        "name": "Image banner"
      }
    ]
  }
{% endschema %}
  1. Add the section in the Theme Editor
    1. Click Customize on your theme
    2. Open the page/template where you want it (e.g., Home page, a Page, or Product).
    3. Click Add section → search Image banner → add it.
    4. Add image and save
3

Hi,
I think you sent this mail to the wrong address.
Mauro