Shopify Integration

Add ASKGPT to Your
Shopify Store

Add your AI chatbot to your Shopify storefront in minutes — no app required, no coding skills needed. Just paste one script tag.

All Shopify plans · Debut, Dawn, custom themes · No app needed
Method

How It Works

Shopify lets you add custom code to your theme's theme.liquid file (or via the Theme Editor). You paste one script tag — ASKGPT handles the rest. Works with all current themes including Dawn, Debut, and custom themes.

ℹ️
You need your Chatbot ID from the ASKGPT Dashboard (Dashboard → Your Chatbot → Customization → Widget Embed Code).
Installation Guide

Step-by-Step Setup

1
Open Your Shopify Theme Editor
Navigate to your theme code in the Shopify admin
  • 1. Log into your Shopify admin at your-store.myshopify.com/admin
  • 2. Go to Online Store → Themes
  • 3. Click the ⋯ (three dots) menu next to your active theme
  • 4. Select Edit code
💡
Alternatively, from the theme editor click Actions → Edit code.
2
Open theme.liquid
This is the main layout file loaded on every page
  • 1. In the left sidebar under Layout, click theme.liquid
  • 2. The file opens in the code editor on the right
  • 3. Use Ctrl+F (or Cmd+F on Mac) to search for </body>
  • 4. Place your cursor just before the closing </body> tag
⚠️
Don't paste inside <head> — the widget must be in <body> to load correctly.
3
Paste the ASKGPT Widget Script
Copy your embed code from the ASKGPT dashboard and paste it

Paste this snippet just before </body>, replacing YOUR_CHATBOT_ID with your actual ID from the dashboard:

Liquid / HTML
<!-- ASKGPT Chat Widget -->
<script
src="https://askgpt.asksol.pk/widget/widget.js"
data-client-id="YOUR_CHATBOT_ID"
data-api-url="https://n8n.asksol.pk/webhook/askgpt-chat"
data-title="AI Assistant"
data-color="#2563EB"
data-position="right"
data-icon="chat"></script>
<!-- /ASKGPT -->

Your exact embed code (with your real Chatbot ID already filled in) is available in Dashboard → Customization → Widget Embed Code.

✅
You can change data-color to match your Shopify theme's brand color — any hex code works (e.g. #008060 for Shopify green).
4
Save & Verify
Save changes and confirm the widget is live on your store
  • 1. Click Save in the top-right corner of the code editor
  • 2. Open your storefront in a new tab (or incognito window)
  • 3. Look for the chat button in the bottom-right corner
  • 4. Click it and send a test message — the bot should reply using your trained content
💡
If you don't see the widget, try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) and check the browser console for errors.
5
Optional: Limit to Specific Pages
Show the widget only on product pages, cart, or certain collections

Wrap the script in a Liquid if condition to control where it appears:

Liquid
<!-- Show only on product pages -->
{% if template == 'product' %}
<script src="..." data-client-id="..."></script>
{% endif %}
<!-- Other template values: 'index', 'collection', 'cart', 'page' -->
ℹ️
Common template values: product, collection, cart, index (homepage), page (static pages). Use template.name in Liquid OS 2.0 themes.
Troubleshooting

Common Issues

🙈
Widget doesn't appear on the store
  • ▸ Make sure you saved the theme.liquid file after pasting
  • ▸ Hard refresh the browser (Ctrl+Shift+R or Cmd+Shift+R)
  • ▸ Check that the script is before </body>, not inside <head>
  • ▸ Verify your Chatbot ID is correct — copy it fresh from the ASKGPT dashboard
💬
Widget opens but bot doesn't respond
  • ▸ Confirm your chatbot has been trained (at least one URL or file indexed)
  • ▸ Open browser DevTools → Console and look for network errors
  • ▸ Make sure your n8n webhook URL is active and publicly accessible
  • ▸ Test the webhook directly: open the API URL in a browser — it should respond
📱
Widget overlaps mobile navigation
  • ▸ Add data-bottom="80" to give more space from the bottom on mobile
  • ▸ Use data-position="left" if your theme has a sticky bottom bar on the right
  • ▸ The widget uses Shadow DOM — it won't conflict with your theme's CSS

Ready to Go Live on Shopify?

Create your ASKGPT account, train your bot with your product catalog, and have it live in minutes.

Start Free Trial → ← Back to Integrations