Add to your Store
Home Why us? Documentation Privacy Policy Refund Policy Get in Touch

Shopify Video Hero Section

Learn how to create a Video Hero section with Sections Pro in Shopify

Description of the Section

The Video Hero section provides a dynamic and visually appealing way to showcase your products, promotions, or any other content. Combining video backgrounds with customizable text and call-to-action elements, this section captures visitor attention instantly. You can set up background videos with various control options, and overlay text and buttons with customizable fonts, colors, and alignments.

Demo of the Section

Installation Instructions

  1. Download the Sections Pro app on the Shopify App Store
  2. Open the app and navigate to Free Sections
  3. Search for "Video Hero"
  4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

  1. New Product Launch: Feature a video of your newest product being used or demonstrated, with a bold call-to-action button urging visitors to shop now.
  2. Seasonal Promotions: Use holiday-themed or seasonal videos to announce special sales or limited-time offers, enhancing the festive atmosphere of your store.
  3. Brand Storytelling: Tell your brand's story through a compelling video, overlayed with key messages and a link to learn more or shop your collection.
  4. Customer Testimonials: Display videos of customer testimonials or reviews, building social proof and encouraging potential buyers to trust your products.

Overview of the Configuration Settings

  1. Text Settings

    • Text Font: Choose the font for your text.
    • Text Size: Adjust the size of your text (10px to 50px).
    • Headline Font: Choose the font for your headline.
    • Headline Size: Adjust the size of your headline (10px to 50px).

  2. Colors

    • Background: Set the background color or gradient for the section.
    • Cover Background: Set the background color or gradient for the video overlay.
    • Cover Opacity: Adjust the opacity of the video overlay (0% to 100%).
    • Button Background Color: Set the color or gradient for the call-to-action button.
    • Button Text Color: Choose the text color for the call-to-action button.
    • Text Color: Set the general text color.

  3. Alignment

    • Box Alignment: Align the content box (left, center, right).
    • Text Alignment: Align the text within the content box (left, center, right).

  4. Dimensions

    • Max Width of Section: Set the maximum width of the section.
    • Padding: Adjust the padding for the top, bottom, left, and right of the section.
    • Space between Elements: Set the spacing between the text elements.

  5. Content

    • Headline: Set the headline text.
    • Content: Add the content text.
    • Call to Action: Set the call-to-action text and link.
    • Animate Call to Action: Toggle animation for the call-to-action button.

  6. Video

    • Hero Video: Upload your hero video.
    • Play Inline: Toggle inline video playback.
    • Autoplay: Enable or disable autoplay.
    • Loop Video: Toggle looping.
    • Show Video Controls: Show or hide video controls.
    • Mute Video: Mute or unmute the video.