Different Banners for Desktop/Mobile, Help with code

Store Design

Topic summary

A user is attempting to implement separate banner images for desktop and mobile versions of their Shopify store homepage using Custom Liquid code.

Primary Issue:

  • Images fail to display when actual URLs are inserted into the code
  • The user also seeks guidance on optimizing images for both platforms

Code Approach:
The user shared CSS/HTML code that:

  • Uses media queries with a 768px breakpoint to toggle banner visibility
  • Applies background-image properties and object-fit styling
  • Includes separate div containers for desktop-banner and mobile-banner classes

Current Status:
The discussion remains unresolved with no responses addressing the display issue or optimization question. The code snippets appear partially corrupted or reversed in the original post, which may indicate formatting problems that could be contributing to the implementation failure.

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

Hi, friends! I need to use two separate banners on top of the home page for desktop and mobile users. I’ve uploaded two different files for this purpose and created the following code for the “Custom Liquid” section, which I will add to the website.

However, there is some problem - the pictures don’t show up when I replace the URLs with the correct ones. What’s the problem?

Moreover, how should the code look like to make the images optimised for both platforms?

Code:

.banner-image { background-image: url([https://cdn.shopify.com/s/files](https://cdn.shopify.com/s/files/1/0692/3662/1594/files/Wise.gif?v=1675599616)); height: 400px; width: 100%; background-size: cover; background-position: center; } @media (max-width: 767px) { .banner-image { background-image: url([https://cdn.shopify.com/s/files](https://cdn.shopify.com/s/files/1/{your_store_id}/files/tech-2)); } }
2

Solved.

3

This code should be used in the “Custom Liquid” section. [URL link] should be replaced with the necessary URL link.

.desktop-banner { display: none; } @media (min-width: 768px) { .desktop-banner { display: block; } } .mobile-banner { display: block; } @media (min-width: 768px) { .mobile-banner { display: none; } } .banner-image { width: 100%; height: auto; object-fit: cover; }
Desktop Banner
Mobile Banner