How to Display a Perfect, Mobile-Ready and Fully Responsible Banner on Your Shopify Store
Looking for a simple, lightweight banner to showcase your visuals beautifully on every device? The Responsive Image Banner automatically adapts your images for desktop and mobile, ensuring your banner always looks sharp and professional.
Want to see it in action? View the live demo to see how it looks on both desktop and mobile.
Manual Installation
You can install the section by quickly copy and pasting some code, keeping you in full control over your theme files.
- Go to Online Store > Themes > Edit code
- In the Sections folder, click Add a new section
- Name it sj-responsive-banner.liquid and click Done
-
Copy the code from the gist below and paste it into the file
- Click Save
- Go to Customize and add the Responsive Image Banner section to your desired page
Customization Settings
Step 1: Basic Setup
Upload your main desktop image and optionally a mobile image for smaller screens. You can also add a clickable link so the entire banner acts as a call to action, ideal for promoting sales, collections, or featured products.
The default layout is fully responsive and ready to use right away. With just your images and link in place, your banner will display correctly across all devices without additional configuration.
You can also set alt text for accessibility and SEO, and choose whether the image should preload for faster display.
Step 2: Fine-Tune Your Layout (Optional)
Adjust the top and bottom margins so the banner integrates naturally with your page layout. You can also choose whether the link opens in a new tab and fine-tune spacing to match your store’s design.
These options give you precise control over how the banner appears while keeping it lightweight and responsive.
Make Every Image Shine
The Responsive Image Banner is an easy way to add clean, mobile-friendly visuals to your Shopify store. Whether you're promoting a product, campaign, or announcement, your images will look great on any screen size.
At EZFY Code, we also offer custom development services for merchants who need tailored solutions built specifically for their store. If you have a custom idea or feature in mind, feel free to reach out.