How can I display one banner image on desktop and a different one on mobile devices? Sense theme

Store Design
, , , ,
1

Hi everyone,

I’m currently using the Sense theme for my Shopify store. I would like to display one specific banner image when the store is viewed on a desktop and a different banner image when it’s viewed on a mobile device.

Could someone guide me on how to achieve this?

Thanks in advance for your help! :green_heart:

2

Hi @PawsClaws

It can be done with CSS media query and some edits to your theme code.

Kindly share your store URL so that we can have a quick look at the code.

Thank you.

3

You need a code knowledge. It’s easy copy the banner code and paste this code under the main one then create an liquid if statement and open a style tag, and crete midea query if is on mobile display none the main and if on a desktop top display none the copped banner

4

Hi @PawsClaws

You can create two image banner sections

Add this code to Custom CSS of section you want to display on the desktop only

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

And this code to the mobile section

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

Hi,

Thank you for your response. Here is the store URL for your reference: https://claws-paws.us

Thank you!

6

This worked perfectly! I appreciate your clear instructions and quick assistance.

Thanks again! :heart: