Image Banner
The Image Banner section is designed to create visually engaging promotional banners with customizable background images, rich text content, call-to-action buttons, overlays, and responsive layouts. This section helps merchants highlight featured collections, special offers, product launches, and marketing campaigns in a clean and modern format.
With flexible customization options for banner imagery, typography styling, content positioning, overlay appearance, responsive heights, spacing, and button layouts, the Image Banner section allows you to create impactful storefront experiences optimized for all screen sizes.
How to Add the Image Banner Section
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the Voltix theme.
- In the Theme Editor, click Add section.
- Select Image banner from the available sections.
- Configure the section settings such as banner images, content alignment, overlay appearance, typography styling, spacing, and button settings.
- Add promotional text and call-to-action buttons to guide customers toward featured products or collections.
- Click Save to publish your changes.
How To Configure The Image Banner Settings
The section settings allow you to control the overall banner layout, responsive behavior, content alignment, typography styling, overlay effects, spacing, and button presentation for the Image Banner section.
- Section Width: Choose between page width or full width layout.
- Select Color: Select a predefined color scheme for the section.
- Banner Image: Upload the main desktop banner image.
- Banner Image (Mobile): Upload a responsive image optimized for mobile devices.
- Video URL: Add a video link to display video media inside the banner.
- Media Height: Choose the height behavior for banner media.
- Media Height (Mobile): Adjust the banner height for mobile screens.
- Content Position: Control the vertical and horizontal position of banner content.
- Overlay Color: Select a color overlay displayed above the banner image.
- Overlay Opacity: Control the visibility intensity of the overlay effect.
- Border Radius: Adjust the rounded corners of the banner container.
- Container Width: Control the width of the content container inside the banner.
- Text Alignment: Align the banner content to the left, center, or right.
- Show Content and Buttons in a Row: Display content and buttons side-by-side in a horizontal layout.
- Heading: Add a small promotional heading or label.
- Section Heading Color: Customize the heading text color.
- Heading Font Size: Adjust the font size of the heading text.
- Paragraph Text: Add supporting promotional content below the heading.
- Paragraph Font Size: Control the size of the paragraph text.
- Button Label: Customize the call-to-action button text.
- Button Link: Assign a destination link for the banner button.
- Left-Right Section Gap: Adjust the horizontal spacing around the banner section.
- Top-Bottom Gap: Control the vertical spacing around the section.