Skip to main content

Logo Banner with Text

Overview​

The Logo Banner with Text section is designed for the Header Group, adding a modern and elegant visual experience to your store's first impression. It allows you to display a prominent animated logo along with supporting text or a short tagline.

As users scroll down, the logo smoothly transitions into the main navigation bar, creating a refined and premium browsing experience. This section helps reinforce brand identity while maintaining a sleek, professional, and visually engaging layout.

How to set up Logo Banner with Text​

  • Upload your logo file.
  • Select a banner background — image or video.
  • Adjust the text position, background color, text color, and background opacity.
  • Customize the content blocks as needed — choose from heading, subheading, text, and buttons.

Main settings​

note

This section should be used as the first section in order.

Logo Image

  • Logo image: Upload or select the logo image for the banner.

Shopify-Hosted Video

  • Shopify-hosted video: Background videos play on loop, with no sound. Upload or select a Shopify-hosted video.

Large Screen Version

  • Background image: Select an image for the large screen version of the banner.

Mobile Version

  • Background image: Select an image for the mobile version of the banner.

Content

  • Horizontal alignment: Controls the horizontal positioning of content within the section (left, center, or right).
  • Mobile screen text alignment: Adjusts the horizontal alignment specifically for mobile devices.

Colors

  • Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
  • Background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
  • Background opacity: Adjust the opacity of the background color.

Customize Subheading block​

Click one of the preloaded subheading blocks to customize it.

Customize Heading block​

Click one of the preloaded heading blocks to customize it.

Customize Button block​

Click one of the preloaded button blocks to customize it.

Customize Text block​

Click one of the preloaded text blocks to customize it.