How to add a video to an item using the Storefront Visual Builder

Owned by Hunter Schaeffer
Last updated: Aug 02, 2018
3 min read


Overview

This tutorial provides an overview of the process of configuring an embedded video into it's own tab in the item page of your storefront.

Visual Builder Theme Required

This tutorial focuses on how to accomplish this process using the Visual Builder tool, which is built into the 'Elements' theme (as well as the soon-to-be-released Storefront Theme 'Hero'.

(If you are using one of the other themes, you may be interested in updating your theme to include support for the Visual Builder. For more on that process, see: Adding the Visual Builder to a Legacy StoreFront Theme)

Steps To Add The Video

Step 1 - Navigate To And Edit The Item Page To Which You Wish To Add The Attribute

Navigate to the page you want to include the attribute and then click  the edit button tin enter the Visual Builder:

Step 2 - Click Hierarchy In The Visual Builder Panel 

Clicking the Hierarchy menu choice will open the hierarchy panel along the right side of the page.:

Scroll through the elements until you have the section you wish to add the new video item attribute.

Step 3 - Add The Item Attribute Element

Once you have the appropriate section of the page highlighted in the Visual Builder:

Click the "Add Element" button (the plus '+' symbol) then search for and then select "Item Attribute" in the Panel that opens o the right side of the page:

In the Attribute editor panel, select the attribute type 'Video List' and then configure the Attribute name. In our example we named it 'Item videos':

Step 4 - Obtain the URL for the Video

Now we are ready to begin applying videos to our items!

Browse to Youtube.com (or vimeo.com) and copy the URL to the video you wish to embed.
(You can copy the URL from the URL field in your browser, when viewing the video.)

Step 5 

Next, navigate to the Item Management area and then edit the item you wish to insert the video,then scroll down the first tab of the editor to the Storefronts section, where our new item attribute field now appears:



Click the add button and then paste the URL into the dialog window URL field. You'll see a preview of the video appear below the URL field.:

Save the changes by clicking the add button below the video URL.

Congratulations! You have added the video attribute to your Storefront.

Let's view the item  video in our store: