The Image Banner section is one of the most powerful elements in your Shopify theme. It’s perfect for creating a hero section at the top of your homepage or for showcasing collections, promotions, or new arrivals in a visually appealing way.
With this section, you can easily add full-width images, custom text, and call-to-action buttons — all without touching a single line of code. Designed for SEO optimization, mobile responsiveness, and high performance, the Image Banner helps your store load fast and look professional on every device.
How to Add the Image Banner Section
Open Your Shopify Customizer
- Go to your Shopify admin → Online Store → Themes → Customize.
- Choose the page you want to edit (e.g., “Home page”).
Add the Image Banner Section
- Click “Add section”.
- Find and select “Image Banner”.
- The section will appear on your page — usually at the bottom by default.
- Drag it to the top if you want it as your hero banner.
How to Customize the Image Banner Settings
Once the Image Banner section is added, you’ll see a panel of settings on the left. Here’s how to configure each one:
Image Settings
- Image: Upload your banner background image (recommended size: 1920×800px for desktop).
-
Image Ratio:
-
Adapt: Automatically adjusts based on image size. -
Landscape: Keeps a fixed wide layout for consistent design.
-
- Overlay Opacity: Adjust transparency (0 to 1). Use 0.2–0.3 for a clean overlay that makes text readable.
Text & Typography
-
Subheading: Short text above the main headline (e.g., “New Collection 2025”).
- Customize color and font size for both desktop and mobile.
-
Heading: Main title (e.g., “Discover Premium Styles”).
- Supports rich text (you can bold or italicize).
- Set font size and color for desktop/mobile separately.
-
Text Information: Add a short paragraph or description.
- Ideal for adding promotional messages or store slogans.
- You can also set font size and color independently for mobile and desktop.
Text Alignment
- Pro tip: Center alignment works best for single-image hero banners.
Button Settings
- Show Button: Toggle this on/off.
- Button Label: Example — “Shop Now”, “Learn More”, “View Collection”.
-
Button Style:
-
Primary: Bold, solid background color. -
Secondary: Minimal outline style.
-
- Button Link: Paste the URL of the collection or product you want to link to.
Layout & Spacing
- Full Width: Enable to make the banner stretch edge-to-edge across the screen.
- Top Margin / Bottom Margin: Adjust the spacing around your banner (0–100px).
Why This Section Helps Your Store Grow
The Image Banner section in your Shopify theme is more than just a design block — it’s a conversion driver.
- Increase engagement by catching attention above the fold.
- Improve SEO through keyword-rich headings.
- Maintain high performance thanks to optimized responsive design.
- Build brand credibility with professional visual storytelling.
