YouTube Embedded Video

Add an embedded YouTube video to your product page, which shows a video demonstrating the item.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:

• Read through the Introduction to Neto by Maropost Document to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Setup a custom product field

In the control panel, create a new custom product field and enter the following info:

• Custom Field: Select any option from the dropdown, remembering the tag (eg. [@misc1@]).
• Field Name: YouTube Video ID
• Field Type: Short Text
• Show On Product Display Page: Visible
• Show On Product Thumbnail: Visible

Step 2: Add the code into the template

Open /httpdocs/assets/themes/[THEME-NAME]/templates/products/template.html and paste the following code into the template where you would like the video to appear. Make sure to replace both [@misc1@] tags with the "Field ID" from step 1.

[%if [@misc1@]%]
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/[@misc1@]"></iframe>
    </div>
[%/if%]

Step 3: Get the YouTube Video ID

A video ID can be found by viewing a video through YouTube and copy the last string in the URL. Eg. The video URL is https://www.youtube.com/watch?v=wBrCy6-AkEg and the video ID is wBrCy6-AkEg.

Step 4: Enter the YouTube ID

Paste the YouTube video ID into the newly created custom product field which can be populated with data manually through the control panel or via the product import wizard.