Are you looking to add an engaging video banner to your Shopify store’s Dawn theme? Video backgrounds can make your website more visually appealing and capture your visitors’ attention. In this tutorial, we will guide you through the process of adding a video banner to your Dawn theme in Shopify without requiring any coding skills. This method can also be applied to other default themes in Shopify. Let’s get started!
Step 1:
Prepare Your Video The first step is to prepare the video that you want to use as your banner. Ensure that the video is of high quality and relevant to your store’s branding or products. You can create your own video or choose from a variety of stock videos available online. Make sure the video is saved in a compatible format, such as MP4 or MOV.
Step 2:
Upload the Video to Shopify Login to your Shopify admin panel and navigate to “Settings” and then “Files.” Click on “Upload files” to add your video to the Shopify file manager. Once the video is uploaded, copy the URL of the video file.
or just search on Files and click on the first result like this :
Step 3 :
Now, let’s proceed to edit the code of your Dawn theme. Follow these steps:
1 . Go to your Shopify admin panel and navigate to “Online Store” and then “Themes.”
2 . Locate your Dawn theme and click on the “Actions” button. From the dropdown menu, select “Edit code.”
3 . In the code editor, locate the “Sections” folder and click on it.
3 . Inside the “Sections” folder, find the option to create a new section. Click on it and name the new section “video-background”.
Once you’ve named the section
Copy this code and post it on the file video-background.liquid you create it before
<div class="hero">
<div>
<h1>{{ section.settings.heading }}</h1>
<a class='button' href='{{ section.settings.link_url }}'>{{ section.settings.link_text }}</a>
</div>
<video class="video-bg" autoplay muted loop playsinline poster={{ section.settings.poster }}>
<source src={{ section.settings.video_url }} type='video/mp4'>
</video>
</div>
{% schema %}
{
"name": "Video Background Banner",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Overlay text"
},
{
"type": "url",
"id": "video_url",
"label": "Enter the video url here"
},
{
"type": "image_picker",
"id": "poster",
"label": "Add fallback background image in case video doesn't load"
},
{
"type": "text",
"id": "link_text",
"label": "Enter CTA button text (if required)"
},
{
"type": "url",
"id": "link_url",
"label": "CTA button link page"
},
{
"type": "range",
"id": "blur",
"min": 0,
"max": 10,
"step": 0.1,
"unit": "px",
"label": "For low quality video add blur",
"default": 0
},
{
"type": "range",
"id": "opacity",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Change video opacity",
"default": 1
}
],
"presets": [
{
"name": "Video Background Banner"
}
]
}
{% endschema %}
<style>
.video-bg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -1;
filter: blur({{section.settings.blur}}px) opacity({{section.settings.opacity}});
}
.hero {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
margin-bottom: 100px;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.hero div {
padding: 1.5em;
background: hsl(0 100% 100% / 25%);
backdrop-filter: blur(10px);
}
</style>
click on the “Save” button to preserve your changes.
The newly created section, “Video Background,” should now be accessible within the theme customizer. Follow these steps to add the video URL and customize the section:
To access the theme customizer, go back to your Shopify admin panel and navigate to “Online Store” and then “Themes.”
Locate your Dawn theme and click on the “Customize” button.
Within the theme customizer, navigate to the homepage or the specific page where you want to add the video background.
Look for the option to add a new section and select the “Video Background” section you created.
Once the “Video Background” section is added, you will see customization options for it.
To add the video URL, find the relevant field and paste the URL of the video file you previously uploaded to the “Files” section in Shopify.
Additionally, you can customize the section further by adding text or applying CSS styles if those options are available.
After making the desired changes, click on the “Save” button to save your customizations.
By following these steps, you will be able to incorporate the video background into your Dawn theme and personalize it according to your preferences. Remember to save your changes to ensure they are applied to your Shopify store.