Badgezilla

Flex Theme Sections

Checkout Toolbox

Linear Shopping Experiences

Episode 39 - Video in your Shopify Store

Subscribe to the Podcast

The Podcast


Show Links


Help the Podcast


Transcript

Hey, Scott Austin here.

Before I get started on this episode's topic, I have an ask for you. I want to do some episodes in the future where I review a store with the store staff. I'll record that review session so that everyone can share in the information. If you would like me to review your store and want to be on this podcast then let me know. I've included a link in the show notes to where you can apply.

Now in this episode I'm going to talk about including video in your Shopify store. That's because I recommend that all stores use video as a component of their shopping experience. A lot of video.

The past few years have seen a drastic increase in the number of people with very high bandwidth connections to the internet through their phone or wi-fi. As a result, there's also a drastic increase in the number of videos available online and the amount of time consumers spend watching videos. Now videos aren't just for sharing funny cat videos on social networks. They can and should be a powerful tool in your Shopify store and your marketing channels. I've built product pages for clients that include 6 or more videos on the page and saw it increase conversion. Studies show that customers are more likely to buy after watching a video about a product.

And the great thing is that these days creating videos and posting them in your store is pretty easy.

First, let's talk about the types of content you can have in a video. Here's some examples of the content found in videos on ecommerce sites:

  1. To introduce yourself on your About page. One effective method I've seen for this is a mock interview where the person behind the camera asks a series of questions of the store owner or whoever is the subject of the video. This format is more natural and sets the subject at ease. And the questions can be designed to reveal more about the products and more about the people in the video. Fun questions to the person can help them reveal their personality and thus make a more human connection.
  2. 360 rotating product video. I like this one a lot especially for products like jewelry where the customer may want to see a product from many different angles. This video can be created by just taking a video while walking around the product or having the product rotated on a turnstile. But more commonly its made by stringing a series of photos together. Usually the photos are shot as the product is rotated 10 to 20 degrees each time. Doing the 360 video from photos allows the photos to be processed, usually to remove the background to have a clean white background that allows the product to be the only focus of the video.
  3. Showing key product features. One of the reasons that video is so popular is that it uses audio and video, which are our primary ways of communicating. Reading, although very useful, is not as natural. So having a video that explains the features and benefits of a product is a natural way for customers to learn. And that said, video with spoken audio is much more powerful than just simple video with no audio or just background music. 
  4. Show instructions for maintenance or cleaning of the product. There are a limitless number of YouTube videos on how to fix or maintain things. Creating those videos for your products will help decrease the number of support queries you get. For example, anytime I need to show one of my clients how to do something, say add a tab to the product tabs solution that I built for them, I'll record a video of it. The video is an easy way for me to explain complex instructions. And I also get to use that same video with all of my other clients, which increases the return on the video making investment.
  5. Compare different product options. Explaining the differences between product options can be hard. One effective way is to make a video where you explain the differences to customers by showing products with the different options and contrasting the benefits of the different options. The goal is to inform the customer in order for them to make an informed decision. I have a client that makes custom golf carts. And their carts can come with 3 different options for the backseat. They made a really useful video that explained the options. They lined up 3 carts with the 3 different seats and showed the unique value prop of each in one video walkthrough.
  6. Instructions on how to setup a product. Creating an installation manual can be a nightmare. Its pretty hard to communicate complex instructions with just text and photos. Instead, a video is a much easier way to explain to your customer how to set up your products. 
  7. Instructions on how to use the website if the ordering process is more complex. Some shopping experiences are complex and involve a number of steps with a variety of choices the customer needs to make. Explaining the ordering process in a video is a great way to the give the customer confidence that they are ordering properly. 
  8. Showing the store's mission at work. Let's say that you sell coffee that is ethically sourced. Well your coffee store could have a video that explains where the coffee is sourced from and how the workers are treated.
  9. Replacing GIFs. Most people understand GIFs. They are those short animation images that we see everywhere. But the GIF format is pretty old and therefore not very efficient. GIFs are much larger file size than corresponding video files. And GIFs have low resolution and limited color support. Any GIFs on your site can be turned into videos. I've done many 3 second videos that were migrated from GIFs and they've worked well.

So those are some ideas for different types of videos that you can add to your store. Note, one of the uses that I did not mention is having video as a banner on the homepage. It became kind of trendy around 2012 for top-tier websites to replace their banner image with a video instead. There was some novelty to it back then. And having one that works well does some take some effort, so can help build a brand by showing you are willing to put effort into the brand. But I do not recommend it for most Shopify stores. First off, it usually doesn't improve the shopping experience. In fact, it can distract the customer. Homepage banner videos can seem more like a vanity project for the site than something that is done with the customer in mind. And secondly, it’s a lot of work to create one that works well. I'd prefer you put that effort into improving the shopping experience or marketing to attract new customers. Of course, there are exceptions to every rule. And the OneWheel homepage video banner is an example of one that improves the shopping experience and the brand. I'll link to it in the show notes.

Next, let's talk about where your video is hosted or stored. There are number of ways that that you can deliver videos in your store. Here, I'll talk about the top 3.

  1. YouTube. YouTube is the dominant player in internet videos. Any useful videos that you create for your store, you'll want to include on YouTube also. And that's because YouTube has such as massive audience that may find your videos and therefore your store while they are engaged on YouTube. YouTube can be an organic traffic driver.
    Videos hosted on YouTube can be easily added to your store. The YouTube video player code is about 3.5 MB, which is fairly big and can severely impact your page speed score. But for those of you that listened to my last episode, you know that I think page speed scores should be ignored, and the YouTube player is one reason why. You see, the player is 3.5 MB. And page speed tools do not use browser caching. So the tools will download the YouTube player each time and penalize the score. But in the real world, everyone already has the YouTube player in their browser cache because YouTube videos are everywhere. So when a customer comes onto a page in your store with a YouTube video, they won't need to download the player if its already in their cache.
    One big drawback to hosting your videos on YouTube is that YouTube adds an end screen to your video that recommends other videos to your customer. And those videos can be from across YouTube and not just from your channel. So that could tempt people away from your shopping experience and down a YouTube rabbit hole.
  2. Vimeo. Vimeo is another hosting platform much like YouTube. One difference is that Vimeo has nowhere near the audience size of YouTube, so you'll get less of an organic traffic benefit. Another difference is that Vimeo does not have the cross-promotional end screen, so it's much less likely to siphon your traffic.
  3. HTML5. HTML5 standardized support for video around 10 years ago. Things were much more complicated before then. But now it's very easy to support video using just HTML code. The benefit of HTML5 video is that you are not using another company's player, like YouTube, and therefore do not have to worry about your users being siphoned off. And you are in complete control of the experience. The negative is that you need to be comfortable editing HTML code. So it's an option only for the more technical people out there. With HTML5 video, you can store the video right on Shopify's servers. Shopify allows the video to be up to 20MB in size if its stored in the files section under settings. And the video can be up to 1GB in size but no longer that 60 seconds if it is added as product media. If your videos exceed those limits, you'll need to host them outside of Shopify. I usually use Google Drive in that situation.
    One thing to note with HTML5 video is that the video is streamed to the web browser when the customer clicks the play button. In other words, the video is not loaded when the page is loaded. So having videos on a page doesn't significantly impact page speed. Side note if you are confused about why I am talking about page speed. Page speed is import. But page speed scores should be ignored.

Which of these three options should you use? In some cases, just one. But there's also times where stores use two or all three methods. Here's some ways to think about the decision:

  1. If you want to spend as little time possible implementing video, then go with YouTube.
  2. If you are technical, try using HTML5 video in your store where possible. Though you'll also want to load the videos onto your YouTube channel for the organic traffic benefit.
  3. If you want a cleaner experience but aren't technical, then host your videos for Shopify on Vimeo. You'll also want to load the videos onto your YouTube channel for the organic traffic benefit.

Next, let's talk about getting your videos onto your store. The three common places to place videos are in the product photo carousel, yes you can use video as a product photo, in the HTML of a page, and in a homepage section explicitly built for videos.

The video in the product carousel is pretty slick. You can add it from the Shopify admin pretty easily, similar to adding a photo. But not every theme supports it. And the older your theme, the less likely it is to be supported. Now if you have an old theme that doesn't support it, the easiest option is to add videos in the product description instead. One way I've implemented product videos is to have the video as the 2nd image in the carousel. Then if show 2nd image on hover is enabled in the theme for collection pages, the video will start running on hover from the collection page. This makes for an engaging experience when done properly. For example, showing 360 rotating views on white backgrounds for jewelry. Though its only good for desktop as there is no hover state on mobile as there is no mouse.

Onto the embed option for showing videos. This can be used whenever the Shopify admin provides you with an HTML editor. That includes page content, article content, product descriptions and collection descriptions. YouTube and Vimeo both provide what is called an embed code for each video. That embed code gets added to the HTML and viola, you have video. However, the embed code isn't very responsive. The width of the video is static. So if the video size is set to say 800 pixels by 600 pixels, the width of the page will be at least 800 pixels even on mobile. Google Search Console will help you catch when this happens. In this situation, I wrap the embed code in some responsive CSS that makes the video responsive. I'll include a link in the show notes to Embed Responsively, which is a free web tool I use for this.

So let's talk a little bit about the video itself. Here's the thing, these days, people are a lot more forgiving of poor quality videos. And that's because with YouTube and social media, anyone and everyone is creating video. And a lot of that video is poor quality. So people will forgive the poor quality if the content is useful or engaging. And the moving nature of video is more forgiving to quality issues like lighting or focus than static photos. Now that's not to say quality is not important, it is. But a video shot in your car about an upcoming promotion will be fine to use in your social marketing. The quick, unprofessional nature provides a bit of authenticity to the social post. But on your homepage, you may want a more scripted and edited video.

You don't need to have a studio or professional equipment. In fact, for your first video I recommend that you just use the equipment you already own, your phone. The current generation of phones do an amazing job at recording videos. Over time, you can invest in better equipment if needed. I recommend that one of the first investments be a microphone as improving the audio usually provides more gains in quality than improving the video.

Now, if you are going to be recording your screen, you'll need software to do that. I use free software called OBS, which stands for Open Broadcaster Software, for screen and audio capture. It's extremely powerful. I'll include a link to it in the show notes.

I'm not going to go into editing software recommendations here as the tools vary greatly depending on what platform you are on - phone, Mac or PC. That said, editing can greatly improve the quality of the video. Common edits include:

  1. Adding title screens or closing screens
  2. Adding text or graphics over the video to clarify what is being shown
  3. Editing out unneeded content
  4. Speeding up slow sections to keep the pace up

And plenty more edits can be done.

One more free piece of software that I want to recommend is Handbrake. Handbrake can help you convert your video into any of the required formats. And it also allows you to change the size and frame rate of the video which can significantly reduce file size.

In the not too distant future, an ecommerce site without video will be as unheard of as a store without product photos today. So, if you are not already using video in your store, get started on it now. You first video could be something like you introducing a new product, a promotion or a sale and posting it on social. If you are using video already in your store, awesome. Keep investing in it.

Thanks for listening.


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search