What is a Hero Video?
A hero video is like your brand’s trailer. It lives right on your homepage or landing page and gives visitors a quick, engaging peek at who you are and what you offer—driving customers straight to featured collections and products.
It enhances user engagement without compromising site performance. This works for both Shopify and Non-Shopify users.
Best Ways to Use the Hero Video on Your Site
The Hero video is primarily designed to be featured on your homepage as a bold, branded introduction to your site. That said, it’s also flexible enough to be used as a header on other pages—like collection or product pages—to create a consistent and engaging experience throughout your site.
Content Guide & Best Practices
Hero videos are most effective when used for branded content that captures your brand’s personality and grabs attention right away. Since the hero video is often the first thing visitors see on your site, it’s important to make it visually impactful and aligned with your overall brand messaging.
To ensure a smooth and professional viewing experience across all devices, you need to upload two versions of your hero video:
Desktop: Use a 16:9 ratio for a wide, cinematic look that fits well on larger screens.
Mobile: Use a 3:4 ratio for a more vertical format that looks great on phones.
This helps optimize the layout and ensures your video looks its best whether your customers are browsing on a desktop or scrolling on mobile. Keep your content short, clear, and engaging—something that pulls people in and encourages them to explore more of your site.
Steps on How to Create your Hero Video
1. Click on Onsite -> Create Tolstoy.
2. Create from scratch
3. Select Hero.
4. Choose the location where you would like your Hero video to be displayed.
5. Upload the desktop and mobile versions of the Hero video you want to use.
6. If you want to include a video link, simply enter the URL.
A Guide on How to Design and Customize
Click the Design tab to customize Video Settings, Content , and Branding to your liking.
Video Settings
Hero Size: Choose between Responsive (recommended for full-width display across all screen sizes) or Fixed.
Autoplay Video: Decide whether the video should autoplay on load or stop after playing once.
Loop Video: Toggle this on if you'd like the video to play continuously in a loop.
Video Scaling:
Fill – Scales the video to fully cover the container (may crop edges).
Fit – Scales the video to fit completely inside the container (may leave borders).
Include Mute Button: Enable this to give users control over muting the video.
Include Play Button: Enable this to allow users to manually play the video.
Content
Layout: Customize the layout separately for desktop and mobile to best match your design preferences.
Content Background: Toggle on or off to show or hide a background behind your text content.
Heading: Customize the heading with options for text content, font style, color, and font size for both desktop and mobile views.
Subheading: Same customization options as the heading — ideal for adding supporting text.
Primary Button: Choose to display or hide a main call-to-action button.
Secondary Button: Optionally include a second button for additional actions or links.
Branding
Customize your logo, fonts, and button styles to align with your brand's look and feel.
Step on How to Publish
For Shopify
Click on the Install tab. On your Shopify theme, click on add section then, search for Tolstoy Hero.
Copy the ID and place in the section added to theme.
Complete and set live. Click the "Mark as complete" button.
Publish when ready.
You may click on Pause if you want to temporarily remove it.
For Non-Shopify
Go to the 'Install' tab and click 'Use code instead'.
Copy code and paste on your home page or landing page.
Check out the full walkthrough with images here
Note:
The hero video won't auto-play on iPhones in Low Power Mode with battery saver on.
And you're done! 🥳
If you need any other help, reach out to us at support@gotolstoy.com and we’ll be happy to assist in any way we can.