A stylized hero banner where the headline itself becomes the visual focal point. The heading can be filled with an uploaded image, creating a text-mask effect, or a multi-colour gradient. Ideal for brand-forward homepages and campaign landing pages.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Â
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Edit theme to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Customize section settings
Click the 🧰 Typography banner section to open its settings.Â
Typography banner
The Typography banner settings provide control over the section's layout, colors, spacing, and margins.
Layout
Content alignment can be adjusted to position the banner content to the left, center, or right, and the Content width setting determines the width of the content area on desktop.
Color
Select a Background color to apply a solid color to the section.
For a more dynamic background, add a Background gradient. When selected, the gradient replaces the background color.
Section padding
Adjust Top padding and Bottom padding to increase or decrease the space inside the section above and below the content.
Section margins
Set the Top margin and Bottom margin to control the space between the Typography banner and the sections above and below it.
Customize blocks
Add blocks under the section by clicking (+) Add block
Heading
The Heading block provides options for customizing the heading text, typography, sizing, and appearance.
Enter and format your text in the Heading field, then choose a Font that suits the section. Enable Uppercase to display the heading in all capital letters.
Adjust Heading size to set the text size on desktop, and Mobile heading size to set a separate size for smaller screens. Line height controls the vertical spacing between lines, while Letter spacing adjusts the space between individual characters.
Text fill
Select a Fill image to display an image within the heading text rather than a solid color. For smaller screens, a separate Mobile image can be selected.
When no fill image is selected, Fill colour determines the solid color of the heading text.
Text
The Text block adds supporting text to the section, with options to customize its formatting, size, and color.
Enter and format content in the Text field using the available rich-text controls.
Adjust Text size to set the font size on desktop and Mobile text size to set a separate size for smaller screens.
Select a Text color to customize the color of the text.
Button
The Button block adds a call-to-action button to the section, with options to customize its label, destination, style, and colors.
Enter the text displayed on the button in the Button label field, then select a destination with the Button link setting.
Choose between Fill and Outline for the Button style to change the appearance of the button.
Select a Background color and Text color to customize the button colors. For the Outline style, the background color is applied to the button outline.