Adding Video to BigCommerce Using Shogun

Videos are a highly versatile digital marketing tool. They can be used to demonstrate how your products work, provide engaging customer testimonials, tell compelling stories about your brand and values, and much more. 

According to a recent survey, the vast majority of companies that use video marketing have found that it’s a good investment:

• 96% reported that video marketing helped improve understanding of their product or service
• 91% said it increased the amount of traffic to their site
• 87% have seen an increase in the average amount of time people spend on their site
• 87% said that it increased sales
• 53% reported that it reduced the number of support queries they receive

It’s no surprise that the same survey found that the vast majority of companies — 91%, to be exact — currently use video marketing. If you’re part of the 9% that still hasn’t adopted video marketing yet, then you’re missing out on many potential benefits. 

In addition to tools for improving performance and SEO, Shogun also offers a visual editor that you can use to quickly add new features to your BigCommerce pages — including videos.

Here’s how it works: the visual editor includes an element library, which contains just about anything that you might want to add to your BigCommerce store. You can simply select whichever elements that you do want to include and place them wherever you want on the page. Each element’s content and styling is fully customizable. 

To access the visual editor and element library, you just need to follow these steps:

• After downloading and installing Shogun, select the “Apps” option in the left sidebar of the BigCommerce control panel. 
• Open Shogun.
• Go to the “Pages” section within Shogun and select the page that you would like to customize — this will open the page in the visual editor.
• To open the element library, click on the “Element” icon located in the left sidebar of the visual editor (it’s the one that looks like a plus sign inside of a circle).

Below, we’ll go over several different ways that you can use Shogun to add video to BigCommerce:

• Embedding a Video into a Page
• Adding a Video Background to a Page
• Adding a Video Carousel

Overall, you’ll find that it’s quite easy to implement and customize video content with Shogun. 

Embedding a Video into a Page

To embed a video into one of your pages in Shogun, click and hold on the “Video” element and place it wherever you want the video to be included. Then, add the YouTube or Vimeo URL for your video content. 

The customization options for this particular element include:

• Aspect ratio: You can choose either 16 x 9 (widescreen) or 4 x 3.
• Loop: With this option enabled, the video will automatically play again once it is finished. 
• Autoplay: The video will automatically start playing once it loads.
• Mute: This option will mute your video by default (videos that have the “Autoplay” setting enabled must also have the “Mute” setting enabled, as this is required by many browsers). 
• Start video at: Start the video on your site at some point later than its original start time.
• End video at: End the video on your site at some point earlier than its original end time.
• Related videos from other channels: This option will only appear when you use a YouTube URL. You should strongly consider disabling this option, as it can distract visitors and lead them away from your store. 

Note that if you customize the “Start video at” or “End video at” settings, the “Loop” setting will not operate as expected. 

Adding a Video Background to a Page

One of the main reasons why videos are so effective at improving stats like search rankings, average time on site, and sales figures is that they grab the visitor’s attention. 

So many online stores these days follow the same basic formula: there are category pages listing different product titles, images, and prices, and clicking on one of these items leads to some more images and text on the product detail page. If a visitor is comparison shopping and checking out several stores for the same purchase, it all just tends to blur together.

Adding a video introduces something different, and that novelty is often enough to get the visitor to stay on your page for at least a little while longer. And the longer someone stays on your page, the more likely they are to add an item to their cart and ultimately make the purchase.

A video background that takes up the visitor’s entire screen heightens these advantages, allowing you to really stand out from the competition and keep the visitor interested.

In Shogun, you can implement this feature by adding a “Container” element to the page. The “Container” element allows you to overlay other elements, such as text and buttons, in front of a full-width background color, image, or video.

When you use a video as your background for a container, you can turn the sound either on or off. You also have the option of adding a parallax effect — this will make the background of your container move slower than the foreground when the visitor scrolls up or down, adding an extra sense of depth. And it should be noted that, as with the “Video” element, the only way to add your video is by linking to a YouTube or Vimeo URL. 

In addition to these video settings, your other customization options for the container element include:

• Entire container clickable: With this option enabled, you can add a URL and essentially turn your whole container into one large button.
• Vertically align content: Determine whether your overlaid content is aligned at the top, middle, or bottom of the container. 

Adding a Video Carousel 

Finally, you can also add a series of videos to the page by using Shogun’s “Slider” element. As the name implies, this will create a slideshow, and you’ll be able to add videos (or whatever else you want) inside each slide. 

This is a particularly helpful tool for those who want to use video for customer testimonials, as you’ll be able to include several different testimonials without taking up too much room on the page. 

The customization options for the “Slider” element include:

• Number of slides: Choose how many slides are included in your slideshow. 
• Show arrows: Determine whether arrows will be displayed on either side of your slider, which visitors will be able to click to navigate from one slide to the next. You can also customize the color of these arrows.
• Show dots: Determine whether dots are displayed at the bottom of your slider, indicating which slide the visitor is currently viewing. As with arrows, you can customize the color of your dots as well.
• Controls over content: With this setting, you can choose whether the arrow and dot navigation options are displayed either next to or on top of your slideshow content. 
• Auto Slide: Choose whether your slides transition manually or automatically. If you enable this option, you’ll also be able to determine how long each slide is shown and whether the autoplay pauses when the visitor hovers their cursor over it.

With Shogun’s element library — as well as the extensive set of customization options that come with each element — you’ll be able to integrate video content however you want on your homepage, landing pages, blog posts, and every other part of your BigCommerce store.