Hero Section

The Hero section in the Plain Jane theme is a full-width banner used to create a bold first impression on your storefront.

What You’ll Learn

  • How to add and customize the Hero section
  • How to switch between image and video backgrounds
  • How to configure title, overlays, and spacing
  • How to add and style up to 2 call-to-action buttons

🧩 Section Overview

The Hero section in the Plain Jane theme is a full-width banner used to create a bold first impression on your storefront. You can feature an image or autoplaying video with a title and up to two call-to-action buttons.

💡 Tip: For best results, use high-quality imagery or short, muted video loops under 10MB.

⚙️ How to Add and Customize the Hero Section

1. Add the Section

  • From the Shopify Theme Editor, open your Home page
  • Click Add Section and choose Hero
  • Drag it to the top of your layout (optional)

2. Upload Background Media

Under Content & Data:

  • Media Type: Choose Image or Video
  • Image: Upload or select your First Image
  • Second Image (Optional): Used for mobile fallback if enabled
  • Video: Upload .mp4 format only; autoplay is muted

⚠️ Warning: On iPhones in Low Power Mode, video autoplay may be disabled.

🖋️ Text and Layout Settings

Title

  • Hero Title: Add your message (e.g., “NEW ARRIVALS”)

Layout & Display

  • Hero Height: Choose from 50%, 75%, or 100% of viewport height
  • Use Image Instead of Video on Mobile: Toggle ON to override mobile video
  • Show only one image on mobile: Helps control layout and speed
  • Mobile Image Selection: Choose which image to display

Content Position

  • Set the text and buttons to:
    • Top Left
    • Top Center
    • Center
    • Bottom Left
    • Bottom Right

🎨 Typography, Colors & Styling

Typography

  • Font Weight: Choose between Regular and Bold

Colors

  • Title Color: Set custom hex color (e.g., #FFFFFF)

Overlays

  • Top/Bottom Overlays: Optional gradients for readability
  • Set:
    • Overlay Color
    • Overlay Height (%) using slider

💡 Tip: Use a semi-transparent black (#000000 at 40%) to make text stand out.

📦 Spacing

Customize spacing separately for desktop and mobile:

plaintextCopyEditTop Spacing (Desktop): 0px
Bottom Spacing (Desktop): 20px
Top Spacing (Mobile): 0px
Bottom Spacing (Mobile): 16px

🔘 Buttons

You can add up to two buttons. Each button includes:

Content & Data

  • Button Text: Example: SHOP COLLECTION
  • Button Link: Paste any internal or external URL

Colors

  • Background Color: (e.g., #FFFFFF)
  • Text Color: (e.g., #000000)

Styling

  • Round Corners: Adjust border radius in px

⚠️ Button limit: You can only add 2 buttons per Hero section.

🧩 Section Tree Example

Hero
├── Button 
└── Button

Need Help?