Skip to main content

How to Implement Videowise with Shopify Headless

Follow these instructions to create a Headless Implementation on your Shopify Store.

V
Written by Videowise Support
Updated this week

The implementation of Videowise with Headless Shopify includes two parts πŸ‘‡

  1. Scripts initialisation (Adding Videowise scripts to the website)

  2. Setting the locations where you want to use 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>
<script defer="" src="https://assets.videowise.com/custom/sitename.js" id="videowise-custom-js"></script>

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

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;
}
Did this answer your question?