Skip to content

Shopify Integration

Deploy AI-powered customer support directly on your Shopify store with our native integration.

5-Minute Setup

  1. Install from Shopify App Store
  2. Select your assistant
  3. Toggle widget ON
  4. Done! Your chatbot is live.

What You Get

Native Widget

A customizable chat widget that appears on your store, matching your brand.

Seamless Setup

Install from the Shopify App Store and configure within your Shopify admin.

E-commerce Features

Assistants optimized for product questions, order inquiries, and shopping assistance.

Unified Management

All Shopify conversations appear in your Functional AI dashboard.

Quick Start

  1. Install the app from Shopify App Store
  2. Configure settings in Shopify admin
  3. Customize the widget to match your brand
  4. Go live!

Features

Product Intelligence

Your assistant can help customers: - Find products matching their needs - Compare product options - Answer product questions

Order Support

Handle common inquiries: - Shipping information - Return policies - Order status (with appropriate setup)

Always-On Support

24/7 customer assistance without additional staffing.

Appearance Sync

Widget customizations sync automatically from your Functional AI dashboard.

Requirements

Requirement Details
Shopify plan Any plan (Basic and above)
Account type Store owner or staff with app permissions
Functional AI Active account with configured assistant

How It Works

The Embedded App Experience

Functional AI is a Shopify Embedded App, which means it runs directly inside your Shopify admin panel. This provides several benefits:

  • Seamless Integration: No need to switch between different websites
  • Single Sign-On: Use your Shopify credentials to access settings
  • Native Feel: Looks and feels like a built-in Shopify feature
  • Secure: All authentication is handled by Shopify's secure infrastructure
How the integration works

Architecture:

graph TB
    A[Customer on Store] -->|Sees widget| B[Chat Widget]
    B -->|Sends message| C[Functional AI API]
    C -->|Processes with| D[AI Assistant]
    D -->|Returns response| C
    C -->|Sends reply| B
    C -->|Stores conversation| E[Dashboard]

    F[Store Owner] -->|Configures via| G[Shopify Admin]
    G -->|Embedded app| H[Preferences Panel]
    H -->|Updates settings| C

    style G fill:#95bf47
    style B fill:#7ab55c

Message Flow: Customer visits → Widget appears → Question asked → AI responds → Saved to dashboard

How the Widget Loads

The widget is delivered through Shopify's App Embeds system:

  1. Theme Integration: Widget code is automatically injected by Shopify
  2. Lazy Loading: Loads only when needed for optimal performance
  3. Configuration Sync: Settings from your dashboard apply automatically
  4. Real-time Updates: Changes appear without republishing your theme

Best Practices

Optimize for E-commerce

When creating your assistant for Shopify:

  1. Set Use Case to "ECOMMERCE"
  2. Include product-specific instructions
  3. Add your product catalog to a knowledge base
  4. Include shipping/return policies

Example Instructions

You are a friendly shopping assistant for [Store Name].

Help customers:
- Find products that match their needs
- Answer questions about products, sizing, and features
- Explain our shipping options and return policy
- Provide support for common order issues

Tone: Friendly, helpful, enthusiastic about our products

When you don't know something:
- Suggest the customer contact support@example.com
- Provide our customer service hours: Mon-Fri 9-5

Never:
- Make promises about specific delivery dates
- Discuss competitor products
- Share internal business information

Understanding Shopify App Embeds

What Are App Embeds?

App Embeds are Shopify's official way for apps to add widgets to your store without modifying theme code directly. This is safer and more maintainable than custom code.

Benefits: - No theme code editing required - Works with any Shopify theme - Easy to enable/disable - Survives theme changes - Clean uninstallation

Two-Step Activation

For the widget to appear, both settings must be enabled:

Setting Location What to Enable Why
Shopify Theme Editor "Chatbot widget" app embed Allows the app to load on your store
Functional AI Preferences Widget visibility toggle Controls whether widget is shown

Think of it Like Lights

  • App Embed = Power switch on the wall (must be ON)
  • Widget Toggle = Light dimmer (controls visibility)
  • Both must be ON for the widget to appear

Finding App Embeds

  1. Go to Shopify Admin
  2. Navigate to Online Store > Themes
  3. Click Customize on your active theme
  4. In the left sidebar, look for App embeds section
  5. Find Chatbot widget and toggle it ON
  6. Click Save

Troubleshooting

Quick Diagnostics

Problem Check Fix
Widget not appearing App embed enabled? Widget toggle ON? Enable in Theme Editor and Preferences
No response Assistant selected? Assistant public? Select and make public
Looks wrong Appearance settings Customize in dashboard > Appearance
Detailed troubleshooting steps

Widget Not Appearing:

  • App installed in Shopify Admin > Apps
  • App embed enabled in Theme Editor
  • Widget toggle ON in Functional AI preferences
  • Assistant selected and public
  • Test in incognito mode

Assistant Not Responding:

  1. Verify assistant selected in Preferences
  2. Check assistant is public in main dashboard
  3. Test assistant in Chat interface
  4. Review account status and tier limits

Styling Issues:

  • Customize in Assistants > Appearance (syncs automatically)
  • Check for theme CSS conflicts (z-index issues)
  • Test on actual mobile devices

See Configuration for more details.

Guides

Guide Description
Installation Step-by-step installation
Configuration Settings and options
Widget Customization Appearance and branding

Next Steps