Toggle "Show container on Desktop/Mobile" has no effect - DAWN

Store Design
, ,

Topic summary

Problem: In a custom theme based on Shopify’s Dawn, the Image Banner section’s toggles “Show container on Desktop” and “Show container on Mobile” do not change what displays. Merchants want device-specific banners without loading both images to improve page speed.

Goal: Serve only the correctly sized banner per device (avoid double image fetch), ideally via responsive images (e.g., the srcset attribute, which supplies device-appropriate image sources).

What’s been tried: A CSS/media-query approach to hide/show banners by breakpoint. This visually works but still downloads both images, so it doesn’t meet the performance goal.

Replies/Workarounds: One participant requested the store URL. Another confirmed the same issue and questioned the purpose of the desktop/mobile settings. A CSS media-query snippet was shared as a workaround to toggle visibility, not loading.

Status: Unresolved. No confirmation why the Dawn toggles have no effect, and no guidance provided on implementing srcset or a theme-level solution that prevents unnecessary image requests. Key open question: How to configure the Image Banner so only the appropriate banner is loaded per device.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi there,

we’re using a custom theme that is based on Shopify’s Dawn Theme.

We want to display different page banners, depending on the device used (Desktop/Mobile).

The section in question is the “Image Banner”, which comes with two toggles “Show container on Desktop” and “Show container on Mobile”. Selecting/deselecting doesn’t have any effect!

For now we are using CSS and media screen size to control which banner shows on which device. This is not optimal as both image banners are fetched by the device. In order to increase page speed we would like the devices to only fetch the correct sized image. We believed the toggles would serve this purpose, but they don’t.

If anyone could point me to a tutorial or has some advice? I guess it should be a rather quick implementation using “srcset” attribution. I would still need some help with this.

Thank you!

1 Like
2

Hi,

Can you share your store url

3

having the exact same issues. What’s the point of these desktop/mobile settings?

1 Like
4

You’ll need to add custom CSS for each section:

@media screen and (max-width: 750px;){
.banner {display: none}}

vary min-width / max-width depending on mobile or desktop.