Please help me with Refresh Theme banner images for desk top and mobile differently

Shopify Apps
, ,

Topic summary

A user working with Shopify’s Refresh 15.0 theme seeks help with three customization issues:

Banner Image Display:

  • Wants to use different banner images for desktop and mobile versions, as a single image doesn’t display well on both formats
  • Asks if the banner can be hidden on mobile while showing on desktop

Solution Provided:
A responder suggests:

  • Adding two separate Image banner sections to the store
  • Using custom CSS media queries to control visibility:
    • Desktop-only banner: Hide below 768px width
    • Mobile-only banner: Hide above 768px width

Additional Question:
The user also inquires about app recommendations for improving product page conversions on social media, preferably easy-to-use and willing to pay if necessary.

Note: The conversation text appears partially corrupted/reversed in the original post, but the core technical solution involves CSS media query implementation for responsive banner control.

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

Hi,

I am working on setting my POD eCom site up. I am using the Refresh 15.0 theme. My question is:

  1. How can I set the banner image for the mobile site and desk top to two separate images? Neither looks good on both.

  2. Is it possible to have the banner image show for the desk top and hide it for mobile?

  3. Is there a app that you recommend that I can use as a plug in to have my product pages convert better on social media and it’s easy to use? I don’t mind paying if I need to.

Thank you,

SunnyState77

2

Hi @SunnyState77

Please add 2 Image banner sections to your store

Add this code to Custom CSS of the banner you want to show on the desktop only

@media (max-width: 767px) {
.banner { display: none }
}

Add this code to Custom CSS of banner you want to show on mobile only

@media (min-width: 768px) {
.banner { display: none }
}