> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Promotional Banner

> Flexible promotional section with customizable banner and product blocks that can be arranged side-by-side or full-width

The **Promotional Banner** section creates highly customizable promotional areas with flexible layout options. Add multiple banner blocks that can be sized to create unique side-by-side arrangements, or showcase featured products with rich media and content.

## What this section controls

This section controls promotional displays with the following capabilities:

* Multiple banner and product blocks with flexible sizing (Full, Large, Half, Small)
* Side-by-side block arrangements for creative layouts
* Overlapping media positioning for images and videos
* Separate desktop and mobile media with aspect ratio controls
* Section-level heading and button
* Mobile block order reversal
* Color scheme, width, and spacing controls

## Key Features

<CardGroup cols={2}>
  <Card title="Flexible Sizing" icon="expand">
    Four block sizes (Full, Large, Half, Small) enable creative side-by-side layouts
  </Card>

  <Card title="Two Block Types" icon="cube">
    Banner blocks for promotions and Product blocks for featured items
  </Card>

  <Card title="Overlapping Media" icon="layer-group">
    Advanced media positioning with optional overlapping images or videos
  </Card>

  <Card title="Mobile Optimization" icon="mobile">
    Separate media, aspect ratios, and alignment controls for mobile devices
  </Card>
</CardGroup>

## Section Settings

<AccordionGroup>
  <Accordion title="Section Header & Button">
    **Mobile Block Order**

    * Reverse block order on mobile devices

    **Heading**

    * Section-level heading text
    * Size options: H6 (XS) through H2 (XL)
    * Default: H2

    **Section Button**

    * Button label, link, and style
    * Styles: Filled, Outlined, Text
    * Default: Outlined
  </Accordion>

  <Accordion title="Section Layout">
    **Color Scheme**

    * Choose from available color schemes
    * Default: Scheme 1

    **Section Width**

    * **Page**: Standard page width with padding
    * **Fluid**: Edge-to-edge with contained content
    * **Full**: Complete full-width layout
    * Default: Page

    **Spacing**

    * Top/Bottom spacing: None, S (1), M (2), L (4), XL (6)
    * Default: M (2)
  </Accordion>
</AccordionGroup>

## Block Types

### Banner Block

The primary block type for creating promotional content areas with flexible sizing and advanced media options.

<AccordionGroup>
  <Accordion title="Block Size & Visibility">
    **Show On**

    * Desktop only, Mobile only, or Both
    * Default: Both

    **Block Size** ⭐ Key Feature

    * **Full**: 100% width - single full-width banner
    * **Large**: \~66% width - can pair with Small blocks
    * **Half**: 50% width - perfect for side-by-side pairs
    * **Small**: \~33% width - can group multiple Small blocks
    * Default: Full

    <Tip>
      Mix different block sizes to create unique layouts: combine a Large banner with a Small one, or place three Small blocks side-by-side for a gallery effect.
    </Tip>
  </Accordion>

  <Accordion title="Block Styling">
    **Color Scheme**

    * Choose from available color schemes
    * Default: Scheme 3

    **Gradient Background Color**

    * Custom gradient color override
    * Takes precedence over color scheme background
  </Accordion>

  <Accordion title="Content Positioning">
    **Vertical Position**

    * Start, Center, End
    * Default: Center

    **Content Alignment**

    * Left, Center, Right (controls both text and items)
    * Default: Center

    **Mobile Alignment**

    * Separate alignment control for mobile
    * Default: Center
  </Accordion>

  <Accordion title="Text Content">
    **Subheading**

    * Optional subtitle above the main heading

    **Heading**

    * Main banner title
    * Default: "Promotional Collection Banner"

    **Heading Size**

    * H6 (XS) through H2 (XL)
    * Default: H3 (L)

    **Heading Bottom Spacing**

    * Space between heading and text: No, S (0.25), M (0.5), L (0.75), XL (1)
    * Default: S (0.25)

    **Text**

    * Rich text description content

    **Button**

    * Button label, link, and style
    * Styles: Filled, Outlined, Text
    * Default: Filled (different from section button)
  </Accordion>

  <Accordion title="Media Settings">
    **Enable Overlapping Media**

    * Advanced feature for layered media composition
    * Displays two media elements with overlap effect
    * Default: Disabled

    <Note>
      When overlapping media is disabled, you get standard single media with left/right/background position. When enabled, you can position two separate media elements that overlap for unique visual effects.
    </Note>

    ***

    **Standard Media (when overlapping disabled)**

    **Media Position**

    * **Left**: Media on left, content on right
    * **Right**: Media on right, content on left
    * **Background**: Media behind content
    * Default: Right

    **Enable Media Overlay**

    * Add overlay layer when media is background
    * Only available for background position

    **Media Assets**

    * Image picker for static images
    * Video upload for Shopify-hosted videos
    * External video (YouTube/Vimeo) URL
    * Show/hide video controls option

    **Desktop Aspect Ratio**

    * **Auto**: Natural image dimensions
    * **Square**: 1:1
    * **Landscape**: 4:3, 3:2, 5:4, 16:9, 2:1, 4:1, 8:1
    * **Portrait**: 3:4, 2:3, 4:5, 9:16, 1:2
    * Default: 4:5 (Portrait)

    ***

    **Overlapping Media (when enabled)**

    **Media Position (Overlapping)**

    * Top, Bottom, Left, Right
    * Controls where overlapping media appears
    * Default: Right
    * Note: Mobile displays overlapping media at bottom

    **Main Media**

    * Image, video, or external video for primary media
    * Show controls option for videos
    * Aspect ratio (same options as standard media)

    **Overlapping Media**

    * Separate image, video, or external video
    * Show controls option for videos
    * Aspect ratio: Default 4:3 (Landscape)

    **Overlap Offset**

    * How much the media overlaps: 0-10
    * Higher values = more overlap
    * Default: 6

    ***

    **Mobile-Specific Media**

    **Enable Mobile Media**

    * Use different media for mobile devices
    * Default: Disabled (uses desktop media)

    **Mobile Media Assets** (when enabled)

    * Separate image, video, or external video
    * Show controls option for videos

    **Mobile Aspect Ratio**

    * Same options as desktop aspect ratio
    * Default: 1:1 (Square)

    **Mobile Overlapping Media** (when both enabled)

    * Separate overlapping media for mobile
    * Separate offset control (0-10, default 6)
    * Separate aspect ratio (default: Auto)

    <Warning>
      Mobile-specific media settings only appear when "Enable Mobile Media" is checked. This allows complete control over mobile presentation while keeping desktop settings separate.
    </Warning>
  </Accordion>

  <Accordion title="Spacing">
    **Inner Spacing**

    * Padding inside the banner block
    * Options: No, S (1), M (2), L (4), XL (6)
    * Default: M (2)
  </Accordion>
</AccordionGroup>

### Product Block

Showcase a featured product with customizable media positioning and optional badge.

<AccordionGroup>
  <Accordion title="Block Size & Visibility">
    **Show On**

    * Desktop only, Mobile only, or Both
    * Default: Both

    **Block Size**

    * Same options as Banner block (Full, Large, Half, Small)
    * Default: Full
  </Accordion>

  <Accordion title="Block Styling">
    **Color Scheme**

    * Choose from available color schemes
    * Default: Scheme 3

    **Gradient Background Color**

    * Custom gradient color override
  </Accordion>

  <Accordion title="Product Settings">
    **Product**

    * Select featured product from catalog

    **Show Price**

    * Display product price
    * Default: Enabled

    **Badge**

    * Custom badge text (e.g., "NEW", "SALE", "Limited Edition")
    * Only appears when product is selected

    **Badge Color Scheme**

    * Choose color scheme for badge
    * Default: Scheme 1
    * Only available when badge text is added
  </Accordion>

  <Accordion title="Content Positioning & Text">
    Same content positioning options as Banner block:

    * Vertical position (Start/Center/End)
    * Content alignment (Left/Center/Right)
    * Mobile alignment (separate control)

    Same text content options as Banner block:

    * Subheading, Heading, Heading size
    * Heading bottom spacing
    * Rich text description
    * Button (default link: product URL)
  </Accordion>

  <Accordion title="Product Media">
    **Media Position**

    * **Left**: Product image left, content right
    * **Right**: Product image right, content left
    * **Top**: Product image above content
    * **Bottom**: Product image below content
    * Default: Bottom

    <Note>
      Product blocks use the selected product's images and don't require separate media uploads. Position controls where the product image appears relative to the content.
    </Note>

    **Desktop Aspect Ratio**

    * Same options as Banner block
    * Default: 4:5 (Portrait)

    **Mobile Aspect Ratio**

    * Separate aspect ratio for mobile
    * Default: 2:3 (Portrait)
  </Accordion>

  <Accordion title="Spacing">
    **Inner Spacing**

    * Same options as Banner block
    * Default: M (2)
  </Accordion>
</AccordionGroup>

## Layout Examples

<CardGroup cols={2}>
  <Card title="Full-Width Single Banner">
    **1 Banner Block** (size: Full)

    Perfect for hero-style promotions with full attention on one message.
  </Card>

  <Card title="Side-by-Side Pair">
    **2 Banner Blocks** (size: Half each)

    Showcase two equal promotions or categories side-by-side.
  </Card>

  <Card title="Large + Small">
    **1 Large + 1 Small Banner**

    Feature primary promotion with secondary callout.
  </Card>

  <Card title="Triple Small">
    **3 Small Banners**

    Gallery-style layout for multiple categories or features.
  </Card>
</CardGroup>

## Best practices

<Tip>
  **Aspect Ratio Guidelines**

  * **Full-width banners**: Use wide ratios like 16:9, 4:1, or 8:1
  * **Side-by-side banners**: Use portrait ratios like 4:5, 2:3, or 9:16
  * **Mobile**: Square (1:1) or portrait ratios work best for vertical scrolling
</Tip>

<Tip>
  **Overlapping Media Tips**

  * Use overlapping media to create depth and visual interest
  * Offset of 6-8 works well for standard layouts
  * Keep overlapping content in mind when positioning text
  * Test on mobile as overlapping media always appears at bottom
</Tip>

<Warning>
  **Performance Considerations**

  * Use mobile-specific media to serve appropriately-sized images on mobile devices
  * Optimize images before uploading, especially for background media
  * External videos (YouTube/Vimeo) load faster than uploaded videos
  * Limit the number of videos playing simultaneously
</Warning>

<Note>
  **Color Scheme Defaults**

  * Section: Scheme 1
  * Banner/Product blocks: Scheme 3
  * Product badges: Scheme 1

  This creates visual hierarchy between section header and block content.
</Note>

## Common Use Cases

1. **Homepage Hero Split**: Two Half blocks showcasing seasonal collections
2. **Product Launch**: One Large banner (main product) + Small banner (features)
3. **Category Navigation**: Three Small blocks linking to different departments
4. **Featured Product**: Single Product block with overlapping lifestyle image
5. **Sale Promotion**: Full-width banner with background video and countdown timer text

## Preset Configuration

Default preset includes:

* One Banner block
* Size: Full width
* Desktop aspect ratio: 16:9 (wide landscape)
* Mobile aspect ratio: 3:4 (portrait)
* Category: Promotional