How to Show Different Banner Images on Mobile and Desktop in HORIZON Theme Shopify

Easily Display Different Banner Images on Mobile and Desktop in HORIZON Theme and any other Shopify theme

► Get the detailed tutorial here: https://shop.shopioso.com/products/di...

► Get a FREE Trial To Shopify: https://get.shopioso.com/shopify
► Customize your Shopify store with our high--converting pre-built sections: https://shopioso.com/shopify-pre-buil...
► Let me speed up your store: https://shopioso.com/speed-boost-ongo... (90+ on Desktop and 70-80+ on Mobile + Ongoing Monitoring)
► Join our discord:   / discord  

Want to show different banner images on mobile and desktop in the Horizon Theme on Shopify? In this video, I’ll walk you through how to customize your hero banner section so you can display the right image for each device. No external apps, just smart edits to your theme.

Whether you're a store owner or developer, this tutorial will help you create a responsive banner setup in the Horizon Shopify Theme, including how to use theme settings to manage separate images for mobile and desktop views.

✅ Perfect for developers or store owners wanting responsive Shopify banners!

WHY SUBSCRIBE TO SHOPIOSO
► Hi! My name is Cristian, I am a Shopify and Ecom expert.
► Here is my Shopify development and consulting agency https://shopioso.com
► I provide valuable info to help you Grow And Optimise Your Shopify Store
► I share tips, advice, and resources for Shopify store owners and Ecom enthusiasts
► Examples & case studies of Online Stores that convert

I hope our actionable content can help you: whether you're running your own Online Store, or are in the process of building one, and want some tactical advice to help you along the way. If that is you, subscribe today! 🔥

IMPORTANT DISCLAIMER - PLEASE READ:
Some links in the description may be affiliate links. This means that I may get a commission if you click on the link and purchase something. Using those links is optional but they are always appreciated. Thank you 🙏

👉 Timestamps – How to show different banners on mobile and desktop in Horizon Theme Shopify:
00:00 Intro
00:13 Default banner image behavior in the Horizon Theme
01:31 Edit section code to allow banner image switching for mobile and desktop
01:57 Step 1: Add a section variable
02:51 Step 2: Add a responsive class to the main section HTML
03:49 Step 3: Add schema settings for desktop/mobile banner images
04:19 Step 4: Add custom CSS styles for mobile banner
04:46 Preview in the Shopify theme customizer
05:42 Add desktop and mobile banner images in customizer
07:52 Apply mobile/desktop image visibility to slideshow section
09:49 Review slideshow mobile vs desktop banner image settings