Hello! I would like to add an image banner to my product page, which only shows on mobile, and not on desktop. Can someone help me with this please?
this is how I’d like it, but without it showing in desktop view.
crescent.hu
Pw: theaba
this is how I’d like it, but without it showing in desktop view.
Hi,
Hope this will help
- Open the Theme Code Editor and Find Right Template File
- Add the Banner Code with Mobile-Only Styling
Code example
<div class="mobile-banner">
<img src="{{ 'your-image-file-name.jpg' | asset_url }}" alt="Mobile Banner" />
</div>
- Add Mobile-Only CSS
Hi @crescenthu
You can watch this YouTube video and follow what he said to add or show banner images separately on desktop or mobile, which is helpful here.
How To Show Different Banner Images On Mobile & Desktop [Shopify - Updated]
1 Like
- Go to Online Store > Customize, and add an Image Banner section to your Product Page just like you usually would.
- In the section’s settings (in the Customizer), scroll to the “Custom CSS class” field (if available), and type: ‘mobile-only-banner’. If that field isn’t available, don’t worry — we’ll target the section by its position or add the class manually later.
- Go to Online Store > Edit Code, then open your main CSS file (usually in Assets) :
.mobile-only-banner {
display: none;
}
@media screen and (max-width: 749px) {
.mobile-only-banner {
display: block;
}
}
Let me know if you want help finding where to add the class or CSS based on your theme.
hi! thanks for the help, i’ve added the code, but it just doesn’t seem to work. The error message in custom CSS is: ““mobile-only-banner” does not appear to be used in this section. Try a different selector.” even after I added the code in base.css
Managed to do it with this, thank you! 
1 Like
Good to hear that, please give a thumbs👍up, if you like
Very welcome here, hope it works on your store 