Taiga
documentation

Hero banner

The Hero Banner section provides a large, impactful visual display for showcasing your brand or hero products prominently at the top of your website. This section integrates images or videos, along with text and one or more call-to-action (CTA) buttons, and offers extensive customization for the layout on both desktop and mobile views.

✅ Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Hero Banner Section.
    Click on 'Add section' and select 'Hero Banner' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Hero Banner section, click 'Save' to implement your adjustments.

Section Settings:

Color Scheme and Overlay Opacity: Customize these to enhance the visual impact and readability of the overlay text.

Desktop Layout:

Full Width Setting: Expand the banner to cover the full width of the viewport.
Section Height: Choose between a full-screen (relative) height or a custom height set by pixels, adjustable from 200px to 1200px.
Text Content Max Width: Define how much of the banner width the text should cover, selectable from full width (12/12) to a narrower portion (4/12).
Content Position: Adjust the overlay position options (Top Left, Top Center, Top Right, Left, Center, Right or Bottom Left, Bottom Center and Bottom Right) and text placement below the image to ensure visibility.
Text Alignment and Margins: Align the text left, center, or right and adjust margins to fine-tune the spacing.

Mobile Layout:

Section Height: Same options as desktop, with height adjustable from 200px to 800px.
Content Position and Text Alignment: Customizable overlay positions (Top, Middle, Bottom) and text alignment options.
Margins: Set top and bottom margins to optimize layout on mobile devices.

Customize Blocks:

Image (or Video) Block:

Media Toggle: Choose between displaying an image or video. The banner link option allows the entire banner to serve as a clickable link if no buttons are in use.
Desktop and Mobile Settings: Select different content for mobile devices if desired, with landscape images recommended for desktop and portrait for mobile.

 

Heading Block:

Heading: Enter text for the main heading.
HTML Tag: Choose the appropriate HTML tag to enhance SEO and fit the visual hierarchy.
Size Modifier and Margin Top: Adjust text size and top margin to ensure clear visibility across devices.

 

Subheading Block:

Subheading: Provide additional context or information.
Size Modifier and Margin Top: Customize the text size and adjust the top margin for both desktop and mobile setups.

 

Text Block:

Text: Add further descriptive or supplementary text.
Size Modifier and Margin Top: Adjust for optimal readability and spacing.

 

Button Block:

First, Second, and Third Buttons: Customize each with text, a link, and a style choice (primary, secondary, or link).
Size Modifier and Margin Top: Fine-tune the button size and spacing to integrate smoothly within the banner.