How can I set up a different main banner for tablet versus mobile, and web on my homepage?

[avaskye]

I'm working with the Symmetry theme and need help setting up a different main banner for tablet on my homepage. We already have separate images for mobile and web, and they display correctly. However, on tablet, the banner image overlaps with the text, so we want to upload a completely separate banner specifically for tablet devices. Can anyone assist with this?

[Tech_Coding]

Hello @avaskye 

Step 1: Add Custom Banners in HTML/Liquid

1. Go to Online Store > Themes > Actions > Edit Code.

2. Open the sections/hero.liquid (or whichever section controls the homepage banner).

3. Add a new image field for the tablet banner in the section schema (if it doesn’t exist).

   Example of a schema addition to allow tablet-specific image upload:

   liquid:

   { "type": "image_picker", "id": "tablet_banner", "label": "Tablet Banner Image" }

4. Then, in the Liquid code, modify the section to display the appropriate image based on the device type:

   liquid:

   <div class="hero-banner"> <!-- Desktop Banner --> <img src="{{ section.settings.desktop_banner | img_url: '2000x' }}" class="banner-desktop" alt="Desktop Banner"> <!-- Mobile Banner --> <img src="{{ section.settings.mobile_banner | img_url: '1000x' }}" class="banner-mobile" alt="Mobile Banner"> <!-- Tablet Banner --> <img src="{{ section.settings.tablet_banner | img_url: '1400x' }}" class="banner-tablet" alt="Tablet Banner"> </div>

---

Step 2: Add CSS Media Queries for Tablet

Now, use CSS to display the correct image based on the screen size:

1. Open your theme CSS file (base.css, theme.css, or similar).

2. Add the following CSS code to control which image is displayed:

   css:

   /* Hide desktop and mobile banners on tablets */ .banner-desktop { display: block; } .banner-mobile, .banner-tablet { display: none; } /* Show tablet banner on tablets */ @media (min-width: 768px) and (max-width: 1024px) { .banner-desktop { display: none; } .banner-tablet { display: block; } } /* Show mobile banner on smaller screens */ @media (max-width: 767px) { .banner-desktop, .banner-tablet { display: none; } .banner-mobile { display: block; } }

   my reply helpful? Click Like to let me know!
   your question answered? Mark it as an Accepted Solution.