# Banner

The Banner section displays a background image or video with text overlay, creating visually appealing hero banners for your store. It supports both desktop and mobile-specific media assets with customizable text alignment and spacing.

<div data-full-width="true"><figure><img src="https://2961089327-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPJlTTtkiYsDIt9ISlkeW%2Fuploads%2F3Igx4Xfm8I08smCWSgYM%2Fpaperthemedemo2.myshopify.com_(Desktop%201%20(Social)).png?alt=media&#x26;token=2092b955-d843-48d1-85d9-69132b2cd470" alt=""><figcaption></figcaption></figure></div>

#### Common use cases

* Hero banner on homepage to showcase key products or promotions
* Announcement banners for sales or special events
* Category introductions at the top of collection pages
* Welcome sections with branding elements

#### Usage tips

* Use high-contrast images to ensure text remains readable
* Keep content concise and focused on a single message or call-to-action
* For mobile, consider using a different image that works well with portrait orientation
* Test your banner across different screen sizes to ensure responsive behavior
* When using video backgrounds, ensure they're not distracting from your main message

### Section settings

<table><thead><tr><th width="239.671875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>URL</td><td>Link for the entire section. When set, the whole banner becomes clickable.</td></tr><tr><td>Desktop background image</td><td>The main image shown on desktop devices.</td></tr><tr><td>Mobile background image</td><td>Optional alternative image optimized for mobile devices.</td></tr><tr><td>Video background</td><td>Optional video to play in the background of the section.</td></tr><tr><td>Show image</td><td>Toggle to show or hide the background image.</td></tr><tr><td>Show entire image</td><td>When enabled, displays the full image (object-contain). When disabled, crops the image to fill the space (object-cover).</td></tr><tr><td>Show video on mobile</td><td>Toggle to show or hide the video background on mobile devices.</td></tr><tr><td>Color scheme</td><td>Select the background color scheme for the section.</td></tr><tr><td>Text color</td><td>Choose default, force light, or force dark text color.</td></tr><tr><td>Border color</td><td>Select a subtle or strong border color.</td></tr><tr><td>Enable gradient</td><td>Add a gradient overlay that darkens the bottom of the image.</td></tr><tr><td>Border position</td><td>Choose where borders appear: none, top, bottom, or top and bottom.</td></tr><tr><td>Height</td><td>Select from extra small to extra large height presets.</td></tr><tr><td>Vertical alignment</td><td>Position content at the top, middle, or bottom of the section.</td></tr><tr><td>Horizontal alignment</td><td>Position content at the left, center, or right of the section.</td></tr><tr><td>Visibility</td><td>Show on all devices, mobile only, or desktop only.</td></tr></tbody></table>

### Block settings

#### Heading

The heading block adds a large title to your banner. Limited to 1 per section.

<table><thead><tr><th width="239.48828125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Content</td><td>Text to display as the heading.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the heading (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the heading (0-300px).</td></tr></tbody></table>

#### Content

The content block adds descriptive text to your banner. Limited to 3 per section.

<table><thead><tr><th width="240.23046875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Content</td><td>Rich text to display in the banner.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the content (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the content (0-300px).</td></tr></tbody></table>

#### Buttons

The buttons block adds up to two call-to-action buttons. Limited to 1 per section.

<table><thead><tr><th width="240.23828125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Primary button color</td><td>Select from primary, secondary, tertiary, neutral, or plain button styles.</td></tr><tr><td>Primary button label</td><td>Text to display on the primary button.</td></tr><tr><td>Primary button URL</td><td>Link for the primary button.</td></tr><tr><td>Secondary button color</td><td>Select from primary, secondary, tertiary, neutral, or plain button styles.</td></tr><tr><td>Secondary button label</td><td>Text to display on the secondary button.</td></tr><tr><td>Secondary button URL</td><td>Link for the secondary button.</td></tr><tr><td>Top spacing</td><td>Amount of space to add above the buttons (0-300px).</td></tr><tr><td>Bottom spacing</td><td>Amount of space to add below the buttons (0-300px).</td></tr></tbody></table>

#### App

This block allows app developers to add content to the banner section.