Website Building » Shopify » How Do You Add a Video as a Background on Shopify?

How Do You Add a Video as a Background on Shopify?

Last updated on January 11, 2023 @ 8:39 pm

Adding a video as a background on Shopify is easy and can be done in a few simple steps. First, you need to find a video that you want to use as your background. You can either search for one online or upload your own. Once you have your video, log into your Shopify account and go to “Edit HTML/CSS.”

In the “Assets” folder, click on “add a new asset.” Select “video” from the drop-down menu and then click “choose file.” Find the video you want to use and click “open.” Now, go back to the “Edit HTML/CSS” page and find the code for your background. It will look something like this:

<style>

#background {

background: url(background.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;
 
 background-size: cover; 
}

</style>

All you need to do is change the URL in the code to the URL of your video. To do this, simply click on the "change" button next to the URL and enter in the new URL.

PRO TIP: If you are considering adding a video as a background on your Shopify store, there are a few things you should be aware of. First, videos can significantly increase the load time of your store. Second, not all browsers support background videos. Finally, keep in mind that some shoppers may find background videos to be annoying or distracting. If you do decide to add a video as a background, make sure to test it on all browsers and devices to ensure it loads properly and doesn't adversely affect the user experience.

Save your changes and you're done! Your video will now be playing in the background of your Shopify store.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.