YouTube Embedded Video
Add an embedded YouTube video to your product page, which shows a video demonstrating the item.
Before you start this tweak, it's a good idea to run through our Preparation Checklist below:
- Read through the Introduction to Maropost Commerce Cloud 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.
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.
- 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
/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
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.