Skip to main content

Deploying the Noibu Script: Shopify

  • Updated

Noibu currently supports all Shopify Lite, Shopify Regular, and Shopify Plus stores. However, please note that if you wish to deploy Noibu in the checkout of your online store, this feature is exclusive to Shopify Plus sites.

Part 1: Deploying to the Main Site

  1. Navigate to the admin console for your store.
  2. Select Online Store and then click Themes.

  3. Open the menu next to the Customize button and select Edit code
  4.  On the theme.liquid file, add in the Noibu tag as shown below in between the <head> tags: 
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}

{% render 'meta-tags' %}

<script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
<script src="https://cdn.noibu.com/collect-core.js"></script>
{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

 

Part 2: Deploying to Checkout (Shopify Plus only)

You can deploy Noibu to a Shopify checkout in one of two ways: through the Liquid Checkout Script method, OR through the Enhanced Checkout Webpixel method. Note the former method may not be available to all Shopify customers, and all customers will be required by Shopify to switch over to the Enhanced Checkout module by August 2024.

Method 1 - Liquid Checkout Script 

As of 2023, the Liquid Checkout method has been deprecated by Shopify in favour of the Enhanced Checkout method. As a Shopify Plus customer, you may still have the option to retain the liquid checkout and deploy the Noibu script as normal.

If this option is still available, you can simply add the Noibu Tag on the "checkout.liquid" template file. 

<script src="https://cdn.noibu.com/collect-core.js"></script>

 

Method 2 - Enhanced Checkout Webpixel

Noibu's webpixel script will gather essential events from the Enhanced Checkout, allowing you to continue collecting the error and revenue loss information you've come to expect from our platform.

  1. Log into the Shopify admin console, and select Settings.

  2. Select Customer Events.



  3. Click Add Custom Pixel.



  4. Enter the name noibu-pixel, and paste in the code below: 
    (()=>{"use strict";class i{constructor(i){this.eventBuffer=[],this.isNoibuInitialized=!1,this.shopify=i}start(){this.listenShopifyEvents(),this.listenPingFromMainWindow(),this.pingMainWindow()}postMessageToMainWindow(i){i.type="noibuShopifyEvent",window.parent.postMessage(i,"*")}flushEventBuffer(){if(this.isNoibuInitialized)for(;this.eventBuffer.length>0;){const i=this.eventBuffer.shift();this.postMessageToMainWindow(i)}}pingMainWindow(){this.postMessageToMainWindow({payload:"ping"})}listenPingFromMainWindow(){window.addEventListener("message",(i=>{i.source===window.parent&&"ping"===i.data&&(this.isNoibuInitialized=!0,this.flushEventBuffer())}))}listenShopifyEvents(){this.shopify.analytics.subscribe("all_events",(i=>{this.eventBuffer.push({payload:i}),this.flushEventBuffer()}))}}(()=>{const t=api.init.context.document.location;if(t.pathname.toLowerCase().startsWith("/checkouts/")){window.noibuShopifyProxy={api};const i=document.createElement("script");i.setAttribute("src","https://cdn.noibu.com/collect-shopify.js?referer="+t.origin),document.head.append(i)}new i(api).start()})()})();
  5. Click Save.

  6. Click Connect, and Connect once again in the confirmation modal.

Deploying to the Shopify Order Status Page

  1. Deploy the Noibu script on the Order Confirmation page.
  2. Open the Settings page.
  3. Select Checkout, and scroll to the bottom.
  4. Under Order Status Page, add the Noibu script in the Additional Scripts field. This allows Noibu to track the completion of orders.

When installed properly, the Noibu pixel will activate on all checkout pages, where the general Noibu script may be blocked. Ensure you Deploy the NoibuJS Script before setting up the webpixel.

Deploying the Noibu script through a tag manager–like Google Tag Manager, Adobe Launch, or Tealium IQ–follows a different process.

Articles in this section