Hey, im trying to make two banners for mobile and desktop. I saw on here that you can hide one of the banners so only one appears on mobile and one on desktop. But i only saw it in dawn theme, can you do that tsate theme aswell? can anyone help me?
Topic summary
Separate mobile and desktop banners in Shopify’s Taste theme. The store owner wants one banner per device, similar to solutions seen for the Dawn theme.
Two approaches shared:
- Code injection: Edit theme.liquid and insert code above to control visibility per device. Shared screenshots showed correct desktop and mobile results.
- Theme settings + CSS: In Customize > Image banner, upload the desktop image in the first slot and the mobile image in the second. Add Custom CSS in that section to hide the second image on desktop and swap to it on screens ≤768px using a media query (selectors target .banner.banner–content-align-center and toggle display/flex-direction).
Troubleshooting: The initial code worked but had a display issue (details shown in screenshots). The responder supplied a revised snippet.
Outcome: After the update, the store owner confirmed it “worked perfectly.”
Status: Resolved. Taste theme can show separate banners for mobile and desktop via either a head-level code addition or section-level CSS. Images/screenshots and code snippets are central to understanding the fix.
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above
Result:
Desktop:
Mobile
If it helps you, please like and mark it as the solution.
Best Regards 
Thanks for your questions.
We have the solution for your query, we hope it helps. To show one banner on Mobile and one banner on Desktop, you can follow the instruction below :
Step 1: Go to Shopify Admin → Online Store ->Theme → Customize > Homepage
Step 2: Access to Image banner section: https://prnt.sc/QTr1_m9Ro6Ac
Step 3: There will be 2 sections to add image. First section to add Desktop image, second section to add for Mobile : https://prnt.sc/YkUTYnZbn_rP
Step 4: On that image banner section, scroll down to the Custom CSS section and add the CSS code below to that section : https://prnt.sc/CQDPSaIDtBzA
.banner.banner--content-align-center > div:nth-child(2) {
display: none;
}
.banner.banner--content-align-center > div:nth-child(1) {width: 100% !important;}
.banner.banner--content-align-center > div:nth-child(1) > img {
object-fit: contain;
}
@media screen and (max-width: 768px){
body .banner.banner--content-align-center > div:nth-child(2) {
display: block;
}
.banner.banner--content-align-center > div:nth-child(1) {
display: none;
}
.banner.banner--content-align-center {
flex-direction: column-reverse;
}
}
We hope that it helps.
Sorry change the previous code like this
1 Like
Thank you man, Worked perfectly
1 Like
Glad to help you 
1 Like