Hero Section

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?

• 💬 Join our community on Discord: https://discord.gg/hcc2GvgZc6

• 📧 Email us at: [email protected]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website