Skip to main content
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

Flexible Sizing

Four block sizes (Full, Large, Half, Small) enable creative side-by-side layouts

Two Block Types

Banner blocks for promotions and Product blocks for featured items

Overlapping Media

Advanced media positioning with optional overlapping images or videos

Mobile Optimization

Separate media, aspect ratios, and alignment controls for mobile devices

​
Section Settings

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
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)

​
Block Types

The primary block type for creating promotional content areas with flexible sizing and advanced media options.
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
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.
Color Scheme
  • Choose from available color schemes
  • Default: Scheme 3
Gradient Background Color
  • Custom gradient color override
  • Takes precedence over color scheme background
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
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)
Enable Overlapping Media
  • Advanced feature for layered media composition
  • Displays two media elements with overlap effect
  • Default: Disabled
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.
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 MediaEnable 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)
Mobile-specific media settings only appear when “Enable Mobile Media” is checked. This allows complete control over mobile presentation while keeping desktop settings separate.
Inner Spacing
  • Padding inside the banner block
  • Options: No, S (1), M (2), L (4), XL (6)
  • Default: M (2)

​
Product Block

Showcase a featured product with customizable media positioning and optional badge.
Show On
  • Desktop only, Mobile only, or Both
  • Default: Both
Block Size
  • Same options as Banner block (Full, Large, Half, Small)
  • Default: Full
Color Scheme
  • Choose from available color schemes
  • Default: Scheme 3
Gradient Background Color
  • Custom gradient color override
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
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)
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
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.
Desktop Aspect Ratio
  • Same options as Banner block
  • Default: 4:5 (Portrait)
Mobile Aspect Ratio
  • Separate aspect ratio for mobile
  • Default: 2:3 (Portrait)
Inner Spacing
  • Same options as Banner block
  • Default: M (2)

​
Layout Examples

Full-Width Single Banner

1 Banner Block (size: Full)Perfect for hero-style promotions with full attention on one message.

Side-by-Side Pair

2 Banner Blocks (size: Half each)Showcase two equal promotions or categories side-by-side.

Large + Small

1 Large + 1 Small BannerFeature primary promotion with secondary callout.

Triple Small

3 Small BannersGallery-style layout for multiple categories or features.

​
Best practices

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
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
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
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.

​
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