Installing Nobi For Shopify Stores

Installing Nobi For Shopify Stores

1. Product catalog: By default, Nobi imports products from your store’s public product feed at /collections/all/products.json.
2. 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.

Install Nobi's Shopify app with private access

1. Set up your Nobi account and find your merchant ID

1. Create a Nobi account, or sign in to your existing account.
2. Select the correct store, connect your catalog and wait for the initial sync. Add the website pages you want shoppers to find.
3. Open Website UX → Install. Copy the merchant ID shown for that store. Use this same ID in every Nobi block on its theme.
4. Before going live, confirm that your Nobi trial or plan is active for the store. Installing the Shopify app does not activate a Nobi plan.

2. Open your store-specific installation link and approve the app

1. Ask your Nobi team to enable Shopify theme-app access. Provide your store's myshopify.com domain so the installation is prepared for the correct store.
2. Open the private installation link supplied by Nobi. Sign in to the intended Shopify store with an account allowed to install apps and edit its theme.
3. Check the app name, store and access requested on Shopify's approval screen. If anything is unexpected or Shopify says the app is unavailable for that store, stop and contact Nobi.
4. Click Install. When installation finishes, the Nobi app's theme blocks become available in the theme editor.
5. If Nobi is already installed for this store, keep that installation and continue below. Do not uninstall it just to follow these steps.

3. Open an unpublished copy of your theme

1. In Shopify admin, go to Online Store → Themes.
2. Duplicate your current theme. Open the unpublished copy using Customize or Edit theme, depending on the label in your Shopify admin.
3. Confirm you are editing the unpublished copy before adding or hiding blocks. Keep your published theme unchanged until preview checks pass.

Add a Search bar and choose where its results appear

4. Add the Search bar block

1. In the unpublished theme editor, select the template and section where you want the bar.
2. Choose Add block → Apps in a section that accepts app blocks, or use Add section → Apps to place it in an Apps section.
3. Select Nobi's Search bar block.
4. Paste your Nobi merchant ID from Website UX → Install.
5. Under Show search results in, choose one of the options below. You can also adjust the placeholder, button label and compact or regular size.

Set up full-page Search results

5. Add the separate Search results block

1. In the unpublished theme editor's template selector, choose Search.
2. Choose Add section → Apps and select Nobi's Search results block.
3. Enter the same Nobi merchant ID used by your Search bar.
4. Adjust this block's font, colors, spacing, desktop and mobile columns, image shape and section headings. Unselected controls preserve the existing Nobi appearance; explicit overrides apply only to this block.
5. Hide the theme's previous search-results section so shoppers see one results grid. Preserve unrelated theme sections.

6. Connect an existing header only if needed

7. Preview, test and then publish

• Submit a search from the bar and confirm the chosen modal or page experience opens.
• With page results, check a new query, manual filters, Filter with AI, selected filters, clear filters, Show More Products and product links.
• Filter with AI takes a command and updates the grid without a chat reply.
• Check mobile layout and the expanded filter drawer.
• A fresh search visit or reload should not inherit filters from an earlier visit. Back and Forward can restore earlier results.

Troubleshooting and rollback

• No Nobi blocks in Apps: confirm the app is installed for the current store. Check a section that supports app blocks; the Search results block additionally requires the Search template.
• App is unavailable for this store: contact Nobi for the correct private access. Do not try another merchant's install link.
• Wrong or missing products: check the Nobi merchant ID and catalog-sync status for the selected store.
• Search opens the wrong experience: check that individual bar's results setting. A legacy header may instead use the optional Search page routing app embed.
• Keep the modal: choose Modal results on the new bar. If rolling back a full-page installation, restore the previous results section and disable the legacy routing embed if you enabled it.
• Remove these additions: remove the new blocks from the unpublished theme or restore your prior theme configuration. Preserve unrelated sections and other Nobi components.

Developer option: add Nobi’s script to your site’s theme

1. Log in to your Shopify account and navigate to your site’s theme



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



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



 
4. In your unpublished theme, paste the following code immediately before the closing </head> tag. Replace NOBI_PROVIDED_MERCHANT_ID with your merchant ID, save the unpublished theme and test its preview using step 7 above. Publish only when those checks pass.

<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

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



 
2. Click on “Add custom pixel”



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



 
4. Add code to the custom pixel
Under Customer privacy, configure Permission and Data sale for the data purposes and consent requirements of your store. For analytics that requires consent, choose Required and select the applicable purposes. Do not select Not required solely to make tracking work. See Shopify’s custom pixel privacy settings. 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);

5. Click Save, then Connect pixel. Review Shopify’s service requirements and connect only when your setup meets them. Confirm that the Nobi pixel is listed as Connected in Settings → Customer events.
6. Use Shopify’s pixel testing tools to verify the expected events with the applicable consent choices, then confirm that events reach your Nobi account. A saved but disconnected pixel does not track events. See Shopify’s pixel connection instructions.

Separate optional catalog access: more than 25,000 products or advanced metadata

• read_products
• read_inventory