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

Shopify Discussion
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.