An increasingly common occurrence on ecommerce stores is the use of video in addition to product photography. The use of videos in product pages can help customers overcome any fears they're not buying the right item and give them a better chance to see the quality of the product they're buying. You can, of course, simply add the HTML provided by YouTube's embedding tool to your product description. However, if you want to insert your video on a specific page within your product template, you can follow the steps described in this section.
Magento products are constructed from a number of attributes (different fields), such as product name, description, and price. Magento allows you to customize the attributes assigned to products, so you can add new fields to contain more information on your product. Using this method, you can add a new Video attribute that will contain the video embedding HTML from YouTube and then insert it into your store's product page template.
An attribute value is text or other content that relates to the attribute, for example, the attribute value for the Product Name attribute might be Blue Tshirt.
Magento allows you to create different types of attribute:
- Text Field: This is used for short lines of text.
- Text Area: This is used for longer blocks of text.
- Date: This is used to allow a date to be specified.
- Yes/No: This is used to allow a Boolean true or false value to be assigned to the attribute.
- Dropdown: This is used to allow just one selection from a list of options to be selected.
- Multiple Select: This is used for a combination box type to allow one or more selections to be made from a list of options provided.
- Price: This is used to allow a value other than the product's price, special price, tier price, and cost. These fields inherit your store's currency settings.
- Fixed Product Tax: This is required in some jurisdictions for certain types of products (for example, those that require an environmental tax to be added).
Navigate to Catalog | Attributes | Manage Attributes in your Magento store's control panel. From there, click on the Add New Attribute button located near the top-right corner of your screen:
In the Attribute Properties panel, enter a value in the Attribute Code field that will be used internally in Magento to refer this. Remember the value you enter here, as you will require it in the next step! We will use video as the Attribute Code value in this example (this is shown in the following screenshot). You can leave the remaining settings in this panel as they are to allow this newly created attribute to be used with all types of products within your store.
In the Frontend Properties panel, ensure that Allow HTML Tags on Frontend is set to Yes (you'll need this enabled to allow you to paste the YouTube embedding HTML into your store and for it to work in the template). This is shown in the following screenshot:
Now select the Manage Labels / Options tab in the left-hand column of your screen and enter a value in the Admin and Default Store View fields in the Manage Titles panel:
Then, click on the Save Attribute button located near the top-right corner of the screen. Finally, navigate to Catalog | Attributes | Manage Attribute Sets and select the attribute set you wish to add your new video attribute to (we will use the Default attribute set for this example). In the right-hand column of this screen, you will see the list of Unassigned Attributes with the newly created video attribute in this list:
Drag-and-drop this attribute into the Groups column under the General group as shown in the following screenshot:
Click on the Save Attribute Set button at the top-right corner of the screen to add the new video attribute to the attribute set.
Once you have added the new attribute to your Magento store, you can add a video to a product. Navigate to Catalog | Manage Products and select a product to edit (ensure that it uses one of the attribute sets you added the new video attribute to). The new Video field will be visible under the General tab:
Insert the embedding code from the YouTube video you wish to use on your product page into this field. The embed code will look like the following:
<iframe width="320" height="240" src="//www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0" allowfullscreen></iframe>
Once you have done that, click on the Save button to save the changes to the product.
Your final task is to allow the content of the video attribute to be displayed in your product page templates in Magento. Open your theme's view.phtml file from /app/design/frontend/default/m18/catalog/product/ and locate the following snippet of code:
<div class="product-img-box">
<?php echo $this->getChildHtml('media') ?>
</div>Add the following highlighted code to the preceding code to check whether a video for the product exists and show it if it does exist:
<div class="product-img-box"> <?php $_video-html = $_product->getResource()->getAttribute('video')->getFrontend()->getValue($_product); if ($_video-html) echo $_video-html ; ?> <?php echo $this->getChildHtml('media') ?> </div>
If you now refresh the product page that you have added a video to, you will see that the video appears in the same column as the product image. This is shown in the following screenshot:
