Shopify Image Banner App
Create your Banner app
Screenshots
Why People Love Elfsight
Your Shopify pages deserve something more dynamic than a static header. With the Elfsight Banner app, you can place eye-catching visuals where they matter and get attention without slowing things down.
You don’t have to wrestle with CSS or hire a developer. Pick a layout, insert your image or message, paste a snippet – and it’s live. It’s the kind of upgrade you’ll wonder why you didn’t add sooner.
Did you know?
Rich media banners drive stronger purchase interest – after seeing a rich media banner, 56% of users expressed interest in buying, compared to 38% after viewing a static one.
Make your Image Banner work harder – start using rich background and interactive elements with Elfsight and convert more attention into action.
Key Features of the Shopify Banner App
Here’s what Elfsight gives you in everyday use:
- Fully customizable design: Control images, backgrounds, text, and button styles so the banner matches your store’s brand.
- Clickable CTA support: Add buttons or links to direct users to product pages, collections, or external URLs.
- Adaptive sizing & layouts: Choose full-width, custom width, or fixed dimensions to suit your page layout.
- Responsive on all devices: The banner adjusts gracefully on phones, tablets, and desktops.
- Show or hide elements: You decide what details display – title, subtitle, button, or overlay text.
How to Add the Banner to Shopify
Here are two common methods to embed your banner – pick the one that fits your setup best:
Method 1: Inline Banner (within page content)
- Select a template: In the Elfsight editor, choose a layout you like.
- Customize appearance: Add your image, text, button, and adjust styles to match your brand.
- Generate the embed code: Click “Add to website” and copy the snippet.
- Embed in Shopify: In your Shopify admin, go to the page editor (or theme section), add a Custom HTML block and paste the code.
- Save & preview: Publish your changes and see the banner live where you placed it.
Method 2: Footer Banner (site-wide placement)
- Choose a template: In the editor, select a template that fits your design best.
- Adjust settings: Choose when and where it shows, and define rules for visibility.
- Copy the snippet: Click “Add to website” and copy the code.
- Embed across pages: Go to your theme editor, open
theme.liquid(or equivalent), paste the snippet before closing</body>tag or in a global section. - Save & test: Refresh your store pages – the banner should appear everywhere you indicated.
Need help? Check our Help Center or read our blog for full step-by-step instructions on how to add a banner to a Shopify website. You’re also welcome to suggest feature ideas via our Wishlist, or track updates in the Changelog.
FAQ
Will adding a Banner on Shopify affect performance?
Can I target the banner on specific Shopify pages?
Can I add a timer/countdown to the banner (for limited-time offers)?
Can I upload different banner images for desktop and mobile?
Does the Banner app support custom JavaScript?
<script> tags) under the Settings tab. Note: custom JS works only after the widget is installed on your page (not in editor preview).