How to Add Videos to Your Shopify Homepage (Without YouTube)
Videos are a real game changer in today's online world, especially for Shopify stores. Here's how you can add videos to your homepage without YouTube and Vimeo.
Updated March 14, 2023.
Videos are a real game changer in an online world where 96% of consumers find videos helpful when making purchase decisions online. It's important to grab attention and increase dwell times by embedding videos on your website.
YouTube and Vimeo aren't always the best choice for hosting videos because of ads, lack of branding, and lackluster analytics. Below, we'll show you two ways to use Shopify or other hosting platforms to embed videos on your Shopify homepage.
1. Change Your Shopify Settings and Code
Embedding a video on Shopify itself involves using some coding, but we'll show you just what you have to do so you won't be needing any previous technical knowledge. If you're hosting your video somewhere other than Shopify, skip to Step 5. Otherwise, follow these simple steps:
- Log in to your Shopify admin dashboard.
- Head to Settings and select the Files tab. If you can't find the Settings option, click on Sales channels and then find the App and sales channel settings option on the popup.
- Click the Upload files button, select the video to upload, and click Open. You're limited to video files of 1GB and 10 minutes maximum.
- Now that the video is uploaded, you should copy the video's URL in the box in the URL column on the Files page. Save it somewhere for later.
- Find your Online Store under Sales Channels and click on Themes.
- Find the theme you're using. Click on its Actions button and then the Edit code button.
- Under the Sections dropdown, click Add a new section and name it homepage-video.
- Once created, a text box with some default code appears. Remove all the code and paste the following in there (remember to replace the https://video.link.goes.here between the quotation marks on the third line with the copied video link you found in Files):
<div class="section-homepage-video">
<video autoplay muted loop playsinline class="video-homepage">
<source src="https://video.link.goes.here" type="video/mp4">
</video>
</div>
{% schema %}
{
"name": "Homepage Video",
"class": "index-section index-section--flush",
"settings": [],
"presets": [{
"name": "Homepage Videos",
"category": "Text"
}]
}
{% endschema %}
{% stylesheet %}
.section-homepage-video{
width:100%;
}
.video-homepage{
width: 100%;
height: auto;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
9. Click Save. 10. Head back to themes (under Online Store under Sales Channels) and click on Customize. 11. Click Add section where you want to add the video, then select Homepage Video from the list (you may need to click on Show more first). 12. Save your changes at the top right.
» Breaking into interactive marketing? Check out the best interactive marketing tools
2. Use Alternative Software
If you're not up to doing all that yourself, you can always opt to use alternative software. While these plugins make it easier to embed videos, they usually cost money and have their own learning curve. Shogun's page builder has a handy guide for adding videos, and Shop Circle's Video Background plugin is purpose-built for embedding videos.
Hosting the videos can take up a lot of bandwidth if your video files are too big for Shopify, you can host them elsewhere. We don't have space to list all the options here, but some good ones for video hosting are Wistia and vooPlayer, both of which have great marketing features beyond hosting itself.
The Right Option For You
These are just two ways you can still embed videos on Shopify if you're not keen to use YouTube or Vimeo. While the first is a little technical, it's free and foolproof once done, while using alternative software is easier and more feature-rich for those who want deeper insights and better hosting.
Related Articles
