How to Implement Videowise with Shopify Headless

The implementation of Videowise with Headless Shopify includes two parts 👇

Scripts initialization (adding Videowise scripts to the website)

Setting the locations where you want to show the widgets

Current Method Based on videowiseInfo var

The window.videowiseInfo var will be used on all non-Shopify platforms (Sfcc, Magento, Woo) and also on headless Shopify.

Minimum implementation for headless Shopify

To add scripts to your website, insert the following code before the closing body tag.

<script>
var SKIP_CART=true;
var FORCE_DOMAIN = true;
var VIDEOWISE_FAST_INLINE_VIDEO_PLAYER = true;
var videowiseInfo = { 
	cartType: 'Shopify',
	shop: 'shop-name.myshopify.com', 
	currency:'USD',
	currencyRate:'1',
	pid: 'the_shopify_product_id'
};
</script>

<link rel="stylesheet" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://assets.videowise.com/style.css.gz" id="videowise-style-css">
<script defer="" src="https://assets.videowise.com/vendors.js.gz" id="videowise-vendors-js"></script>
<script defer="" src="https://assets.videowise.com/client.js.gz" id="videowise-client-js"></script>
Full structure for ➔ window.videowiseInfo

Full structure for ➔ window.videowiseInfo

{
  addToCartUrl: string; 
  cartURL: string;
  checkoutURL: string;
  currency: string;
  currencyRate: string;
  cartType: '' | 'shopify' | 'magento' | 'sfcc' | 'tapcart';
  host: string;
  locale: string;
  pid: string;
  productDetailsURL: string;
  siteID: string;
  withLiveStream: boolean;
}

Notes on correctly populating the `videowiseInfo`

videowiseInfo.shop ➔ must be set up to the correct myshopify.com domain

videowiseInfo.pid ➔ must be set in the following way:

product id - if a product page is being rendered

null, or an empty string ‘’ if it’s not a product page

videowiseInfo.locale → must be the current locale the customer is navigating videowiseInfo.route → represent window.Shopify.routes.root if available , in case url is http://myshopify.com/en the value will be "/en/" otherwise it will fallback to /

Handling add to cart in headless Shopify implementations

In most headless Shopify setups, the "Add to Cart" functionality is handled via custom logic. This often includes not just adding the item to the cart, but also triggering related frontend behaviors such as opening a cart drawer, displaying notifications, or updating UI elements.

Because of this variability, Videowise does not provide a built-in method for performing the add-to-cart action directly.

Instead, Videowise emits custom browser events that your application can listen for and respond to with your own logic.

To enable this functionality, ensure that the Buy Button behavior is set to "Virtual Cart" in the following location:

Widget → Player Design → Buttons → Buy Button Behavior

Custom Event: `videowiseProductAddToCart`

When a user clicks the Add to Cart button inside the Videowise widget, a custom event named videowiseProductAddToCart will be dispatched. This event includes the necessary product information in event.detail, such as:

variantId – the Shopify variant ID

qty – the selected quantity

You can intercept this event and trigger your own add-to-cart logic as shown below:

window.addEventListener("videowiseProductAddToCart", (event) => { 
   const { variantId, qty } = event.detail || {}; 
   if (variantId && qty) { 
     // Add product to cart 
     addToCart(variantId, qty); 
     // Trigger additional UI actions (e.g., open cart drawer)  
     openCartDrawer(); 
   } 
});

Didn't find what you were looking for? Talk to our support team via email at support@videowise.com

Frequently asked questions

What is required to implement Videowise on a headless Shopify store?

A headless implementation requires two main steps: adding the Videowise scripts to your website before the closing body tag, and configuring the window.videowiseInfo variable with your store's details, including your myshopify.com domain, currency, and the current product ID on product pages.

What is the videowiseInfo variable and what does it contain?

The window.videowiseInfo variable tells Videowise about your store environment. Key fields include cartType (e.g., "Shopify"), shop (your myshopify.com domain), currency, currencyRate, and pid (the Shopify product ID on product pages, or null on non-product pages). Additional optional fields include locale, route, host, and checkoutURL.

How does Add to Cart work in a headless Shopify setup with Videowise?

In headless setups, Videowise does not handle add-to-cart directly. Instead, when a shopper clicks the Add to Cart button inside the Videowise widget, Videowise emits a custom browser event called videowiseProductAddToCart. Your application listens for this event and runs its own add-to-cart logic, including opening a cart drawer or triggering notifications.

What is the videowiseProductAddToCart event and what data does it include?

videowiseProductAddToCart is a custom browser event fired by Videowise when a user clicks Add to Cart inside the player. The event.detail object contains variantId (the Shopify variant ID) and qty (the selected quantity), which you can use to trigger your own cart logic and UI actions.

Does Videowise work on non-Shopify headless platforms?

Yes. The window.videowiseInfo implementation supports non-Shopify platforms including Salesforce Commerce Cloud (SFCC), Magento, and WooCommerce. Set the cartType field to match your platform and populate the remaining required fields to match your cart and product structure.