How can I set different banner images for mobile and desktop in Dawn theme?

[troydewit]

Hi,

Is there any way to make it possible to set a different image for mobile and desktop in the ‘image banner’ section of the Dawn theme? I would also like the mobile image to be displayed vertically and the desktop image to be displayed horizontally.

Kind regards

[Simonsron]

Yes, you can.

But the code is only static, if you need to upload images dynamically, you can develop a custom configuration to upload images separately for desktop and mobile.

[BSS-Commerce]

Hi @troydewit

• Because the Dawn theme does not have its own custom banner for desktop or mobile, it must use JS code to convert this image.

• First, you go to Online Store → Edit code → find the theme.liquid file and add the following code in any pair of tags at the end of the file.

if (window.innerWidth < 480) {
        var elem = document.createElement("img");
          elem.setAttribute("src", "https://cdn.shopify.com/s/files/1/0597/1954/9080/files/emilykeeney.vixii-110.webp?v=1663064886");
          elem.setAttribute("height", "1500.0");
          elem.setAttribute("width", "1500");
          elem.setAttribute("loading", "lazy");
          elem.setAttribute("sizes", "100vw");        
        document.querySelector('.banner__media.media').appendChild(elem);
      }

• At the line containing the src, replace it with any image link you uploaded to the store to display for the mobile site.

• Go to Settings → Files → copy the image URL to add:

• Next, go to the file section-image-banner.css to change the CSS for this mobile section. Change it to 60rem here:

.banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 60rem;
  }

Here is our demo. You can refer to it: https://www.loom.com/share/5bbe47a0ddc349ee9a2d4f6fac0a381a

I hope that this can help you solve the issue.