Embedding your Web Stories on Shopify
You’ve gathered all of your shoppable video content, created a livestream shopping event, and now it’s time to embed them onto your Shopify storefront. Let’s get started!
Step 1. Enable in-player shopping cart integration
On your Shopify store admin panel, go to Online Store > Themes, then click Actions > Edit code. Copy and paste the following two lines of Firework JavaScripts libraries to the header section of the file theme.liquid. Put the two lines between <head> and </head>.
<script async src="//asset.fwcdn2.com/js/integrations/shopify.js"></script><script async src="//asset.fwcdn2.com/js/fwn.js"></script> |
Note: If you embed the Firework video player on your storefront on a domain (e.g. awesomestore.com) that is different from the product URL domain (e.g. awesomestore.myshopify.com), shopping cart integration won’t work. Please refer to this Shopify documentation for setting the primary domain to keep the product URL domain and the storefront domain the same. We are also working on a workaround on this issue.
Step 2. Create a playlist of videos and livestreams for the product page
Head on to the Firework business portal, and select the channel containing all your video content. Where it says Playlists + click on the + to create a new playlist. Add the videos and livestreams to the playlist that you want to play on the storefront.
Step 3. Select your layout
After clicking the pink </> Embed button you’ll see this screen and be prompted to select which layout you would like to embed on your website. For this example, we will be embedding a Carousel which is great for showcasing series of videos. Alternatively, if you want to focus on a single livestream event, you may choose Story Block or Floating Video.
Step 4. Copy HTML code
After selecting your layout you will see different options for embedding your code. Select Shopify and then select the Copy Code button. For each layout you select you will need to copy a new code and repeat this process.
The code will look like this:
|
Step 5. Paste the copied code onto your Shopify store pages
Now you can paste the copied code and embed the Firework widget onto your Shopify store pages. If you are editing a Page or Post, click the <> button to go to the HTML editor, and paste the copied HTML code from the previous step. Click Save, and it’s done!
Steps 6 through 8 are completely optional, and necessary only when you want to leverage product-template and tags to embed the Firework widget onto your product pages.
(Optional) Step 6. Find where to add embed code in the product page
Next you’ll locate where in your HTML code of your product page the above code goes! Now go to your product page, and select Google Chrome’s Inspector view. Next, click on the arrow on the top left of the inspector view.
Then, as you hover your mouse over different parts of the product page, Chrome will automatically highlight the code specific to those parts. In the example below, the product is a cute cat, and we want to place the Firework embed code right below the cat picture. By selecting the picture, we can look at the HTML code displayed in the inspector view, and we can locate the appropriate div element to place the embed code in.
(Optional) Step 7. Finding the div element in the Shopify template
Next, you’ll need to locate this div element in the Shopify template. To do so, copy a section of the class tag (in the example below, copy “product-single_media” for example.
Now head on to your Shopify account’s product template folder, and select product.liquid (note: it is usually called product.liquid, but if you cannot find it, then it must have a different name in your account).
You typically never find the product’s code here, but instead find another file that renders the code, which is called product-template in this example.
Now head on to the Sections folder and select product-template.
In product-template, press control-F to bring up the search window, and type in the class section you had copied over in Step 5, in this example “product-single_media”. This will take you to the div element, at the end of which you want to insert the embed code. The embed code will need wrap around code that looks like this:
|
(Optional) Step 8. One last step to setup the playlist tag!
Now, go to your Shopify store’s Product folder, and select the product to which you want to add the Firework embed. From the embed code in Step 3, find the playlist ID, and append it to “fw-playlist-”. So if the playlist ID is 5z78rp, the tag is: fw-playlist-5z78rp.
That’s it! Now if you go to your product page on the web, you will see the Firework carousel unit playing below the product thumbnail!
