How to add videos to your store

You can add video to your store in three ways:

• Your hero: the big banner at the top of your homepage can show a video instead of an image.
• A Video Section: one video on any page, or above or below the content on your category, brand and article pages.
• Inside your text: articles, products, categories and anywhere else you see the Text Editor.

The hero and the Video Section are set up in the Live Store Editor at Design > Live Store Editor. Nothing you change there reaches your visitors until you press Publish.

🔗 New to this? Follow the step-by-step guide: How to add a video to your homepage

Add a video to your hero

1. Go to Design > Live Store Editor and pick your homepage from the selector at the top.
2. Click the hero in the preview, or click Hero in the section list, to open its settings.
3. Set Layout to Columns or Overlayed. The Products layout shows product photos, so it has no video.
4. Set Media to Video.
5. In the Video box, click Upload, Paste a link or Find Stock Video. Each one is explained below.
6. Choose a Playback: Background loop or Click to play.
7. Check the preview, then press Publish.

Three ways to add a video

Upload

Click Upload and choose a video file from your computer. Keep the page open while the progress bar fills. You can press Cancel to stop.

When the upload finishes, the box shows "Your video is being prepared". This can take a few minutes. You can press Publish straight away: your store shows the Still image until the video is ready, then starts playing it without you doing anything.

The box shows the largest file you can upload. It is 100 MB, or 250 MB for Accelerator members.

Paste a link

Click Paste a link, paste the address of your video, and click Add. The editor works out where the video lives.

A few things to know:

• Videos you host yourself are free and unlimited. They do not count toward your store's video allowance.
• Dropbox and Google Drive videos are copied to your store, because both services block videos that other websites try to play. Set the file to "anyone with the link" first, or the editor refuses it. A copied video counts toward your allowance, like an upload.
• Vimeo: a Background loop needs a paid Vimeo plan. On a free plan, choose Click to play.
• Instagram and Facebook videos cannot be used.

Find Stock Video

Click Find Stock Video, type a word such as "coffee" or "beach", and click Search. Hover over a video to preview it, and click it to use it. The videos come free from Pexels, and the editor shows the name of the person who made each one.

Stock videos do not count toward the number of videos or minutes your store can hold. The bandwidth they use when visitors watch them does count.

Changing or removing a video

Once a video is ready, the box shows a picture from it, its length and where it came from. Click Replace to choose another, or Remove to clear it. If a video could not be prepared, the box says why, with a Retry button.

Background loop or Click to play

• Background loop plays the video with no sound, over and over, behind or beside your headline and button. A pause button sits in the corner for visitors who want it to stop. A loop can be up to 60 seconds long. Short clips of 10 to 20 seconds work best.
• Click to play shows the Still image with a play button. A click plays the video with sound and controls. In the Columns layout it plays in place. In the Overlayed layout it opens over the page.

YouTube, Loom, TikTok, Dailymotion and Streamable videos can only use Click to play, so the editor sets that for you. Nothing loads from those sites until a visitor clicks play, which keeps your page fast.

The Still image

The Hero Image field is your video's Still. It is the picture visitors see first, while the video loads.

• For an upload, a stock video or a platform link such as YouTube, a picture from the video fills the Hero Image field if it is empty.
• For a link to a video file or a stream, there is no picture to take, so the editor asks you to set one: "Set a Still image in Hero Image below."
• The Mobile Hero Image (optional) field still sets the picture for phones.

Pick a Still that works on its own, because some visitors only ever see the Still:

• visitors whose phone or computer is set to reduce motion or save data
• iPhones in Low Power Mode
• phones, when On phones is set to Show the Still image
• everyone, while a new video is being prepared, or if the video cannot load
• everyone, when the store has used its video bandwidth for the month (see below)

More hero options

These work for an image hero as well as a video.

• Media side (Columns layout): put the picture or video on the Left or the Right.
• Frame (Columns layout): None, Circle, Arch, Phone or Laptop. Phone and Laptop draw a simple device around your video in your store's own colours.
• Overlay (Overlayed layout): None, Light, Medium or Dark. A darker overlay makes white text easier to read over a busy video.
• On phones (video only): Play the video, or Show the Still image to save your visitors' mobile data.

Add a Video Section

A Video Section puts the same player anywhere: further down your homepage, on a custom page, or above or below the content on your category, brand and article pages.

1. Go to Design > Live Store Editor and pick the page or zone from the selector at the top.
2. Click Add section and choose Video Section. It lands at the bottom of the page. Use the up and down buttons to move it.
3. Fill in the fields:
   • Heading (optional): a title above the video.
   • Video: Upload, Paste a link or Find Stock Video, as above.
   • Playback: Background loop or Click to play.
   • Frame: None, Circle, Arch, Phone or Laptop.
   • Shape: Wide (16:9), Standard (4:3), Square (1:1) or Tall (9:16). Pick Tall for videos filmed on a phone.
4. Press Publish.

A Video Section has no Still image field. For uploads, stock videos and platform links, it shows a picture taken from the video.

Your store's video allowance

Videos we store for you use your store's video allowance: uploads, Dropbox and Google Drive copies, and the bandwidth of stock videos. Videos you host yourself never count.

Bandwidth is the data your visitors download when they watch. Short clips use less, so a 15 second loop goes much further than a 60 second one.

Once your store has used half of this month's bandwidth, the Video box in the editor shows how much. We email you at 80%. If a store uses all of it, visitors see the Still image instead of the video until the next month starts.

If you reach your limit, you can add more. The editor shows you how when it happens.

Videos in articles, products and categories

You can add a video anywhere you see the Text Editor, such as articles, products and categories. This works for YouTube, Vimeo and any other video site that gives you an embed code. The video plays on your store page, so visitors do not have to leave your store to watch it.

Get your video embed code

Upload your video to YouTube or a similar site. You will find an "Embed Code" in the "Share" options of that video. Copy it for the next step.

Add the video to your content

Click the icon shown in the screenshot below. It is on every text editor in your store dashboard:

Select "Embed" and paste your embed code.

YouTube and Vimeo videos in your articles resize to fit the screen, so they fit on phones as well as desktops.

Using your own embed code on a page

For most videos, the Video Section is the easier choice. If you have embed code from a service not listed above, use a Custom HTML section instead:

1. Go to Design > Live Store Editor and pick your page from the selector at the top.
2. Click Add section, choose Custom HTML, and move it to where you want the video.
3. Paste your embed code into the HTML field. It is printed on the page exactly as written.
4. Press Publish.

Leave Keep to page width? on to line the video up with the rest of the page. Switch it off to remove the page-width limit.

Adding embed code to every page

You can also add embed code to the "Custom HTML" fields in Design > Text > Global Text > Custom HTML. Videos added here show on every page of your store.

🔗 Live Store Editor feature guide

🔗 How to add sections around your category and article pages