Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This location is good for ensuring the video remains in the most visible part of the page, and doesn't slip 'below the fold' where the user may miss it if they have to scroll.  

  1. Login to the CMS. 
  2. Navigate to Products & Categories → Product Maintenance
  3. Search for the required product code and click 'Edit'.
  4. Scroll to the Media section and click 'Add Video'
  5. Select the Video Type (YouTube and Vimeo are supported). 
  6. Enter a description. 
  7. Enter the Video ID code (do not paste the embed code). 
    Image Added 
  8. Click 'Add'. You should see your video thumbnail added to the Media list for the product. 
  9. Click 'Save' or 'Save and Exit'. 
  10. In another browser (or incognito tab), load the product detail page for the product you edited. You'll see that your video has been added to the image gallery. 

Adding Video outside the Product Gallery

...

In the following example, we'll add a Video widget to display only videos with a certain tag. 

  1. Follow the steps above to add the video to the product gallery. 
  2. After adding the video, click 'Add Tag...'. 
  3. Enter a tag into the field (which you will reference later) and click 'Save'.
    Image Modified
  4. Navigate to Content → Standard Pages
  5. Select the Product Detail template.
  6. Select the appropriate zone for your product video, according to your page layout. 
  7. In that zone, click 'Add Widget'.
  8. Search for the Product Video widget and click 'Add'.
  9. Edit the Product Video widget you just added.
  10. In the 'Video Tag' field, enter the tag from the video you added previously. 
    Image Modified
  11. Set the hex text colour for Vimeo (if applicable), edit the heading options and click 'Save'. 
  12. In another browser (or incognito tab), load the product detail page for the product you edited. Your video will now appear on the page as well as in the gallery.
    Image Modified

 

Tip

Tag other product videos with this same tag in order to display them on their respective product detail page. If the widget detects a video with that tag, it will render it on the product detail page. If there are no videos with matching tags, the widget will simply be hidden.

...