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 the Section
  • Content & Data Settings
  • Layout & Display Options
  • Typography
  • Colors
  • Styling
  • Spacing
  • Need Help?
  1. 🧩Sections and Features

Video Spotlight Section

PreviousText Block SectionNext🏷️Advanced

Last updated 4 days ago

What You’ll Learn

  • How to showcase a featured video with a title and call-to-action

  • How to customize video behavior (autoplay, controls)

  • How to adjust layout, spacing, and aspect ratio

  • How to style the section’s colors and typography

🧩 Section Overview

The Video Spotlight section is designed to highlight a single video with supporting text and an optional CTA link. Ideal for campaigns, interviews, or product feature videos, this section is fully responsive and supports autoplay or manual controls.

How to Add the Section

  1. In the Shopify Theme Editor, click Add section

  2. Choose Video Spotlight

  3. Drag it into position on your page layout

Content & Data Settings

  • Video: Upload or select your video file

  • Cover Image: Optional fallback thumbnail image (used before video loads)

  • Header Text: Title shown above the video (e.g., “Watch the Story”)

  • View Link Text: Button text (e.g., “Watch Now”)

  • View Link URL: Paste a product, page, or external video link

💡 Tip: Use a short video (under 10MB) in .mp4 format for best performance across devices.

Layout & Display Options

  • Autoplay Video (Muted): Toggle ON to play automatically on load (without sound)

  • Show Video Controls: Enable to show play, pause, volume, and fullscreen icons

  • Width Style: Choose between:

    • Full width with Gaps

    • Full width (edge to edge)

    • Content width (aligned to inner content)

  • Aspect Ratio: Pick from common formats like 16:9 or 4:3

⚠️ Autoplay may not work on iPhones if Low Power Mode is enabled.

Typography

  • Section Header Size:

    • Desktop: Adjustable in pixels

    • Mobile: Adjustable in pixels

  • Toggle Bold Section Title and Bold View Link if desired

Colors

  • Header Color: Choose any hex value (e.g., #000000)

  • Background Color: Transparent by default; customize as needed

Styling

  • Round Corners: Adjust the border radius of the video container

Spacing

Customize spacing independently for desktop and mobile:

  • Top and Bottom Spacing (Desktop)

  • Top and Bottom Spacing (Mobile)

Each spacing option can be adjusted to fine-tune the layout flow.

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