Dawn Theme (v15.1.0) How to Display Different Banners on Desktop and Mobile?

[Syidrasyiddd]

Hi everyone,

I'm using the Dawn theme (v15.1.0) and would like to display different banner images for desktop and mobile views on my homepage. Is there a way to set different banner images based on the device being used?

Any help or guidance on how to achieve this in Dawn would be greatly appreciated!

Thanks in advance!

[sherpabot]

Like if ios vs if android? 

If you want to take it a step further and detect specific devices like iPhone or Android, you can use JavaScript to identify the device and then display the appropriate banner. Here’s how you can do that:

1. Add your banners for desktop, iPhone, and Android in your *.liquid (relevant section/snippet file). Give them unique classes such as .desktop-banner, .iphone-banner, and .android-banner.

2. Hide the banners by default using CSS:

<style>
  .iphone-banner, .android-banner {
    display: none;
  }

  @media only screen and (max-width: 767px) {
    .desktop-banner {
      display: none;
    }
  }
</style>

1. Add the images in your index.liquid:

<div class="banner-container">
  <!-- Desktop Banner -->
  <img src="{{ 'desktop-banner-image.jpg' | asset_url }}" alt="Desktop Banner" class="desktop-banner" />

  <!-- iPhone Banner -->
  <img src="{{ 'iphone-banner-image.jpg' | asset_url }}" alt="iPhone Banner" class="iphone-banner" />

  <!-- Android Banner -->
  <img src="{{ 'android-banner-image.jpg' | asset_url }}" alt="Android Banner" class="android-banner" />
</div>

1. Use JavaScript to detect the device type and display the correct banner:

document.addEventListener('DOMContentLoaded', function() {
  function detectDevice() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    var desktopBanner = document.querySelector('.desktop-banner');
    var iphoneBanner = document.querySelector('.iphone-banner');
    var androidBanner = document.querySelector('.android-banner');

    // Hide all banners initially
    desktopBanner.style.display = 'none';
    iphoneBanner.style.display = 'none';
    androidBanner.style.display = 'none';

    // Detect iPhone
    if (/iPhone|iPad|iPod/i.test(userAgent)) {
      iphoneBanner.style.display = 'block';
    } 
    // Detect Android
    else if (/Android/i.test(userAgent)) {
      androidBanner.style.display = 'block';
    }
    // Default to Desktop
    else {
      desktopBanner.style.display = 'block';
    }
  }

  // Run on page load
  detectDevice();
});

This JavaScript will check the user's userAgent to determine if they are on an iPhone or an Android device and show the corresponding banner.

• iPhone devices will display the .iphone-banner.
• Android devices will display the .android-banner.
• All other devices (like desktops) will default to the .desktop-banner.

Let me know if you need further assistance or adjustments!

Remember, this is just an example, use the example for your specific use case since IDK what your code looks like. I hope it makes sense

[Syidrasyiddd]

Thank you for your response.

However, I don't have an index.liquid file in my Dawn theme. And where exactly should I place the JavaScript code?

[sherpabot]

Do you have coding experience? it would likely be the theme.liquid file. It is an example for you to use the JS in the file you wish to modify. 

I wrote:

*.liquid (relevant section/snippet file)

---