Appearance

Banner with Phone ​

Purpose

Showcase mobile apps, mobile-first experiences, or product imagery in a realistic phone frame. Perfect for app launches, mobile shopping experiences, or highlighting mobile-specific features.

Adding the Section ​

  1. Go to Online Store > Themes > Customize
  2. Click Add section
  3. Select Banner with Phone
  4. Add content blocks (headings, text, buttons)

Background Settings ​

Background Type ​

  • Image - Use a custom background image
  • Color - Solid color background with options:
    • Accent - Theme accent color
    • Card - Theme card background color
    • Custom - Choose any custom color

Background Image ​

  • Background Image - Upload hero background image (appears when image type is selected)
  • Responsive sizing - Automatically serves optimized images for different screen sizes

Phone Media Settings ​

Media Type ​

  • Phone Media Type - Choose content for phone screen:
    • Image - Static product or interface image
    • Video - Uploaded MP4 video file

Image Settings ​

  • Phone Image - Upload image to display in phone screen
  • Automatic scaling - Image scales to fit phone screen dimensions

Video Settings ​

  • Phone Video File - Upload MP4 video for phone screen
  • Autoplay Phone Video - Control automatic video playback (default: enabled)
  • Phone Poster Image - Thumbnail for non-autoplay videos

Phone Display ​

  • Crop Phone Bottom - Extend phone partially below section for dramatic effect (default: enabled)

Layout Options ​

Phone Position ​

  • Left - Phone appears on left side, content on right
  • Right - Phone appears on right side, content on left (default)

Content Position ​

Choose from 9 positioning options for overlay content:

  • Top: Left, center, right
  • Middle: Left, center, right
  • Bottom: Left, center, right

Section Width ​

  • Regular - Standard container width
  • Full - Edge-to-edge display

Section Spacing ​

  • Padding Top - Top spacing (0-6)
  • Padding Bottom - Bottom spacing (0-6)

Content Blocks ​

The section uses a Content Block system supporting:

  • Heading blocks with size controls
  • Text blocks with rich formatting
  • Button blocks with styling options
  • Custom content elements