Hero banner

A large, visually impactful banner for highlighting campaigns, announcements, or featured products.

How to add a Hero banner to your Shopify store

1. In the theme editor (Customize), click Add section.

2. Select Hero banner section.

3. Make necessary changes.

4. Save.

How to edit the section Hero banner

The Hero banner section includes:

• 2 static blocks:

Media – add your banner image or video

Setting	Description
Type	Choose whether the block displays an Image or a Video.
Image	Upload the main image when Type = Image. Supports JPG, PNG, WebP.
Video	Upload a video file when Type = Video. Supports MP4.
Media overlay	Enable a subtle overlay to improve text readability if you're placing text on top of the image.

Content – add text, buttons, and spacers inside the banner

Place text, buttons, and spacers inside hero banners.

Setting	Description
Alignment	Control how your content is aligned inside the container.
Position	Determine where the content sits over the banner.
Width	Choose the content width: Fit content / Fill / Custom.
Custom width	Set a custom percentage width when using the Custom option.
Inherit color scheme	Use the section’s color scheme. Disable to choose a custom color scheme. Learn more: /Colors
Transparent background	Remove the content background for a clean overlay style.
Border	Add a border around the content box.

📦 Nested dynamic blocks

The Content block supports 3 nested block types:

Dynamic blocks	Purpose
Text	Add headings, paragraphs, taglines, or styled text. Supports presets and rich text.
Button	Add one or multiple call-to-action buttons.
Spacer	Add vertical spacing between text and buttons for better layout control.

📝 What you can build inside the Content block

What you can build inside the Content block:

• Hero tagline + heading + CTA

• Promotional message stack

• Multi-line storytelling text

• “Shop now” / “Learn more” button rows

• 1 dynamic block:

  • Marquee – Adds a scrolling text ribbon above or below the banner.

💡 Best practices

• Use “Adapt to image” height if your banner has strong visuals and needs a natural crop.

• Add a spacer before/after headings to create breathing room.

• Use a marquee for seasonal campaigns — instantly adds urgency and motion.

• For readability, enable Media overlay if the background is bright or busy.