Hero Banner

The Hero Banner is a prominent homepage section in the Voltix theme, designed to capture customers' attention as soon as they enter your store. It provides a large, visually engaging area for showcasing your featured products, promotional campaigns, new arrivals, or important brand messages.

With flexible image, content, and navigation options, the Hero Banner allows you to combine impactful visuals with compelling headings, descriptions, and call-to-action buttons. You can use the slider functionality to highlight multiple promotions or products, while supporting content such as featured categories and navigation links helps customers discover more of your store.

The responsive layout ensures that your hero content looks polished across desktop, tablet, and mobile devices, creating a strong first impression while guiding customers toward key products and collections.

How to Add the Hero Banner Section

• From your Shopify admin, go to Online Store → Themes.
• Click Customize on the Voltix theme.
• In the left-hand editor sidebar, click Add section and select Hero Banner.
• Add slide blocks and block items to construct the content you want to display.
• Click Save to lock in your changes.

Hero Banner Section Settings

Configure settings that affect the overall Hero Banner layout, rotation behavior, border radius, and spacing.

• Banner height (desktop): Set the banner height for desktop devices. You can either specify a fixed height or enable Use image's original height to automatically match the banner height to each slide image's natural aspect ratio.
• Banner height (mobile): Set the banner height for mobile devices. This setting is applied when the Use image's original height option is enabled for desktop.
• Use image's original height (desktop only): Enable this option to display each desktop slide using the image's natural aspect ratio instead of the fixed banner height. The mobile banner continues to use the configured mobile height.
• Enable parallax scrolling: Enable this option to add a parallax effect as customers scroll through the banner. The image moves with the scroll, while the bottom corners gradually round from 0px to 65px during the first half-screen of scrolling. The corner-rounding effect remains active even when parallax scrolling is disabled.
• Overlay color: Choose the color displayed as an overlay on the banner image. The default color is #000000.
• Overlay opacity: Adjust the transparency level of the banner overlay to control how strongly it appears over the slide image.
• Auto-rotate slides: Enable this option to automatically rotate the slides without requiring customer interaction.
• Auto rotate slides after every: Set the time interval between automatic slide transitions, such as 3 seconds.
• Slider effect: Select the animation used when changing slides. Available options include Slide and Fade.
• Show thumbnails widget: Enable this option to display thumbnail navigation for the slides. The thumbnails widget appears only when the section contains more than one slide.
• Show logo marquee: Enable this option to display a trusted-by logo marquee below the button within each slide block. Add the required logos separately for each slide.
• Enable left or right side block items: Enable this option to display additional category or promotional blocks alongside the main slideshow banner.
• Left or right side block items background: Choose the background color for the side block items, such as #FFFFFF.
• Border radius block: Set the corner radius for the left or right side block items, such as 10px.
• Layout: Choose how the side block items are positioned relative to the slideshow, such as Left items + Right slide.
• Section Spacing: Configure the spacing around and within the banner section:
  • Top spacing: Set the space above the banner section, such as 10px.
  • Bottom spacing: Set the space below the banner section, such as 20px.
  • Top bottom gap: Set the vertical gap between internal slideshow sections, such as 5px.
  • Left right gap: Set the horizontal gap between the side blocks and the slideshow, such as 10px.

Slider Block Settings

• Image: Upload the background image for the banner slide. For example, Home_3.png.
• Heading: Enter the main heading that appears on the banner, such as Pure Sound. Zero Distractions.
• Content: Add a short description or supporting text for the banner, such as Experience crystal-clear sound anywhere.
• Content position: Choose where the heading, content, and button appear on the banner. Available positions
• Button label: Enter the text displayed on the banner button, such as SHOP NOW.
• Button link: Enter the destination URL for the button. When customers click the button, they are redirected to the specified page.