Header banner

Header Banner is available only on Home page and visible only if Transparent header setting in Theme settings is enabled.

Adjust Header banner section

These blocks allow you to customize the header banner with various types of content, enhancing the functionality and appearance of your Shopify store.

Within the Header banner settings, you can adjust the following fields:

Image overlay opacity

• Adjusting this slider changes the opacity of the image overlay. Lower values make the overlay more transparent, while higher values make it more opaque. The specific percentage value can also be manually entered.

• Default value: 20%

Example:

Image overlay opacity: 10 %

Image overlay opacity: 80 %

Image

Add background image for this section, use high resolution image for better user experience.

• Select image: Allows you to upload or select an image to be used in the header banner.
• Explore free images: Provides access to a library of free images that can be used for the header banner.

Text theme

• Dark: Sets the text on the header banner to a dark color. This change will only take effect if the 'Show transparent header on home page' option in Theme settings is checked.
• Light: Sets the text on the header banner to a light color. This change will only take effect if the 'Show transparent header on home page' option in Theme settings is checked.

Example:

Text theme: Dark

Text theme: Light

Custom CSS

• Add custom CSS to further style and customize the benefits section according to your specific design needs and preferences.

Available blocks

Within the header banner, the following blocks are available:

Subheading

• Allows you to input the subheading text that will appear above the main heading, providing additional context or information.

Heading

• Allows you to input the heading text that will appear below the subheading, providing main context or information.

Content

• Input the body text, adjusts the size of the content text and provides formatting options such as bold, italic, lists, links, etc., to enhance the content's appearance.

Button

• Allows you to add button label, choose button style and choose button style (Default, Outline, Primary, Inverted)

💡 Tip: You can use drag and drop to move individual blocks. In Shopify, individual blocks can be removed (bin) or hidden (eye), and then revealed again.