Shopify websites

ℹ️

Pre-Requisites

You need to be an Admin on your Shopify account to set up Toplyne's Pixel on the website

1. Install Custom Pixel

1. Go into Settings in Shopify admin. In the left navigation go into Customer events

   

2. Click on Add custom pixel button

   

3. Enter a pixel name (Example: Toplyne Pixel)

   

4. Copy the code snippet from your Toplyne dashboard and paste it as shown in the next step

   JavaScript

   !function(e,t,l,n){e.tl=e.tl||function(...t){(e.tl.queue=e.tl.queue||[]).push(t)};let s=t.createElement(l);s.src=n;let o=t.getElementsByTagName(l)[0];o.parentNode.insertBefore(s,o)}(window,document,"script","https://toplyne-sdk.toplyne.io/shopify.js");
   
   tl('init', browser, init, '<API Token>');
   
   analytics.subscribe("all_events", event => tl('track', event, browser, init));
   

5. Paste the above code in the Code section and then click Save

   

6. Click on Connect and you are done

   

7. In Customer events section, the custom pixel should be visible with Connected status

   

Once this is done, proceed to install Javascript SDK on Shopify

2. Install SDK

1. Go into Online Store > Themes in Shopify admin

   

2. Click on 3 dots next to Customise button and then click on Edit code

   

3. Click on </> theme.liquid on the left hand panel

   

4. Find the body tag

   

5. Copy the SDK code snippet from your Toplyne dashboard

   JavaScript

   <script src="https://toplyne-sdk.toplyne.io/index.js?token=<APIKey>" defer></script>
   

6. Paste the copied code snippet before the end of body tag

   

7. Save the changes

Once this is done, proceed to add the script on order status page

3. Add script on Order Status Page

1. Go into Settings in Shopify admin. In the left navigation go into Checkout

   

2. Scroll down and look for Order status page additional scripts. In that section, look for Additional scripts input box

   

3. Copy the script code from your Toplyne dashboard

   JavaScript

   <script src="https://toplyne-sdk.toplyne.io/index.js?token=<APIKey>" defer></script>
   

4. Add the Toplyne script on a new line at the end of the input box

   

5. Click on Save button