Website Building » Shopify » How Do I Add a Video Banner to Shopify?

How Do I Add a Video Banner to Shopify?

Last updated on January 11, 2023 @ 5:08 am

Adding a video banner to your Shopify store is a great way to show off your products or services in action. You can upload a video file from your computer, or embed a video from YouTube or Vimeo.

To add a video banner to your Shopify store:

1. From your Shopify admin, go to Online Store > Preferences.

Go to Shopify online store preferences

2. In the ‘Storefront‘ section, click the Upload button next to the ‘Video banner‘ field.

3. Select the video file that you want to upload, then click Open.

4. Click Save. Your video banner will now be visible on your store’s home page. To learn more about adding videos to your Shopify store, check out our documentation on adding videos to pages and products.

Alternatively, you can also add a video banner to your Shopify store through the following steps:

1. From your Shopify admin, go to Online Store > Themes. Select your current store theme, then click the ‘Action‘ button. In the menu, select the ‘Edit code‘ option.

Or go to online store themes action menu and select edit code

2. In the code editor, find the ‘Sections‘ dropdown menu and click the ‘Add a new section‘ option. Select ‘.liquid‘ as the format and name your file.

In Shopify code editor, click sections menu and add a new section

3. From your new section file, add your custom codes or paste a pre-made template. In this example, we use a template from EcomExperts. Don’t forget to save your file once done.

Add some codes to the new Shopify store section you created

5. Then, go back to Shopify admin and click ‘Settings>Files‘ and upload your video banner file. Once done, click the ‘Copy Link‘ icon.

Go to Shopify settings, click files and upload your video banner Once the video banner is uploaded in Shopify, click the copy link icon

6. Next, go back to Shopify admin, and this time click the ‘Customize‘ button under the Online Store Themes tab.

Go to online store themes and click the customize button

7. In your Shopify store custom editor, click the ‘Add section>Video Background‘ to create a section for your video banner. Once created, drag the section at the top, directly under the header, and click the ‘Video slide‘ to open.

In the Shopify customize editor, click add section video background

8. In the ‘Video link‘ field, paste the link you copied from the uploaded video banner file earlier and press ‘Enter‘. You should now see the video playing in your editor. You can also upload a cover image if you want.

Paste the link to the video link field in Shopify video banner section

9. Lastly, scroll down to add more customization to your video banner, and once you’re satisfied, don’t forget to click ‘Save.’

Save the customize Shopify store video banner section

PRO TIP: If you are planning to add a video banner to your Shopify store, be aware that there are some potential risks involved. First, make sure that the video you want to use is hosted on a reliable and secure server. Secondly, be sure to test the video banner on all browsers and devices before making it live on your store.
Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.