Brickspace Lab
Contact usContact ShopifyTry a theme
Space
Space
  • Space documentation
  • Getting started
    • Selecting theme colors
  • Theme typography
  • Guides
    • Using color and option swatches
    • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing "Add to cart" for a product
  • Disable "quick add" for a product
  • Templates
    • Collection template
  • Product template
  • Blog template
  • Article template
  • Sections
    • Sections
      • Announcement
      • Header
      • Cart drawer
      • Menu drawer
      • Search drawer
      • Footer
      • Tooltip
      • Fixed menu
      • Featured product
      • Footer
      • Fixed menu
      • Slideshow
      • Email sign-up
      • Video
      • Alt collection grid
      • Banner
      • Block reveal
      • Blog posts grid
      • Collage
      • Collapsible content
      • Collection list grid
      • Collection list slider
      • Collection slider
      • Comparison table
      • Contact form
      • Countdown
      • Custom liquid
      • Discount
      • Featured collection grid
      • Icon grid
      • Image hotspot
      • Logo list
      • Marquee
      • Navigation slider
      • Product list
      • Recently viewed
      • Rich text
      • Search banner
      • Slider
      • Split banner
      • Static chat
      • Store locater
      • Tabs
      • Testimonial grid
      • Testimonial slider
      • Text highlight
  • General
    • Changelog
      • v2.0.0
      • v1.2.1
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
      • v2.0.0
    • Cloning a demo theme
      • Shimmer
Powered by GitBook
On this page
  • Section overview
  • Section settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Sections

Video

Section overview

The Video section displays a video that can autoplay or play on click with customizable header content. It supports various layout options including split-view layout.

Common use cases

  • Showcasing product demonstrations

  • Displaying brand or promotional videos

  • Highlighting how-to tutorials

  • Creating engaging homepage content

Usage tips

  • Use a background image from the video as a placeholder for better initial loading

  • Keep videos short and focused for better user engagement

  • When using autoplay, consider muting the video by default

  • For important content, add a descriptive heading and call-to-action button

Mobile responsiveness considerations

  • Video automatically adjusts to smaller screens

  • In split layout, the heading and text stack above the video on mobile

  • Consider video file size for mobile data usage

Section settings

Setting
Description

Video

The video to display in the section

Auto play

Enables automatic playback of the video

Heading

Main title text for the section

Content

Descriptive text content shown alongside the video

Button label

Text shown on the call-to-action button

Button URL

Destination URL when the button is clicked

Top spacing

Amount of space added above the section (in pixels)

Bottom spacing

Amount of space added below the section (in pixels)

Color scheme

Controls the background color scheme

Custom color

Custom background color when 'Custom' color scheme is selected

Text color

Controls the text color appearance

Border color

Controls the color of section borders

Button color

Controls the styling and color of the button

Enable color fade

Enables background color transition when scrolling

Border position

Controls where borders appear around the section

X alignment

Controls horizontal alignment of section content

Enable margin

Adds horizontal margin to the section

Enable split

Displays content alongside the video in a split layout

Enable split heading

Separates heading from content in the layout

Visibility

Controls section visibility across device sizes

Last updated 25 days ago

Was this helpful?