Openspaces Labs
  • 🏠 Getting Started
    • Installing the Plain Jane Theme
    • Theme Versions + Features Table
  • 🧰 Theme Settings
    • Announcement Bar
    • Animations
    • Cart Drawer
    • Clock Settings
    • Collection Layout Settings
    • Cursor Settings
    • Footer Settings
    • Global Menu Settings
    • Music Player Settings
    • Logo Settings
    • Skip Home Screen
    • SEO Settings
    • Main Theme Color
    • Typography Settings
  • 🗂 Pages & Menus
    • Homepage + Menu
      • Center Menu
      • Side-Aligned Menu
      • Compact Menu Layout (Global Menu)
    • Collection Page
      • Classic Collection
      • Sidebar Collection
    • Collection List Page
    • Product Page
      • Product Section (Showcase)
      • Product Section (Thumbnail)
    • About Page
    • Contact Page
    • Lookbook Page
      • 🛠 How to Create a Lookbook Page
      • 🗂 Creating a Lookbook Archive
      • ⚙️ Lookbook Settings & Features
    • Password Page
      • How To Password Lock Store
      • How To Add and Set Timer
      • How To Collect Emails + SMS
      • Using The Store Unlock Animation
  • 🧩Sections and Features
    • Blog Feed Section
    • Collection Display Section
    • Collection List Section
    • Email Signup (Popup)
    • Email Signup (Embed)
    • FAQ Section
    • Hero Section
    • Image Selector Section
    • Image Stream Section
    • Marquee Section
    • Preloader Section
    • Product Carousel Section
    • Text Block Section
    • Video Spotlight Section
  • 🏷️Advanced
    • How to Add Size Charts to Each Product
    • Setting Up Color Swatches
    • Setting Up Model Info
    • Setting Up Pre-Orders
  • 👥Customer Accounts
    • How To Setup Customer Accounts
    • Login Page
    • Register Page
    • Account Dashboard Page
    • Address Management Page
  • 🌎Languages & SEO
    • Language Files (Locales)
    • Update Favicon
    • Meta Descriptions
  • ⭐️Plain Jane Interactive
    • How to Create an Interactive Space
    • Setting The Background
    • Adding Interactive Points
    • Using Transition Arrows
    • Best Practices for Mobile + Spacing
  • 💬 FAQ & Troubleshooting
Powered by GitBook
On this page
  • What You’ll Learn
  • 🧩 Section Overview
  • ⚙️ How to Add and Customize the Hero Section
  • 🖋️ Text and Layout Settings
  • 🎨 Typography, Colors & Styling
  • 📦 Spacing
  • 🔘 Buttons
  • 🧩 Section Tree Example
  • Need Help?
  1. 🧩Sections and Features

Hero Section

PreviousFAQ SectionNextImage Selector Section

Last updated 4 days ago

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?

  • 📧 Email us at: support@openspaces.design

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

💬 Join our community on Discord:

https://discord.gg/hcc2GvgZc6