How to Add the PrimePilot AI Chat Widget to Your Shopify Store

Thousands of ecommerce stores run on Shopify - and most of them need a fast, intelligent way to answer customer questions without adding headcount. PrimePilot's floating chat widget gives your store an AI-powered assistant that can handle product questions, shipping queries, and support requests around the clock.

The good news: you do not need a Shopify app. PrimePilot integrates with any Shopify theme using a short JavaScript snippet, the same approach used on standard websites. This guide walks you through the full setup, from PrimePilot dashboard configuration to pasting code in your Shopify theme.

What You'll Need

Before you start, make sure you have:

• A PrimePilot account with at least one squad configured for customer support
• Admin access to your Shopify store (Online Store → Themes)
• Your store's public domain - either your custom domain (e.g. 'www.yourstore.com') or your '*.myshopify.com' address
• Roughly 10–15 minutes for first-time setup

Step 1: Prepare Your Squad in PrimePilot

Your chat widget is powered by a squad - a group of AI agents trained on your business knowledge. If you haven't created one yet, start with a customer service squad connected to a knowledge base containing your FAQs, product information, and policies.

Once your squad is ready:

1. Open the squad in your PrimePilot dashboard
2. Go to the API Key tab and assign an API key to the squad
3. Go to the Deployment tab - the integration code is only available after an API key is assigned

On the Deployment tab you can configure widget position ('bottom-right', 'bottom-left', etc.) and theme ('luxury', 'modern', 'minimal', or 'dark'). When you're happy with the settings, click Copy Code to copy your personalised embed snippet.

Step 2: Verify Your Shopify Domain

PrimePilot uses domain verification to ensure only your authorised websites can use your chat widget. This is a security step you must complete before the widget will work on your store.

1. In PrimePilot, go to Settings → Domains
2. Click Add Domain and enter the domain your customers visit:
   • Custom domain (recommended): enter your root domain, e.g. 'yourstore.com'. Once verified, all subdomains including 'www.yourstore.com' are automatically allowed.
   • Shopify subdomain only: enter 'yourstore.myshopify.com' if you haven't connected a custom domain yet.
3. Add the DNS TXT record PrimePilot provides to your domain's DNS settings
4. Click Verify once DNS has propagated (this can take a few minutes to a few hours)
5. Assign the verified domain to your squad

Tip for Shopify merchants: If your store uses a custom domain (most do), verify the root domain rather than 'www'. This covers both 'www.yourstore.com' and any other subdomains Shopify may use during checkout or preview.

Step 3: Add the Widget to Your Shopify Theme

There are two common ways to add the PrimePilot snippet to a Shopify store. Choose the method that matches your comfort level.

Method A: Theme Code Editor (Recommended)

This installs the widget on every page of your store.

1. In Shopify admin, go to Online Store → Themes
2. On your live theme, click ⋯ → Edit code
3. In the Layout folder, open 'theme.liquid'
4. Scroll to the bottom and find the closing '' tag
5. Paste your PrimePilot integration code immediately before ''

Your code will look like this (with your actual squad ID and API key from the Deployment tab):

<script src="https://embed.primepilot.ai/chat-widget.js"></script>
<script>
  PrimePilotChat.init({
    squadId: 'your-squad-id',
    apiKey: 'your-api-key',
    position: 'bottom-right',
    theme: 'luxury'
  });
</script>

6. Click Save 7. Visit your storefront and confirm the chat button appears in the corner

Method B: Custom Liquid Block (No Code Editor)

If you prefer not to edit theme files directly, Online Store 2.0 themes support Custom Liquid sections.

1. Go to Online Store → Themes → Customize
2. Navigate to a page where you want the widget (or use a global section if your theme supports it)
3. Click Add section → Custom Liquid
4. Paste the same integration code from the Deployment tab
5. Save and publish

Note: Method B may only show the widget on pages where the section is added. For store-wide coverage, Method A is more reliable.

Step 4: Choose Floating or Inline Widget

PrimePilot offers two embed styles. Most Shopify stores use the floating widget, but inline is useful on specific pages.

Floating Widget (Default)

The floating widget appears as a chat button in the corner of every page. Shoppers click it to open a chat panel without leaving the page they are on. This is the best choice for general customer support across your entire store.

Inline Widget

The inline widget embeds the chat interface directly inside a page - ideal for a dedicated Support or Contact page, or a product page where contextual help adds value.

To use the inline widget, add a container div where you want the chat to appear, then include the inline script:

<!-- Add this where you want the chat to appear -->
<div id="primepilot-inline-chat"
     data-squad-id="your-squad-id"
     data-api-key="your-api-key"
     data-theme="luxury"
     data-height="500px"
     data-width="100%">
</div>

<!-- Add before </body> -->
<script src="https://embed.primepilot.ai/inline-chat-widget.js"></script>

On Shopify, create a page template or add the container div to a specific page's content via the theme editor.

Step 5: Test Your Integration

After saving your theme, verify everything works end to end:

1. Open your live storefront (not the theme preview URL if possible - use your public domain)
2. Confirm the chat button appears in the configured position
3. Click the button and send a test message
4. Check that your squad responds with accurate, on-brand answers
5. Test on mobile - the widget is responsive and should work on phones and tablets

If something isn't working, see the troubleshooting section below before contacting support.

Customisation Options

You can adjust the widget appearance from the squad Deployment tab without touching Shopify code:

After changing settings in PrimePilot, update the 'position' and 'theme' values in your Shopify snippet to match, then save the theme again.

For deeper customisation - brand colours, greeting messages, or behaviour on page load - explore your squad's Settings tab in the dashboard.

Troubleshooting Common Issues

The chat button doesn't appear

• Domain not verified: The most common cause. Confirm your domain is verified and assigned to the squad in Settings → Domains.
• Wrong domain registered: If customers visit 'www.yourstore.com' but you verified only 'yourstore.myshopify.com', requests will be blocked. Verify the domain that matches your public storefront URL.
• Script placement: Ensure the snippet is placed before '' in 'theme.liquid', not inside ''.
• Theme conflicts: Some themes load scripts asynchronously in ways that interfere with third-party widgets. Try moving the PrimePilot snippet to the very last lines before ''.

The button appears but chat doesn't load

• Invalid API key: Confirm the API key in your snippet matches the key assigned to the squad.
• Squad not configured: Make sure the squad has agents and knowledge sources attached, not just an empty shell.
• Browser console errors: Open your browser's developer tools (F12) and check the Console tab for error messages from PrimePilot.

Widget works on desktop but not mobile

• Check whether your theme hides third-party scripts on mobile via CSS or conditional loading.
• Test in an incognito/private window to rule out browser extensions blocking the widget.

Changes in PrimePilot aren't reflected on Shopify

The embed snippet on Shopify is static - if you change your squad ID or API key in PrimePilot, you must update the code in your theme and save again.

Shopify Checkout and Other Pages

The floating widget installed via 'theme.liquid' covers your main storefront pages - home, collections, products, cart, and standard pages. It does not automatically appear on:

• Shopify Checkout (requires Shopify Plus for checkout customisation)
• Order status / thank-you pages (unless your theme includes them in the standard layout)

For most merchants, covering the browsing and pre-purchase experience is sufficient. If you need AI assistance on checkout or post-purchase pages, contact the PrimePilot team to discuss Custom AI Solutions.

Do You Need a Shopify App?

No. The script-tag integration described in this guide is all that is required for a fully functional AI chat widget on your Shopify store.

A dedicated Shopify app (with one-click install and theme app embeds) is on our roadmap and would simplify setup for non-technical store owners. Until then, the theme code approach takes about five minutes and gives you full control.

Next Steps

Once your widget is live:

• Monitor conversations in your PrimePilot dashboard to see what customers ask and where your knowledge base has gaps
• Expand your knowledge base with product catalogues, sizing guides, and return policies so the AI gives accurate answers
• Connect listeners for email or webhook triggers if you want the squad to respond beyond the website widget - see Listeners for options

Adding AI chat to a Shopify store doesn't require a developer or a paid Shopify app. With domain verification, a copied snippet, and a few minutes in the theme editor, your store can offer intelligent, always-on customer support powered by PrimePilot.

Need help with a more complex setup - product-aware chat, order lookup, or a fully branded experience? Get in touch and our team can walk you through Custom AI Solutions tailored to your store.