Hero Video

The Hero video section is an important section that you can show on the home page. This is the first view that customers will have of your store. You can highlight important information or your most recent promotions or launches.

Frame

Set up section

This section provides the option to add a video, heading, description, and a button that links to a page or collection.

  1. Select a Template to edit from the dropdown menu in the top bar.
  2. In the side panel, click (+) Add section and select Hero video.
  3. Change the order of your sections by using the drag and drop handles ⋮⋮
  4. Click the Hero video tab to open its settings.
  5. You have two ways to add your video: Shopify-hosted or embedded from an external source. If you choose to add your video from an external source, only YouTube and Vimeo are accepted. For Shopify-hosted videos, we strongly recommend using a video that's under 10MB in size. Follow the instructions below for each type of upload. 

    YouTube

    After uploading your video to YouTube, copy the link to your video. It will look like https://www.youtube.com/watch?v=kZNzMaQ4PYA or https://youtu.be/kZNzMaQ4PYA. Copy the entire link that Youtube provides and paste it into the Video URL field.

    Vimeo

    After uploading your video to Vimeo, copy the link to your video. It will look like https://vimeo.com/220859711. Copy this link to your clipboard and paste it into the Video URL field.

    Shopify-hosted video

    Upload video to Shopify

    In your Shopify Admin:

    1. Go to Settings > Files to open your Shopify Files
    2. Click Upload files to add your .mp4 file from your computer.
    3. Once the file is uploaded, click the link icon to copy the URL.

    Add video file link

    In your theme editor (Customize):
    1. Click on Hero video tab to open the settings.
    2. Paste the link into Video URL field.
  6. Add a description of the video on Video alt text field, this will help with search engine optimization (SEO) effort and accessibility.
  7. Go to the Fallback image field and click Select image. Use the file selector to select an image from your library or upload a new image file. This image will display when a user’s internet connection is too slow to load video. For best results, we recommend an image height of 1050px and an image ratio that is the same as your video ratio.
  8. Use the Video ratio dropdown to change the video's proportion. Frame offers two options: 16:9 and 5:4.
  9. To make the video full width, check the Full screen width option.
  10. To make the video fill the full height of the screen, check Full screen height. Please note: this option will override the video ratio selected above.
  11. Use the Text alignment  dropdown to align the text inside the section. This setting affects the title, description, and button. Frame provides three options: left, center, and right.
  12. Use the Vertical content position  slider to position the text vertically. This setting only applies on desktop.
  13. Use the Horizontal content position  slider to position the text horizontally. This setting only applies to desktop.
  14. Use the Video focus area dropdown to select which part of the video is most important to show on small screens. We will crop the video to fit each device screen size.
  15. If your text has low contrast against your video, we recommend using the Use text protection layer  option. When enabled, this setting will add a semi-transparent black or white layer over your video.
  16. Use the Text protection layer  slider to change the color and lightness of the protection layer. Keep the slider at 0 to darken the video or slide to lighten the video.
  17. Click Save.

Honey

Set up section

This section provides the option to add a video, heading, description, and a button that links to a page or collection.

  1. Select a Template to edit from the dropdown menu in the top bar.
  2. In the side panel, click (+) Add section and select Hero video.
  3. Change the order of your sections by using the drag and drop handles ⋮⋮
  4. Click the Hero video tab to open its settings.

  5. You have two ways to add your video: Shopify-hosted or embedded from an external source. If you choose to add your video from an external source, only YouTube and Vimeo are accepted. For Shopify-hosted videos, we strongly recommend using a video that's under 10MB in size. Follow the instructions below for each type of upload. 


    YouTube

    After uploading your video to YouTube, copy the link to your video. It will look like https://www.youtube.com/watch?v=kZNzMaQ4PYA or https://youtu.be/kZNzMaQ4PYA. Copy the entire link that Youtube provides and paste it into the Video URL field.

    Vimeo

    After uploading your video to Vimeo, copy the link to your video. It will look like https://vimeo.com/220859711. Copy this link to your clipboard and paste it into the Video URL field.

    Shopify-hosted video

    Click Select video and use the file selector to select a video from your library or upload a new video file.

  6. Use the Minimum video height on mobile slider to set the video height on smaller devices. This setting is very useful if your video uses a 16:9 ratio, or other similarly horizontal ratio that is not compatiable with vertically-oriented mobile devices. Please note: The video will keep its original ratio on desktop.
  7. Use the Video focus area dropdown to select which part of the video is most important to show on small screens. We will crop the video to fit each device screen size.
  8. To allow your video to autoplay, enable the Autoplay video setting. This will disable the sound, if any. To preserve your video's sound and provide users with play/pause controls, disable this option.
  9. Go to the Fallback image field and click Select image. Use the file selector to select an image from your library or upload a new image file. This image will display when a user’s internet connection is too slow to load video. For best results, we recommend an image height of 1050px and an image ratio that is the same as your video ratio.
  10. Use the Text alignment  dropdown to align the text inside the section. This setting affects the tile, description, and button. Honey provides three options: left, center, and right.
  11. Use the Content width slider to change the maximum width of the container that holds your text and button. The container width will be automatically adapted to small screens.
  12. Use the Vertical content position  slider to position your text vertically. This setting only applies to desktop.
  13. Use the  Horizontal content position  slider to position your text horizontally. This setting only applies to desktop.
  14. If your text has low contrast against your video, we recommend using the Use text protection layer  option. When enabled, this setting will add a semi-transparent black or white layer over your video.
  15. Use the Text protection layer  slider to change the color and lightness of the protection layer. Keep the slider at 0 to darken the video or slide to lighten the video.
  16. If desired, enable the Allow transparent header option to make the header transparent. This setting only applies when this section is the first one on the page.
  17. Click Save.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us