Add or Embed Video on Product Pages

Article Number: 521 | Rating: Unrated | Last Updated: Thu, Nov 7, 2013 at 11:00 AM

Overview: This article will discuss how to embed videos on product pages.

Adding a single video across all product pages.

Adding item specific videos using the Counterpoint HTML description.

Adding item specific videos using the NRO short description field.

Adding item specific videos using NRO item attributes.

Adding a single video across all product pages.

This portion of the help article will describe how to add a single video to all product pages using the Custom Tab.

1) In the NRO admin panel, navigate to CMS > Static Blocks .

2) Select up the Celebrity Theme - Custom Tab .

The Block Title can be altered to fit specific needs. For example, it can be renamed as Video, Media, etc.
The Identifier should not be renamed. This static block is programmed into the Celebrity theme, and the code calls the identifier of "celebrity_custom_tab" to display this tab of content on a product page.
Ensure the Status is set to Enabled .
The Content area is where the embed code will be entered. Click on the Show / Hide Editor button to display the existing HTML code. Remove the existing code and paste in the embed code for the video.
Once completed, click the Save Block button in the upper right.

Embed code can be obtained from the video or site provider. For example, YouTube embed code can be obtained from the Share tab in the video description area.

4) Once completed, the Celebrity Theme - Custom Tab will be renamed at the bottom of the product page, and will display the video from your selected media site.

Adding item specific videos using the Counterpoint HTML description field

This portion of the help article will describe how to add a video to the Product Description tab of the item detail page.

1) In Counterpoint, open up the ecommerce item by going to Inventory > Items .

2) Look up the item.

3) Select the Ecommerce tab.

4) Open the HTML description.

5) Copy in the embed code into the HTML description.

Remove any double quotes ( " ) from the code in the HTML description. Replace them with single quotes. Counterpoint does not render double quotes when publishing the HTML description to NRO. If there are double quotes in the code, they will display online as " and the embed code will not work.

6) Publish the new data up to the website.

Adding item specific videos using the NRO short description field.

This portion of the help article will describe how to add a video to the Short Description field in NRO by using item notes in Counterpoint.

Please refer to our help article Using the Short Description Field .

Please note that HTML code CAN contain double quotes when using item notes. Information coming from item notes is not rendered as HTML like the product description. It is passed as plain text, and NRO will render any code in the item note after upload.

Adding item specific videos using the NRO item attributes.

This portion of the help article will describe how to add a video to an additional information tab on the product page using an item attribute. This method will allow for the usage of the Additional Info tab on the product page to embed the video. This is another option in case the product description, short description, or custom tab are not preferable options.

1) In the admin panel, navigate to Catalog > Attributes > Manage Attributes .

2) Select Add New Attribute .

3) Use the image below to create the attribute.

4) On the Manage Labels / Options tab to the left, both videos can be named Video, Media, or any thing else to meet your needs. For this example, the label was titled Video Demo.

5) Save the attribute.

The system may ask to reindex data. Follow the link at the top of the admin panel, and click the Reindex Data link next to the indexes that require updating.

6) Navigate to Catalog > Attributes > Manage Attribute Sets .

7) Assign the attribute to every attribute set.

Select the attribute set.
From the Unassigned Attributes column, click and drag the new video attribute over to the Groups column.
It is recommended the new attribute be placed under the General folder.
Save the attribute set.

8) Add the embedded code to the item.

Navigate to Catalog > Manage Products .
Open the item to which the video will be added.
On the General tab of the item, find your named attribute.
Paste the embedded video code into the attribute field.
Save the item.

9) The system will state that caches will need to be refreshed. Follow the link to the Cache Management page.

10) Use the check boxes to the left of the Cache Type to select it, and then hit the submit button.

Once the cache has been refreshed, the product page will now be updated. It will feature the Additional Info tab which will contain the custom attribute. This tab can be renamed by using inline translation if needed.