Banners with Text Outside
The Banners with Text Outside section allows you to showcase images or videos where the text content is placed outside of the media container rather than on top of it.

This layout is great for displaying product collections, lifestyle imagery, or promotional visuals while maintaining a clean and readable design.
You can also add multiple Banner blocks inside this section — each acting as an individual banner item. These banner blocks can include an image or video, heading, description, and buttons.
Location: Sections -> Templates -> Banners → Banners with Text Outside
Banners with Text Outside — Options Overview
Option
Description
Heading
Sets the main title of the section, usually displayed above the banners (e.g., “Our Collections” or “Shop by Category”).
Subheading
Adds an optional secondary line of text above or below the main heading. Useful for short introductions or taglines.
Heading
The editable text field for entering or customizing the main heading title.
Description
Adds descriptive text below the heading to give additional context or explain what the section contains.
Heading alignment
Controls horizontal alignment of the section heading and description. Options: Left or Center. Choose Center for a balanced layout or Left for alignment consistent with other content areas.
Layout
Controls general layout properties for spacing and overall section width.
Top spacing
Adjusts vertical spacing above the section. Options: None, Small, Medium, Normal. You can further customize spacing under Theme settings → Layout.
Width
Defines how wide the section content appears across the page. Options: • Default – standard theme width. • Boxed – adds side padding for a contained layout. • Wide – expands to full browser width on screens 1440px and larger, ideal for large, immersive layouts.
Number of columns
Determines how many banner blocks display per row on desktop. You can choose between 1–12 columns. Fewer columns = larger banner size.
Number of columns on tablet
Sets the number of banners per row on tablet devices. You can choose between 1–6 columns.
Mobile grid
Defines how banners are arranged on mobile devices. Options: One item per row or Two items per row. Choose based on readability and image proportions.
Image hover effect
Selects how the banner image reacts when hovered. Options include: • Basic theme settings – inherits the default image hover from global theme settings. • Disable – removes any hover animation. • Zoom in #1, Zoom in & rotate, Zoom in #2 – subtle zoom/rotation animations. • Zoom out #1, Zoom out #2, Slide, Shine – advanced hover animations that add motion or reflection effects.
Image ratio
Controls the image’s width-to-height ratio for desktop. Options: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9). Select the ratio that matches your content style or visual layout.
Image ratio mobile
Sets the image aspect ratio for mobile view. Has the same options as desktop: Auto, Portrait, Landscape, Square, Round, Social story, Widescreen. Useful for optimizing vertical screen proportions.
Dividing line
Adds a horizontal separator between this section and the next.
Show
Toggles the visibility of the dividing line on or off.
Background
Defines the background of the entire section. You can use colors, gradients, or an image.
Background: Hide / Color / Gradient / Image
• Hide – transparent background. • Color – solid background fill. • Gradient – two or more colors blended in a gradient. • Image – displays a chosen image as section background.
Colors
Controls color schemes for the section and its elements.
Base
Sets the general color scheme for background and text in the section.
Accent
Defines accent colors used for interactive elements like buttons or links.
Lines
Controls the color of borders and dividers inside the section.
Banner (Inner Section) — Options Overview
Each Banner block inside this section represents a single media item with text and a link. You can add as many as needed.
Option
Description
Type: Image / Video
Choose whether the banner uses an image or an embedded video.
Image
Upload or select an image from your Shopify library. This serves as the main visual for the banner.
Image hover
Defines hover animation for the image. Inherits global hover settings unless changed here.
Image mobile
Upload an alternate image optimized for mobile display. Helps maintain clarity and correct proportions on small screens.
Content
Section for adding text and links.
Link
Add a clickable URL to the banner (e.g., a collection, product, or custom page). Clicking the banner or button will navigate to this link.
Heading
Main title text for the banner (e.g., “New Arrivals”).
Description
Adds short supporting text below the heading (e.g., “Discover the latest styles”).
Button
Adds an interactive button (e.g., “Shop now”). You can customize its text and link.
Settings
Adjusts the visual appearance of banner text.
Heading size
Defines heading typography scale. Options: Extra Large, Large, Medium, Small, Extra Small.
Underline on hover
Adds an underline animation when the banner heading or button is hovered. Useful for highlighting interactivity.
Text align
Aligns the text within the content area. Options: Left or Center.
Colors
Controls the color scheme for text and background inside the individual banner block.
Heading
Sets the color of the banner’s heading text.
Heading link hover
Defines color for heading when hovered. Adds visual feedback for clickable headings.
Description
Sets the color of description text below the heading.
Button
Adjusts color for the button element.
Show background
Toggles whether a colored or gradient background is visible behind the text box.
Background
Sets a solid background color for the text container.
Background gradient
Applies a gradient effect to the text box background.
Border
Defines border color or style for the text container.
Text
Controls text color inside the text box when background is shown.
Show background on hover
Toggles the background visibility when the user hovers over the banner.
Background hover
Sets the background color when hovered.
Background gradient hover
Applies a gradient background on hover for dynamic styling.
Border hover
Defines border color on hover.
Text hover
Sets the text color when hovered.
Enable shadow
Adds drop shadow to the text box or banner. Creates depth and contrast against the background.
Shadow
Defines shadow color and opacity for normal state.
Shadow hover
Defines shadow color and opacity when hovered.
Media button
Controls the look of media overlay buttons (e.g., play icons for videos or slider arrows).
Background
Sets the color for the media button background.
Video button, slider buttons → Icon
Adjusts color for icons on media buttons (e.g., play arrow or navigation arrows).
Video button, slider buttons → Background hover
Sets background color of media buttons when hovered.
Icon hover
Defines hover color for the button icon.
Additional Notes
The Banners with Text Outside section allows you to add multiple Banner blocks, each with its own image/video, text, and styling.
You can freely reorder banners to change layout composition.
Text outside placement ensures that images remain visually clean while the textual content stays legible and accessible.
Adjust width and columns carefully to maintain image clarity and text readability across devices.
Use consistent image ratios for all banners to achieve a balanced and professional appearance.
Last updated