Pro banner

The ultimate conversion-driven hero section. Create high-impact landing pages with advanced gradient overlays, glassmorphism effects, and highly customizable block layouts for icons, cards, and text.

Overview

The Pro banner is an advanced version of the standard image banner, specifically engineered for high-growth Shopify stores. It solves the common problem of "text legibility over busy images" by providing a suite of container and overlay tools—including background blurs (glassmorphism), custom border controls, and precise opacity scaling.

Designed to sit at the top of a Homepage or Landing Page (such as an Advertorial), it allows merchants to stack multiple image layers and use specific mobile images to ensure perfect formatting across all devices. The section supports theme blocks and app blocks, making it highly extensible for adding product cards, icon lists, or unique promotional elements directly into the hero zone.

Key Features

• Dual-Image Layering: Overlay two different images to create depth or side-by-side compositions.
• Glassmorphism Effects: Apply background blurs and semi-transparent containers for a modern UI look.
• Gradient Engine: Build complex overlays with adjustable directions and color-stop control.
• Advanced Mobile Logic: Set unique mobile-only images and toggle between stacking or hiding secondary visuals on smaller screens.
• Precision Positioning: Nine-point alignment grid for both desktop and mobile layouts.
• Dynamic Image Behavior: Choose between Ambient motion, Fixed (parallax), or Zoom-on-scroll animations.

Step-by-Step Setup

1. Open the Shopify Theme Editor.
2. Navigate to the page where you want to add the section.
3. Click Add section and select Pro banner.
4. In the settings panel on the right, click Select image to upload your primary desktop background.
5. (Optional) Select a Second image to create a split-screen effect.
6. Scroll to the Mobile header and select a Mobile image to ensure the focal point is correct on smartphones.
7. Under Desktop Container, check Show text box if you want to house your content inside a styled card.
8. Adjust the Background opacity and toggle Enable blur background to create a "glass" effect.
9. Click Add block within the section to insert Heading, Text, Button, or specialized icons.
10. Use the Block gap ranges to fine-tune the vertical spacing between your headlines and buttons.
11. Preview your design on both Desktop and Mobile views using the top bar icons.
12. Click Save.

Best Practices

Images

• Desktop: Use 1920×1080px (16:9) or 1920×1200px (16:10). Keep the file size under 400KB.
• Mobile: Use 750×1100px (vertical) JPG or WebP. This prevents faces or products from being cropped out by the screen edges.
• Adapt to Image: If you have specific height requirements, set Banner height to "Adapt to first image" to maintain the image's original aspect ratio.

Mobile

• Stacking: If using two images, enable Stack images on mobile so they appear on top of each other rather than being squeezed horizontally.
• Text Placement: Use the Show text below images on mobile setting if your background image is too busy to support legible text.

Performance

• Image Behavior: Use "None" or "Ambient" for the best performance. "Fixed" and "Zoom-in" behaviors can be processor-intensive on older mobile devices.
• Lazy Loading: The theme handles this automatically, but ensure your primary "Hero" banner is the first section on the page for optimal LCP (Largest Contentful Paint) scores.

Settings Reference

Setting	Type	Default	Description	Effect
First image	image_picker	-	Primary background image for desktop.	Sets the main visual.
Second image	image_picker	-	Secondary image for split-screen layouts.	Creates a 50/50 split.
Overlay color	color	#000000	The base color for the image overlay.	Darkens or tints the image.
Enable gradient overlay	checkbox	false	Enable a color transition.	Activates gradient controls.
Overlay end color	color	#000000	The second color of the gradient.	Visible only if gradient is enabled.
Gradient direction	select	to bottom	The path the colors follow.	Horizontal or vertical flow.
Image overlay opacity	range	0%	Intensity of the color overlay.	Controls visibility of content.
Overlay height	range	100%	Vertical coverage of the color overlay.	Can create partial overlays.
Overlay width	range	100%	Horizontal coverage of the color overlay.	Can create partial overlays.
Banner height	select	medium	Overall section height.	Controls vertical scale.
Desktop content position	select	middle-center	Where the content box sits on desktop.	Aligns box to 9 points.
Desktop content alignment	select	center	Text alignment within the box.	Left, center, or right text.
Show text box	checkbox	false	Wraps blocks in a styled container.	Aligns with "Desktop Container" settings.
Color scheme	color_scheme	scheme-1	The theme color set for the text box.	Sets background and text colors.
Background opacity	range	100%	Transparency of the container box.	Visible if "Show text box" is on.
Enable blur background	checkbox	false	Adds a glassmorphism (frosted glass) effect.	Blurs the image behind the box.
Blur amount	range	8px	Intensity of the glass blur.	Visible if blur is enabled.
Border width	range	0px	Thickness of the box border.	Adds a stroke around the container.
Border radius	range	0px	Roundness of the container corners.	Creates rounded or pill shapes.
Block gap (desktop)	range	16px	Space between the content blocks.	Controls vertical layout density.
Image behavior	select	none	Subtle animations triggered by scroll.	Adds parallax or zoom effects.
Mobile image	image_picker	-	Specific image for screens < 750px.	Replaces desktop image on mobile.
Mobile content position	select	middle-center	Vertical/Horizontal content spot on mobile.	Mobile-specific positioning.
Stack images on mobile	checkbox	true	Places image 1 on top of image 2.	Vertical layout for dual images.
Show text below images on mobile	checkbox	false	Moves content out of the image area.	Improves legibility on small screens.

Troubleshooting

Issue: Text is hard to read against the background image. Cause: High contrast in the image or low overlay opacity. Solution: Increase the Image overlay opacity to at least 40% or check Show text box and set a Background opacity of 100%.

Issue: The mobile image looks blurry or pixelated. Cause: The "Mobile image" picker is empty, forcing a large desktop image to scale down. Solution: Upload a dedicated vertical image (750x1100px) to the Mobile image setting.

Issue: The background blur (glassmorphism) is not showing. Cause: "Show text box" is disabled or "Background opacity" is set to 100%. Solution: Check Show text box, enable Enable blur background, and lower the Background opacity to between 20% and 80%.

Issue: My second image is missing on mobile. Cause: "Hide second image on mobile" is checked. Solution: Uncheck Hide second image on mobile in the section settings under the Mobile header.

FAQ

Q: Can I use a video as the background?

The Pro banner is optimized for high-performance images. To use video backgrounds, utilize the Background Video section or a specialized Hero Video section if provided in your theme.

Q: How do I make the banner take up the whole screen height?

Set Banner height to "Large". For a true fullscreen "Hero" look, ensure no other sections are above it and set your image aspect ratio to "Adapt to first image" with a 16:9 file.

Q: Does the overlay affect the blocks (text and buttons)?

No. Settings under the Overlay range only affect the "film" over the background image. Your text and buttons sit on top of this layer for maximum clarity.

Q: How many buttons can I add?

You can add multiple Button blocks. To align them side-by-side or stacked, manage the individual block settings.

Q: What is the "Ambient" image behavior?

It adds a very subtle, slow-motion movement to the image that isn't tied to scroll position, creating a "living" feel to the page without distracting the user.

Q: Why isn't the gradient overlay showing?

Ensure Enable gradient overlay is checked AND the Image overlay opacity is set above 0%. If the opacity is 0%, the gradient remains invisible.