> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/banners/media-banner.md). # Media Banner The Image Banner section is a powerful tool for creating eye-catching hero sections on your homepage or landing pages. It displays a large image or video background with text content overlaid on top, making it perfect for showcasing featured products, promotions, or important announcements. This section helps you create a strong first impression and guide visitors to key areas of your store.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Navigate to the page where you want to add the banner, or click **Add section** and select **Media banner**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Media * **Image**: Upload the main image that will be displayed on desktop devices. Choose a high-quality image that represents your brand or promotion well. * **Video**: Alternatively, you can upload a video file to play as the background instead of an image. Videos automatically loop and play without sound. * **Image height**: Controls how tall the banner appears on desktop. Choose "Adapt" to match your image's natural proportions, or select a fixed height (Small, Medium, Large, Full-screen, or Screen-adapted) for consistent sizing. {% hint style="info" %} Use "Adapted to screen" option only if the section is the first section on the page. {% endhint %} #### Effects * **Media overlay opacity**: Adds a colored overlay on top of your image or video to improve text readability. Set to 0% for no overlay, or increase the percentage to make the overlay more visible. * **Media overlay color**: Choose the color of the overlay that appears on your media. Black is the default, but you can use any color to match your brand. * **Overlay darken on scroll**: When enabled, the overlay gradually becomes darker as visitors scroll down the page, creating a dynamic effect that helps text stand out more. * **Overlay target opacity**: This setting appears when "Overlay darken on scroll" is enabled. It controls how dark the overlay becomes at the end of the scroll animation. * **Image behavior**: Choose how your image or video animates. Options include "None" for static images, "Ambient" for subtle movement, "Fixed" for a parallax effect, or "Zoom-in" for a gentle zoom animation. #### Content * **Banner box max width**: Controls the maximum width of the text content box. Choose from Small, Medium, or Large to control how wide your text can spread across the banner. * **Desktop content max width**: Determines whether the content container spans the full width of the page or stays within the standard page width boundaries. * **Desktop content position**: Choose where your text content appears on the banner. You can position it at the top, middle, or bottom, and align it to the left, center, or right. * **Desktop content alignment**: Controls how text is aligned within the content box (left, center, or right). This affects the alignment of headings, paragraphs, and buttons. * **Show text box**: When enabled, displays a background box behind your text content. When disabled, text appears directly over the image without a background. * **Content padding**: Adjusts the amount of space inside the text content box. Higher values add more breathing room around your text. * **Color scheme**: Select a predefined color scheme that controls the text colors and background styling of your content box. * **Sticky container**: When enabled, the content box stays visible at the top of the screen as visitors scroll past the banner, keeping important information accessible. #### Mobile Layout * **Image**: Upload a separate image optimized for mobile devices. If left empty, the desktop image will be used on mobile. * **Video**: Upload a separate video for mobile devices. If left empty, the desktop video will be used on mobile. * **Image height**: Controls the banner height specifically for mobile devices. This allows you to have different proportions on mobile versus desktop. * **Mobile content position**: Choose where your text content appears on mobile devices (top, center, or bottom). * **Mobile content alignment**: Controls text alignment on mobile devices (left, center, or right). * **Show text below**: When enabled, moves the text content below the image on mobile devices instead of overlaying it on top. This can improve readability on smaller screens. *** ### Presets * **Image banner**: A standard banner preset with heading, text, and button blocks, perfect for general promotional use. * **Image banner (Promotional)**: A promotional preset featuring a caption, countdown timer, and button, ideal for time-sensitive sales or events. *** ### Tips * Use high-resolution images (at least 1920px wide) for best quality on desktop screens. * If your text is hard to read over the image, increase the overlay opacity or choose a darker overlay color. * The "Adapt" image height option works best when you want the banner to match your image's exact proportions without cropping. * When using videos, keep them short (under 30 seconds) and ensure they loop smoothly for the best user experience. * Keep Heading short; add more context in Text if needed.