How to add a video section to your Shopify home page
Videos and in particular, product videos can have an incredible ability to increase conversions by better helping people understand your product and provide customers with as much information as possible about the products you offer.
And you need to add a video section to embed a video to your Shopify home page. This article shows you how to add a video to the home page, step-by-step.
Step 1: Upload your MP4 video to Shopify
- From your Shopify admin, go to Settings.
- Choose Files:
- Upload a MP4 video that you already have downloaded or created:
- The Video URL to use is located here, you’ll need to copy the entire address (click inside and select the entire address):
Step 2: Create a new section
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Sections directory, click Add a new section with the name index-hura-video
- Copy the below code for this file content.12345678910111213141516171819202122232425<div class="section-hura-video"><video autoplay muted loop playsinline class="hurabg-video"><source src=">https://cdn.shopify.com/s/files/1/0382/4185/files/huraapps-intro.mp4?830" type="video/mp4"></video></div>{% schema %}{"name": "Section name","settings": []}{% endschema %}{% stylesheet %}.section-hura-video{width:100%;}.hurabg-video{right: 0;bottom: 0;width: 100%;height: auto;}{% endstylesheet %}{% javascript %}{% endjavascript %}
Note: Remembering replace your video link from step 1 instead for my demo link. - Click Save
Step 3: Include the new section to home page
- In the Templates directory, click index.liquid.
- In this file you can include the new section anywhere you want to show the video on home page.1{% section 'index-hura-video' %}
- Click Save and you’re done.
Thank you for sharing this code with us, but the video is in the bottom of the homepage
Can you tell me, how to make it a header video ?
There are no options to edit this video section, Is there any code to put some options (like text and size, etc.) in this new section?
Thanks for your help
{% schema %}
{
“name”: “HeaderVideo”,
“settings”: [],
“presets”: [
{
“category”:”video”,
“name”:”Hero Video”
}
]
}
{% endschema %}
You can add “preset” part inside the %schema% . This will allow you to add this section in home by clicking on “add section ” button in homepage then you can choose the your section from video category. You can move the section to any where in the home page.
hello, i am having a similar issue and don’t quite understand how to edit. its on my home page in the top left corner and I am trying to move it to the middle
Thanks for sharing. My video doesn’t seem to be displaying though.
you have typo in link code “>
I’ve made a Video in Videofy and would like to put it on my home page by copying and pasting the code.
Can anyone tell me where to paste it please?
PS: My theme is Debut
Hi Thanks for the great help, but I followed every step unfortunately I can not see the video it blanks
https://cdn.shopify.com/s/files/1/0020/9784/0217/files/FullSizeRender_3.mp4?v=1601693610” type=”video/mp4″>
{% schema %}
{
“name”: “hura”,
“settings”: []
}
{% endschema %}
{% stylesheet %}
.section-hura-video{
width:100%;
}
.hurabg-video{
right: 0;
bottom: 0;
width: 100%;
height: auto;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
This is a great article! I do have an issue as I’m trying to implement it though. The video I’m using is playing, and it’s in the right spot on my page, but it’s muted. How do I set the video to automatically play with the volume turned on?
This works well for me. The video is at the top of the page and that works for me. Is there any way to reduce the height of the video? I tried playing around with the stylesheet settings but they don’t seem to work. Any thoughts?
David, I got exactly the same issue. Can you please help me fix this? My email is [email protected]. Site is coralsafe.com
It is working well for me . But what if I have a promo abd I want to hide the section temporarily. Will I have to delete it alltogether. Or is there a way to hide it temporarily?
does anyone know how to translate this part: {% section ‘index-hura-video’ %}
into liquid so i can put it in a custom liquid section.