The Hero Banner is a full-width promotional banner section containing overlay text and call-to-action buttons set against a fullscreen background image.
️Key Customization Options
- Background Image:
* Upload a single background image.
* Adjust the background focal point using Shopify’s built-in focal tool to prevent critical image details from being cropped.
- Color Overlay:
* Set a dark or color overlay opacity slider (0% to 90%) to darken the background image, ensuring that overlay text remains readable.
- Content Alignment:
* Align your headings and buttons to the Left, Center, or Right of the banner container.
Recommended Image Dimensions
Since this banner stretches across the full width of the screen, use high-resolution landscape images:
- Recommended Resolution:
2000px × 1000px(or1920px × 1080px). - Image Format: Compressed JPEG or WebP to optimize page load speeds.