Updating your site: how to easily stay set up with Videoly

Get your updated online store off to the best start with Videoly.

We want to support your store's growth and give your customers an interactive, informative shopping experience. Ensuring a smooth transition as you launch your new site plays a key role in this.

And the great new is: Videoly's solution is platform-independent!

You can set everything up on your end. 

Here is a checklist on what to do to make your transition to your new online store seamless with Videoly. You will find detailed information on each of these steps below:

  • Maintaining product information
  • Sharing product information
  • Setting a placeholder for the widget
  • Videoly code
  • Testing environment
  • Configuration 

Maintaining product information

Keeping the same product titles and product IDs as you transition to your new site helps the immediate transfer of all existing product video pairings.

Sharing product information

Sharing product information in invisible DOM nodes makes the widget even better at reading your product page template and makes us confident that this data is reliable and consistent on all your product pages. In short, sharing product information can help boost coverage and makes changing layout and migrating to new platforms effortless. 

In order to share the product information with Videoly, you’ll need to add a few lines of code (the aforementioned invisible DOM nodes). These lines can be located anywhere in your HTML layout. 

Here is an example with default IDs that Videoly is checking before extracting data using other selectors:

<div id="videoly-product-title" style="display:none;">Clean product title here without SEO things</div>

<div id="videoly-product-id" style="display:none;">12345678ABC</div> 

<div id="videoly-product-sku" style="display:none;">LEGO12345-AB23</div>

<div id="videoly-product-gtin" style="display:none;">5702016603842</div>

<div id="videoly-product-mpn" style="display:none;">21319</div>

Optional fields:

<div id="videoly-product-brand" style="display:none;">Philips</div> - a brand name of the product

<div id="videoly-product-currency" style="display:none;">EUR</div>

<div id="videoly-product-price" style="display:none;">€1234,12</div>

<div id="videoly-category-tree" style="display:none;">Phones / Accessories / Protection screens</div>

The Videoly widget will first look for the nodes provided above and extract data from them. If the node is not found or the content is empty, it will use selectors defined by the Videoly team.

When implementing the lines above, make sure the values of ID attributes remain the same on all product pages, while the content of the div element changes depending on the product page.

💡 Collecting add-to-cart conversions

Videoly can measure the value of videos by collecting clicks on the add-to-cart button. Here, you can add the class name "videoly-atc-btn" to notify Videoly to monitor the button:

<div class="btn-addtocart btn-default videoly-atc-btn">Add to Cart</div> 

Setting the placeholder for the widget

We highly recommend placing the widget above the fold and near the add-to-cart button (for better watch rates).

You can easily adjust the widget’s position by adding a DIV element with ID (attribute) to your product page template. Once this DIV element is on the page, the Videoly widget will attach itself to it as a child element. 

Simply insert this code to the place on the product page template where you would like to see the Videoly widget:

<div id="videoly-videobox-placeholder"></div>

Videoly code

Once the placeholder is ready, simply paste the Videoly code onto your product page template. There are two ways to access your store's unique Videoly code: 

  • Copy your store's Videoly code in MyVideoly under your Settings ('General' tab)
  • Get in touch with us at support@videoly.co and we can send you your Videoly code

Testing environment

Read more about launching Videoly in a testing environment and how to whitelist your test domain in MyVideoly here.  


We want to support you in launching your site in the best way possible. Giving us a heads up via support@videoly.co  once you’ve completed the above steps (and, if need be, access to your new site) allows us to check configuration and make sure everything is good to go. 



Was this article helpful?