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
{
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 IDqty– 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();
}
});