Pro—Banner section
The ultimate high-conversion hero section. A professional-grade image banner designed to combine high-impact visuals with interactive components like icon cards and trust badges to drive immediate sales.
Overview
The Pro banner is a sophisticated evolution of the standard Shopify image banner. While standard banners often feel static, the Pro version allows merchants to layer complex content including feature cards, benefit icons, and descriptive text blocks directly over media. It is engineered for "above-the-fold" placement on homepages or landing pages where establishing brand authority and trust within seconds is critical.
A sequence showing the Pro banner layout on desktop and mobile, highlighting the use of icon cards and glassmorphism text containers.
This section supports advanced layering, such as primary and secondary images, separate mobile-only assets, and highly customizable content containers with blur (glassmorphism) effects. Whether you are running a supplement brand, a pet shop, or a high-end fashion boutique, this section provides the structural flexibility to display your "Unique Value Proposition" (UVP) without requiring custom code.
Key Features
Dual Image Layering: Overlay two different images to create depth or showcase product-and-lifestyle combinations.
Glassmorphism Effects: Apply modern background blur and variable opacity to text containers for a premium aesthetic.
Icon Card Integration: Highlight key benefits (e.g., "Doctor Formulated", "Free Shipping") with built-in icon support.
Precision Overlays: Control the height, width, and gradient direction of image overlays to ensure text readability.
Mobile Optimization: Define different content positions for mobile and choose to stack or hide secondary images on smaller screens.
Interactive Animations: Choose from "Ambient", "Fixed", or "Zoom-in" image behaviors to create a dynamic browsing experience.
Step-by-Step Setup
Best Practices
Images
Desktop: Use 1920×1080px (16:9) or 2000×1000px (2:1). Keep filenames concise for SEO.
Mobile: Upload a dedicated 800×1200px (2:3) image if your desktop image's subject gets cropped out on vertical screens.
Focal Point: Ensure the main subject of your image is not in the area where your text content will be positioned.
Video
If using video blocks within the theme's ecosystem, keep them under 10MB and muted for autoplay compatibility.
Mobile
Use the Show text below option if your background image contains essential information that shouldn't be covered by a text box.
Set a smaller Block gap (mobile) (e.g., 12px or 16px) to keep the layout tight.
Performance
Use JPG for photographs and PNG only for images requiring transparency.
Limit the Blur amount to 10px or less to prevent heavy rendering loads on older mobile devices.
Conversion
Place your most important benefit in an Icon-card directly next to the Button.
Use the Inverse color scheme for the content container if your background image is dark.
Settings Reference
Image
image_picker
-
Primary background image.
Sets the main visual for desktop.
Second image
image_picker
-
Displays alongside the first image.
Creates a split-screen layout.
Overlay color
color
#000000
The base color of the image mask.
Darkens or tints the image for contrast.
Enable gradient overlay
checkbox
false
Toggle a two-color transition.
Adds a linear gradient over the media.
Overlay opacity
range
0%
Strength of the mask.
Higher = darker background, clearer text.
Overlay height
range
100%
Vertical coverage of the mask.
Allows for "bottom-only" or "top-only" gradients.
Overlay width
range
100%
Horizontal coverage of the mask.
Useful for "vignette" or side-tint effects.
Image height
select
Medium
Total height of the section.
Controls how much vertical space the banner occupies.
Desktop content position
select
Middle-center
Location of the text blocks.
Anchors the content to a specific grid area.
Show text box
checkbox
false
Adds a background container to text.
Improves readability on busy images.
Enable blur background
checkbox
false
Applies a backdrop-filter blur.
Creates a "glass" effect on the text box.
Block gap (desktop)
range
16px
Spacing between individual blocks.
Adjusts vertical "breathing room."
Image behavior
select
None
Animation style for the background.
Adds parallax-style or zoom motion.
Stack images on mobile
checkbox
true
Stacks 1st and 2nd images vertically.
Optimizes split-layouts for narrow screens.
Show text below
checkbox
false
Moves text box outside image on mobile.
Preserves full background image visibility.
Troubleshooting
Issue: My text is disappearing into the background image. Cause: Insufficient contrast between text color and the image. Solution: Increase the Overlay opacity or enable Show text box with a semi-transparent Background opacity.
Issue: The banner is too tall on my phone. Cause: The Image height is set to "Adapt" and your image is a vertical portrait. Solution: Change Image height to "Small" or "Medium," or upload a specific Mobile image with a wider aspect ratio.
Issue: The "blur" effect isn't showing in my browser. Cause: Enable blur background is checked but the Background opacity is set to 100% (Solid). Solution: Lower the Background opacity to around 70-80% to allow the blur effect to become visible.
Issue: The second image is hidden on mobile. Cause: The Hide second image on mobile checkbox is active. Solution: Uncheck Hide second image on mobile in the section settings.
FAQ
Q: Can I use this as a full-screen hero?
Yes. Set the Image height to "Large" or choose "Adapt" with a high-resolution 16:9 image to cover the most screen real estate.
Q: How do I change the color of the text?
The text color is controlled by the Color scheme setting. You can modify these global schemes in your Theme settings > Colors.
Q: Why does the image look blurry?
Ensure the image you uploaded is at least 2000px wide. If Image behavior is set to "Zoom-in", the image naturally scales up, which may highlight low-quality uploads.
Q: Can I put a video in the background?
This specific section is optimized for images. For background video, please use the Background Video or Video section.
Last updated