Shopify is an E-Commerce platform that provides tools to help online sellers run their businesses.
FullStory can easily be set up on most Shopify themes by following the steps below. Once installed, you can use FullStory to play back user sessions, build conversion funnels, and gain new insights into how your customers navigate your store.
Installation
- Log in to your Shopify account, and open your admin panel.
- Select “Online Store” under the “Sales Channels” section of the admin panel.
- On the “Themes” section of the panel, click the Actions button in the upper right-hand corner of the page to reveal a dropdown.
- Click “Edit code”.
- Click “theme.liquid” under the “Layout” section.*
- Paste your FullStory data capture snippet (learn how to find it here) into the <head> of the theme.
* If you’re using a custom theme, it’s possible that the theme file has a name other than "theme.liquid". Check with the theme’s developer to verify.
Adding your data capture snippet to your checkout flow
Basic Shopify, Shopify and Advanced Shopify merchants do not have access to modify the checkout flow. This flow will not be captured in your sessions. As a workaround, we recommend adding a /thank-you page after your checkout flow to see whether users make it all the way through your checkout flow.
Shopify Plus merchants can add your data capture snippet directly to your checkout.liquid
file. After doing so, newly indexed sessions should contain your entire checkout flow.
Note: Shopify will be deprecating this method as of August 13, 2024. FullStory is working on supporting the new checkout extensibility. In the meantime, you can continue to use the workaround mentioned above.
Adding your data capture snippet to your Order Status page
Basic Shopify, Shopify and Advanced Shopify merchants can add your data capture snippet to your Order Status page by including it in your Additional Scripts section under Settings > Checkout. You can add the snippet in the Checkout settings of your store.
The below sample code can be copied into the additional scripts field. (Be sure to update your org ID from the default text when implementing.) This script will load FullStory on the Order Status page and fire a custom event when the page is loaded so you have visibility into customers that reach the end of the checkout flow.
<script> window['_fs_host'] = 'fullstory.com'; window['_fs_script'] = 'edge.fullstory.com/s/fs.js'; window['_fs_org'] = '{{YOUR_ORG_ID}}'; window['_fs_namespace'] = 'FS'; (function(m,n,e,t,l,o,g,y){ if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;} g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[]; o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script; y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y); g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)}; g.anonymize=function(){g.identify(!!0)}; g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)}; g.log = function(a,b){g("log",[a,b])}; g.consent=function(a){g("consent",!arguments.length||a)}; g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)}; g.clearUserCookie=function(){}; g.setVars=function(n, p){g('setVars',[n,p]);}; g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y]; if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)}; g._v="1.3.0"; })(window,document,window['_fs_namespace'],'script','user'); </script> <script> // Function to call FS.event when the page is loaded function sendFullStoryEvent() { function _fs() { return window[window['_fs_namespace']]; } // Check if FullStory is loaded and available if (typeof _fs() === 'function') { _fs().event('Shopify Order Status Page Viewed', { // You can include any additional event properties as key-value pairs // Example: 'property1': 'value1', 'property2': 'value2' },'shopify'); } } // Attach the sendFullStoryEvent function to the window load event if (window.addEventListener) { window.addEventListener('load', sendFullStoryEvent, false); } else if (window.attachEvent) { window.attachEvent('onload', sendFullStoryEvent); } </script>