How to add a video to an item using the Storefront Visual Builder
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: