Shopify Integration Guide

QuackChat on Shopify

Add the QuackChat widget to your Shopify store to provide instant customer support.

Quick Start (TL;DR)

1. Go to Online Store > Themes > Edit code
2. Open theme.liquid
3. Paste the widget code before </body>
4. Save

Prerequisites

• Shopify admin access
• Bot ID from your QuackChat dashboard

Step-by-Step Installation

Option A: Theme.liquid (Recommended)

1. From your Shopify admin, go to Online Store > Themes
2. Click Actions > Edit code on your current theme
3. In the left sidebar, find and click theme.liquid (under Layout)
4. Find the closing </body> tag near the bottom
5. Paste the widget code just before </body>:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
></script>
</body>

6. Click Save

Option B: Theme App Extension (Dawn 2.0+ themes)

For Online Store 2.0 themes, you can use a custom Liquid section:

1. Go to Online Store > Themes > Edit code
2. Under Sections, click Add a new section
3. Name it quackchat-widget and paste:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="{{ section.settings.bot_id }}"
></script>

{% schema %}
{
  "name": "QuackChat Widget",
  "settings": [
    {
      "type": "text",
      "id": "bot_id",
      "label": "Bot ID",
      "info": "Your QuackChat bot ID"
    }
  ]
}
{% endschema %}

4. Save, then go to Customize your theme
5. Add the QuackChat Widget section
6. Enter your Bot ID in the settings

Platform-Specific Customization

Show only on certain pages

Use Liquid conditionals to show the widget on specific pages:

{% if template == 'product' or template == 'collection' %}
<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
></script>
{% endif %}

Hide on checkout pages

Checkout pages use a different template. The widget won't appear there by default since checkout doesn't include theme.liquid.

Pass customer data

You can pass customer context to personalize responses:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  {% if customer %}
  data-welcome-message="Welcome back, {{ customer.first_name }}! How can I help?"
  {% endif %}
></script>

Verification

Quick test:

1. Preview your theme or visit your store
2. Look for the chat bubble in the bottom-right corner
3. Click to open and send a test message

Troubleshooting

Widget doesn't appear in theme preview

Cause: Theme preview may cache aggressively.

Solution: View your live store or use an incognito window.

App conflicts

Cause: Other chat apps (Tidio, Gorgias, Zendesk) may conflict.

Solution: Uninstall or disable other chat apps.

Widget appears twice

Cause: Code added multiple times or in multiple locations.

Solution: Search your theme for "quackchat" and remove duplicates.

Testing in Shopify

// Check if widget loaded
console.log(typeof QuackChatWidget); // Should output: "object"

// Test the widget
QuackChatWidget.open();

Performance

• Widget loads asynchronously (won't affect page speed scores)
• ~12KB gzipped bundle
• No impact on Core Web Vitals

Known Limitations

• Widget won't appear on Shopify checkout pages (Shopify limitation)
• Checkout integration requires Shopify's Checkout Extensibility (checkout.liquid is deprecated)