Installing Nobi For Shopify Stores

Nobi can work with any ecommerce store, and has additional native support for stores on Shopify. By default, Nobi will work on any Shopify store that has a public feed, and it relies on two Shopify features to work properly:

Product catalog: By default, Nobi pulls your public product catalog from <your_stores_url>/collections/all/products.json

Custom pixels for event tracking: Shopify has built in event tracking for key conversion events like add to cart, checkout, etc. Nobi can plug into these events as a custom pixel for the purpose of tracking Nobi’s performance.

Add Nobi’s script to your site’s theme

To use Nobi’s custom elements, you’ll need to install Nobi’s script to your site’s theme using the instructions below:

Click the overflow menu next to the “Customize” button, then click on “Edit Code”

When the next page loads, ensure that “theme.liquid” is selected in the sidebar

Copy and paste the following code on a new line, right before the </head> tag, then save your template and set it live (make sure to update your account id accordingly):


<script async src="https://assistant-script.nobi.ai/nobi.bundle.js" onload="window.Nobi.initialize({ accountId: 'NOBI_PROVIDED_MERCHANT_ID' });"></script>

Setting up Nobi’s custom pixel

In order for Nobi to be able to attribute how many add to carts, conversions, etc. are driven by Nobi, we need to be able to tie purchases to searches. We do this by tracking events from the same visitor. To let us track events that are not within Nobi’s UX elements, we can use Shopify’s custom pixels and built-in analytics.

All you’ll need to do is set up Nobi as a custom pixel using the following steps:

Navigate to your site settings and then click on “Customer events”.

Click on “Add custom pixel”

Name the new custom pixel anything you’d like, we recommend “Nobi”

Add code to the custom pixel

For “Customer privacy”, select the “Not required” permission. Then enter the following code into the “Code” textbox:


const accountId = 'NOBI_PROVIDED_MERCHANT_ID';
const script = document.createElement('script');
script.src = 'https://assistant-script.nobi.ai/nobi.bundle.js';
script.async = true;
script.onload = () => {
    window.Nobi.subscribeToShopifyEvents(accountId, analytics);
};
document.head.appendChild(script);

This script will send events to Nobi so we can help track incremental improvements in conversion rates, AOVs, etc. if you’d like us to help with your A/B testing. It’s additionally required for any customers who use Nobi’s smart product recommendations for their checkout cart.

⚠️ Make sure you replace the placeholder with your actual merchant ID before testing or going live

Additional instructions for merchants with more than 25,000 products or advanced metadata

By default, Nobi pulls Shopify product catalogs from your store’s public product feed, however, that feed is limited to only 25,000 products. If you’re a Shopify store and you have more than that, you can follow the steps below to provide access to your product catalog to Nobi.

Step 1: Log in to your Shopify account and navigate to Apps, then click on Develop apps

Step 2: Click on Build apps in Dev Dashboard

Step 3: Click on Create App.

Step 4: Type a new name into the panel labeled “Start from Dev Dashboard”. You can provide any name you like. We recommend using something descriptive like “Nobi Storefront API Access”. For “App developer”, you can select anyone on your team, this will not be used going forward (if you’d prefer, we can join as collaborators and you can select someone on our team instead).

Step 5: Click on Select Scopes in the Access section

Step 6: Select the following permissions:

read_products

read_inventory

Step 7: Click Release

Step 8: Click Release again

Step 9: Close the resulting modal, then click on your new app’s name in the top left of the sidebar

Step 10: Click on Install App in the top right

Step 11: Select the store you need to install into

Step 12: Click the Install button

Step 13: Click on Settings

Step 14: Click on Apps, then click on Develop Apps one more time

Step 15: Click on Build apps in Dev Dashboard one more time

Step 16: Click on the new app you just created

Step 17: Click on Settings

Step 18: Note the values for Client ID and Secret that you see on the screen

Step 19: Open a new browser tab and go to https://dashboard.nobi.ai/account/installation. Scroll down to the bottom of the page and copy/paste the client ID and client secrets into the appropriate spots and then click the save button.

Installing Nobi For Shopify Stores Add Nobi’s script to your site’s theme Setting up Nobi’s custom pixel Additional instructions for merchants with more than 25,000 products or advanced metadata