Fluorescent
Lorenza
Lorenza
  • Lorenza Help Center
    • Start using Lorenza
      • Migrate your theme
      • Theme licenses
    • FAQs
    • Theme updates
      • Upgrade to OS2
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • H1 heading tags
      • SEO for Shopify themes
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
  • Theme styles
    • Theme settings
    • Style presets
    • Fonts
    • Colors
    • Animation
    • Buttons
  • Pages
    • Templates
      • Home page
      • About page
      • Blogs page
      • Blog posts template
      • Collections list page
      • Contact page
      • Password page
      • Search page
      • 404 page
    • Header
      • Logo
      • Layout and style
      • Mega navigation
      • Transparent header
      • Quick search
      • Customer account link
    • Footer
      • Links block
      • Newsletter block
      • Text and image block
      • Language selector
      • Country selector
      • Payment icons
      • Social media icons
    • Utility bar
      • Announcements
  • Sections
    • Theme sections
      • Blog posts
      • Collapsible row list
      • Collection list
      • Collection list grid
      • Featured collection
      • Featured collection grid
      • Featured collection row
      • Featured product
      • Gallery
      • Image hero
      • Image with text
      • Image with text split
      • Map
      • Mosaic grid (2 columns)
      • Mosaic grid (3 columns)
      • Newsletter
      • Quotes
      • Rich text
      • Shoppable feature
      • Shoppable image
      • Slideshow
      • Slideshow split
      • Testimonials
      • Text columns with images
      • Video
      • Video hero
    • Popups
  • Products
    • Product listings
    • Product badges
    • Quick shop
  • Product pages
    • Product template
      • Pre-order template
    • Layout and style
      • Breadcrumbs
      • Navigation buttons
      • Media gallery
      • Gift recipient form
    • Product page blocks
      • Default blocks
        • Title
        • Price
        • Description
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
      • Accordion block
      • Complementary products
      • Information popup
      • Payment block
      • Security block
      • Shipping block
      • Stock level indicator
      • Text block
      • Text with image
      • Text with video
      • App blocks
    • Product page sections
      • Product reviews
      • Recently viewed products
      • Recommended products
    • Variant options
      • Variant chips
      • Variant swatches
        • Enable swatches
        • Use default colors
        • Use custom images
        • Dynamic option availability
        • Show on collections
  • Collection pages
    • Collection template
    • Banner
      • Breadcrumbs
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Fly-out cart
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up section
  • Add video file
  • Add section headings
  • Add button
  • Section layout and style
  • Settings reference

Was this helpful?

  1. Sections
  2. Theme sections

Video hero

Theme section

Last updated 1 year ago

Was this helpful?

This feature was added in v5.0.0 on April 12, 2022. See our and to learn more.

Add the Video hero section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.

If you want to add a Vimeo or YouTube video (with sound), you can use the .

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can or .

STEPS

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

    Learn how to use templates in our .

  2. Under Template, click (+) Add section and select Video hero.

  3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add video file

The Video hero section requires an .mp4 that's been uploaded to Content > Files in your Shopify admin. For the best experience, we strongly recommend using a 5 to 10 second video under 10MB.

Note | The autoplay video does not play audio. To embed a video from YouTube or Vimeo with audio, see the .

File Format
.mp4 video (required)

File size

Maximum 10MB (recommended)

Duration

5 - 10 seconds (recommended)

STEPS

In your Shopify admin:

  1. Go to Content > Files to open your .

  2. Click the Upload files button to add your .mp4 file from your computer.

  3. Once your file has been processed, click the Link icon next to the file to copy the URL.

    You may need to refresh the page for your file to appear.

In the theme editor (Customize):

  1. Click the Video hero section to open the settings.

  2. Paste the link into the Video link field. Click on the the link that appears in the results above.

  3. Click Save.

Add section headings

Add a section title and promotional text to overlay your Video hero. The section headings are included as blocks nested within the section.

STEPS

In your theme editor (Customize):

  1. Click the Heading block to change section title.

    We recommended a short title of just a few words.

  2. Click the Subheading block to add a few sentences below the heading.

    We recommend two or three short sentences.

  3. (Optional) Click (+) Add block and select Small heading to display above the title.

    We recommend one to three words.

  4. Use the Text max width slider to control the maximum width of the headings.

    Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

  5. Use the Show/hide button (eye icon) to remove a heading block.

  6. Click on the Video hero section to change the Text container color and Text color.

  7. (Optional.) Select an Overlay color to display overtop of the image and adjust the Overlay opacity using the slider.

    The Overlay lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.

    Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color block with no image.

  8. (Optional.) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

  9. Click Save.

Add button

You can link to you collections or products or any other page with a custom call-to-action button.

STEPS

In your theme editor (Customize):

  1. Click (+) Add block and select Button, then click on the block to open the button block settings.

  2. Add a Button label and Button link to display a button underneath the subheading.

    You change the style of buttons across your site in the Theme settings. See the buttons guide for more.

  3. Click Save.

Section layout and style

The Video hero section settings apply to the entire section. You can adjust the overall height of the video for both desktop and mobile, change the section colors, and choose where to position the headings and button.

STEPS

In your theme editor (Customize):

  1. Click on the Video hero section.

    This opens the Video hero section settings.

  2. Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

  3. Under Video height, choose to display the image with a Custom or the Original height (without cropping).

  4. If Custom height is selected: adjust the Height and Mobile Height of your video between 50% to 100% of the maximum height.

    The Height is the percentage of the screen or window height.

    When Custom height is set to 50%, the video will always display at half the height of the customer's screen or window height.

  5. Select an Image fallback to display in case the video does not load.

    We recommend using a still image from the video.

  6. Select the Media focal point to choose which section of the video to keep centered within the slide.

    This setting ensures the key part of your video appears when cropping occurs.

  7. Use the Text alignment dropdown to change the position of your headings and button on top of your video.

  8. Change the Overlay color and adjust the Overlay opacity using the slider to increase the contrast between the heading text and video.

    Set the opacity to 0% to turn off the overlay color.

  9. Click Save.

Settings reference

Click on the section to find the following settings:

Setting
Description

Height

Use the slider to set the height of the video as a percentage of the maximum height.

Mobile height

Use the slider to set the height of the video on mobile as a percentage of the maximum height.

Video link

Add the direct link to your .mp4 file uploaded to your Shopify Files. Click the Link icon next to your video file to copy the URL.

Image fallback

Select or upload an image to display in case the video does not load. We recommend using a still image from the video.

Text alignment

Choose which section of the video you want to display your headings and button.

Text shadow amount

Change the shadow to all heading text to add more of a contrast with the video.

Text color

Choose the text color for the video headings.

Button background color

Choose the button background color of the button.

Button text color

Choose the button text color.

Overlay color

Choose the color that overlays the entire video.

Overlay opacity

Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color.

Click on the Heading block to find the following settings:

Setting
Description

Heading

Enter heading text to display as the section title.

Heading size

Use the slider to adjust the font size of the main heading between 48px to 72px. Make sure the heading is large enough so it's distinctive and easy to read.

Subheading

Max width of text

Use the slider to control the maximum width and line breaks of the headings.


Related links

We recommend using WebAIM's when matching colors to make sure your text is clear and readable for everyone.

You can choose the style, angle, position, and opacity of the gradient. See Shopify's to learn more.

The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more,

Enter subheading text to display below the heading. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's .

contrast checker
color gradient guide ↗
read "What is a Call to Action?"
Video section
Rich text editor manual ↗
changelog
theme update guide
Video section
use metafields and dynamic sources
Templates guide
Video section
Shopify files ↗
create new templates