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

Shopify Discussion

Topic summary

Issue: A Shopify store using the Symmetry theme needs to display different banner images for desktop, mobile, and tablet devices. Currently, desktop and mobile banners work correctly, but on tablets the banner image overlaps with text, requiring a separate tablet-specific banner.

Solution Provided:

Step 1 - Add Custom Banner Field:

  • Navigate to Online Store > Themes > Actions > Edit Code
  • Locate the hero.liquid section (or relevant homepage banner section)
  • Add a new image_picker field in the schema for tablet banner upload
  • Modify the Liquid code to include three separate image elements with distinct classes: banner-desktop, banner-mobile, and banner-tablet

Step 2 - Implement CSS Media Queries:

  • Open the theme CSS file (base.css, theme.css, or similar)
  • Add media queries to control which banner displays at different screen widths:
    • Desktop banner: visible by default, hidden on tablets and mobile
    • Tablet banner: visible between 768px-1024px width
    • Mobile banner: visible below 767px width

Status: Solution marked as accepted. The approach uses device-specific CSS breakpoints to ensure each banner displays appropriately without text overlap issues.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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?

2

Hello @avaskye

Step 1: Add Custom Banners in HTML/Liquid1. Go to Online Store > Themes > Actions > Edit Code.

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

  2. 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” }

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

    liquid:

    Desktop Banner Mobile Banner Tablet Banner

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.