Banner with Text Section Combine Strong Visuals With Clear Messaging

Create a bold banner with an image, clear text, and a CTA. Use a floating or inline content box to highlight offers, collections, launches, or brand messages.

Get App View Section
  • check-icon OS 2.0 Ready
  • check-icon Floating Content Box
  • check-icon No Coding Needed
New arrival
Tranding
Tranding
New arrival
Tranding
Tranding
vector
vector

Key Features: Everything You Need for a Flexible Banner

Build a clean, responsive banner with separate images, flexible content placement, overlays, custom buttons, and adjustable image heights.

Get App
Desktop & Mobile Images

Desktop & Mobile Images

Upload separate images for desktop and mobile screens.

Floating Content Box

Floating Content Box

Place your text over the image or use it as an inline content block.

Adjustable Content Position

Adjustable Content Position

Choose whether the content appears on the left or right.

Custom Content Width

Custom Content Width

Set the width of the content box to suit your layout.

Image Overlay

Image Overlay

Add a color overlay and adjust its opacity for better text visibility.

Customizable Button

Customizable Button

Add a solid or outline button with your own label and link.

Adjustable Image Height

Adjustable Image Height

Choose Small, Medium, or Large banner heights.

Easy Theme Editor Controls

Easy Theme Editor Controls

Adjust colors, fonts, spacing, and layout without code.

Banner with Text Settings & Options

Control the banner content, images, layout, and styling directly from the theme editor.

Section Settings

Section Settings

Applies to the whole section

Main title displayed on the banner.

Heading

Supporting text shown with the main heading.

Content

Text displayed on the CTA button.

Label

Page or destination opened by the button.

Link

Display the content box over the image.

Floating Content

Choose where the content appears.

Position

Image used on desktop screens.

Desktop

Image used on mobile screens.

Mobile

Set the banner image height.

Height

Add a color overlay to the banner image.

Overlay Color

Control the overlay transparency.

Overlay Opacity

Set the section background color.

Background Color

Set the heading text color.

Heading Color

Customize button background, text, and border colors.

Btn Bg / Text / Border Color

Make the banner span the full available width.

Full Width

Set the maximum width of the section.

Section Max Width
Add Section

Where This Section Can Be Used

Use the Banner with Text across your store to introduce your brand, promote products, support campaigns, or add stronger visual messaging to important pages.

  • Home Page
  • Collection Page
  • Product Page
  • Landing Page
Home Page

Make a Strong First Impression

Use the banner to introduce your brand, feature a collection, or highlight an important offer with a strong image and clear message.

check-iconHighlight key offers

check-iconIntroduce your brand

check-iconFeature collections

check-iconGuide visitors to key pages

Collection Page

Give Your Collection a Clear Introduction

Add a strong image and short message at the top of a collection page to help shoppers understand what the collection offers.

check-iconIntroduce the collection

check-iconSet the right context

check-iconAdd visual interest

check-iconEncourage further browsing

Product Page

Highlight Product Benefits Visually

Use the banner to showcase product benefits, lifestyle imagery, brand stories, or supporting content alongside a clear message.

check-iconHighlight product benefits

check-iconAdd lifestyle imagery

check-iconSupport brand storytelling

check-iconGuide shoppers to the next step

Landing Page

Make Campaign Messages Stand Out

Use the banner for launches, promotions, and seasonal campaigns. Combine a strong visual with a focused message and clear CTA.

check-iconHighlight campaign messages

check-iconSupport promotional content

check-iconCreate a clear visual focus

check-iconAdd a direct CTA

A Simple Way to Make Your Message Stand Out

Combine strong imagery with useful text and a clear CTA. Choose how the content is positioned and make the banner work across different screen sizes.

Banner with Text section

Why Choose Banner with Text

Create banners that fit your store with flexible options for images, content placement, sizing, and styling.

check-iconMake a stronger visual impact

check-iconCommunicate key messages clearly

check-iconHighlight offers and collections

check-iconAdd clear CTAs

check-iconKeep the layout responsive

check-iconMatch the banner to your brand

Do this, skip that.

DO

  • do Use clear, high-quality images
  • do Keep text short and readable
  • do Use overlays when needed
  • do Write clear CTA labels
  • do Check the mobile image

DON'T

  • don't Use busy background images
  • don't Add long paragraphs
  • don't Use unclear button labels
  • don't Ignore mobile cropping
  • don't Add too many messages

Frequently Asked Questions

Can I use different images for desktop and mobile?

Yes. Upload separate desktop and mobile images to make sure the banner looks right on different screen sizes.

Can the content box appear over the image?

Yes. Enable Floating Content to place the text over the image, or turn it off for an inline layout.

Can I position the content on the left or right?

Yes. Choose the left or right position from the theme editor.

Can I add an image overlay?

Yes. Add an overlay color and adjust its opacity to improve text readability.

Can I customize the button?

Yes. Add your own label and link, then choose a solid or outline button style and customize its colors.

Can I change the banner height?

Yes. Choose Small, Medium, or Large height options to fit your design.

Can I make the banner full width?

Yes. Enable Full Width or set a custom maximum section width from the theme editor.

Help Center

support e-mail

We're Here to Help: We believe in providing exceptional customer support!

For Support or any Questions Email Us: [email protected]

Ready When You Are: Combine Strong Visuals With Clear Messaging

Install SectionHub and add the Banner with Text section to your theme in minutes - no coding required.

Get App