Appearance

Media Banner ​

What This Section Does ​

Display large, eye-catching images or videos with text content overlaid on top. This section creates powerful visual impact and is perfect for making strong first impressions or highlighting your most important messages.

Perfect for:

  • Homepage hero sections that grab attention immediately
  • Promotional announcements with striking visuals
  • Brand storytelling with compelling imagery
  • Product launches or seasonal campaigns

How to Add It ​

Step 1: Add the Section

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Click Add section in your main content area
  4. Choose Media Banner from the list

Step 2: Upload Your Media

  1. Click to upload an image or video file
  2. Add your headline and description text
  3. Position the text where it looks best over your image
  4. Add a call-to-action button if needed

Key Settings to Configure ​

Media Selection ​

Image vs. Video: Choose the right media type for your message

  • When to use images: For product showcases, lifestyle shots, or when you want fast loading
  • When to use videos: For demonstrations, brand stories, or when you want to show movement
  • Pro tip: Keep video files under 10MB for fast loading, especially on mobile

Text Positioning ​

Where your text appears: Make sure text is readable over your media

  • Best practice: Position text over darker or simpler areas of your image
  • Contrast matters: Use light text on dark backgrounds or dark text on light backgrounds
  • Mobile consideration: Text positioning may need to be different on mobile screens

Split Screen Layout (Optional) ​

Side-by-side media: Show two images or videos together

  • When to use: Comparing before/after, showing product variations, or telling a story in two parts
  • Content planning: Make sure both images work well together and don't compete for attention

Pro Tips for Success ​

Best Practices

  • Use high-quality images that are at least 1800px wide for crisp display
  • Keep headlines short and punchy - customers scan quickly
  • Ensure your call-to-action button stands out from the background
  • Test how your banner looks on mobile devices
  • Choose images that align with your brand style and colors

Common Mistakes

  • Using busy backgrounds that make text hard to read
  • Making text too small to read easily on mobile
  • Forgetting to add alt text for accessibility
  • Using videos that autoplay with sound (this annoys visitors)
  • Choosing images that don't relate to your message or products