Video

Video Section

This section allows you to add a headline, description, and a fully customizable video block to your Shopify store. Ideal for promotional content, brand storytelling, or product demos.

---

Headline Settings

• Headline Text: Example: Video Heading Set the main headline of your video section.

• Subheading Text: Example: Add subheading text or information about the video. Display optional context or descriptive text beneath the headline.

• Text Alignment (Desktop & Mobile): Align text left, center, or right independently for desktop and mobile.

• Headline Font Size:

  • Desktop: 37px

  • Mobile: 37px Customize headline size for both screen sizes.

• Line Height: Set the line spacing for the headline (optional, default is "inherit").

• Headline Text Color: Example: #000000 (black)

---

Subheading Settings

• Font Size:

  • Desktop: 16px

  • Mobile: 16px

• Line Height: Optional, default is inherit.

• Text Color: Example: #2C2C2C

---

Font Customization

• Enable Custom Fonts: Toggle to use your own typefaces.

• Headline Font: Example: Sans-serif

• Subheading Font: Example: Sans-serif

---

Section Design

• Display on Devices: Choose All Devices, Desktop Only, or Mobile Only.

• Background Color: Set a solid color (e.g., #FFFFFF) behind the section.

• Background Image (Optional): Upload or choose a background image.

• Image Overlay Color: Add a color overlay over the background image.

• Background Size: Default: Cover

---

Spacing Settings

• Padding Top/Bottom:

  • Desktop: 42px

  • Mobile: 44px

• Padding Left/Right:

  • Desktop: 180px

  • Mobile: 19px

• Element Spacing:

  • Gap between text and elements: 12px

  • Vertical space between subheading and video:

    • Desktop: -50px

    • Mobile: 15px

---

Video Settings

• Hero Video Upload: Upload a video or paste an external MP4 link.

• Playback Options:

  • Play Inline

  • Autoplay

  • Loop

  • Mute

  • Enable Play/Pause Button

• Video Shadow: Optional shadow effect. Default: None

• Aspect Ratio: Choose between None or standard 16:9.

• Margins: Adjust video placement:

  • Top Margin: 0px

  • Bottom Margin: 0px

• Lazy Loading: Improves page performance by loading the video only when visible.

---

Video Sizing

• Desktop Video Dimensions:

  • Width: 1400px

  • Height: 500px

• Mobile Video Dimensions:

  • Width: 800px

  • Height: 190px

• Border Radius: Example: 13px for rounded video corners.

---

Accessibility & Metadata

• Video Alt Text: Add descriptive alt text for accessibility.

• Metadata: Include any structured data or additional info about the video.