Skip to main content

Shopify Integration

Learn how to integrate ChatMaven with your Shopify store to provide AI-powered customer support and shopping assistance.

Overview​

Features​

  • Product recommendations
  • Order tracking
  • Shopping cart assistance
  • Inventory queries
  • Customer support
  • Sales optimization

Installation​

App Installation​

  1. Shopify App Store

    • Visit Shopify App Store
    • Search for "ChatMaven"
    • Click "Add app"
    • Follow installation steps

  2. Manual Setup

    <!-- Add to theme.liquid -->
    {% if content_for_header contains 'chatmaven' %}
      {{ 'chatmaven.js' | asset_url | script_tag }}
    {% endif %}

Configuration​

  1. API Setup

    • Get API key from ChatMaven
    • Configure store settings
    • Set up bot preferences
    • Enable features

  2. Basic Settings

    // Example configuration
    const chatmavenConfig = {
      apiKey: 'YOUR_API_KEY',
      shopifyStore: 'your-store.myshopify.com',
      features: ['products', 'orders', 'support']
    };

Widget Setup​

Placement​

  1. Global Integration

    <!-- Add to theme.liquid before </body> -->
    {% include 'chatmaven-widget' %}

  2. Conditional Display

    {% if template == 'product' or template == 'cart' %}
      {% include 'chatmaven-widget' with 
        position: 'bottom-right',
        theme: 'light'
      %}
    {% endif %}

Customization​

  1. Visual Settings

    /* Custom styles */
    .chatmaven-widget {
      --cm-primary: {{ settings.primary_color }};
      --cm-text: {{ settings.text_color }};
      --cm-background: {{ settings.background_color }};
    }

  2. Behavior Settings

    // Widget configuration
    window.chatmavenConfig = {
      autoOpen: false,
      productContext: true,
      cartIntegration: true,
      customerSupport: true
    };

Product Integration​

Product Context​

// Add product information
document.addEventListener('chatmaven:ready', () => {
  if (meta.product) {
    ChatMaven.setContext('product', {
      id: meta.product.id,
      title: meta.product.title,
      price: meta.product.price,
      variants: meta.product.variants
    });
  }
});

Shopping Cart​

// Cart integration
ChatMaven.on('cart:update', async (action) => {
  switch (action.type) {
    case 'add':
      await fetch('/cart/add.js', {
        method: 'POST',
        body: JSON.stringify(action.variant)
      });
      break;
    case 'remove':
      await fetch('/cart/change.js', {
        method: 'POST',
        body: JSON.stringify({
          id: action.variant,
          quantity: 0
        })
      });
      break;
  }
});

Order Management​

Order Tracking​

// Track order status
ChatMaven.on('order:track', async (orderNumber) => {
  const order = await fetch(`/orders/${orderNumber}.json`);
  return {
    status: order.fulfillment_status,
    tracking: order.tracking_number,
    estimated_delivery: order.estimated_delivery_at
  };
});

Order Updates​

// Listen for order updates
window.addEventListener('shopify:order_status', (event) => {
  ChatMaven.track('order_updated', {
    order_id: event.detail.id,
    status: event.detail.status
  });
});

Customer Support​

Customer Context​

// Add customer information
{% if customer %}
  ChatMaven.setCustomer({
    id: {{ customer.id | json }},
    email: {{ customer.email | json }},
    name: {{ customer.name | json }},
    orders_count: {{ customer.orders_count | json }}
  });
{% endif %}

Support Routing​

// Configure support routing
ChatMaven.configure('support', {
  departments: {
    orders: {
      priority: 'high',
      assignTo: 'order-support'
    },
    products: {
      priority: 'medium',
      assignTo: 'product-specialist'
    },
    general: {
      priority: 'normal',
      assignTo: 'customer-service'
    }
  }
});

Advanced Features​

Product Recommendations​

// Enable product recommendations
ChatMaven.enableFeature('recommendations', {
  maxItems: 3,
  algorithm: 'similar',
  filters: {
    inStock: true,
    maxPrice: 1000
  }
});

Inventory Queries​

// Check product availability
ChatMaven.on('inventory:check', async (productId) => {
  const response = await fetch(`/products/${productId}/inventory.json`);
  const inventory = await response.json();
  return {
    available: inventory.available,
    quantity: inventory.quantity,
    nextRestock: inventory.next_restock_date
  };
});

Analytics​

Sales Tracking​

// Track sales events
document.addEventListener('shopify:payment_complete', (event) => {
  ChatMaven.track('sale_completed', {
    order_id: event.detail.order_id,
    value: event.detail.total_price,
    currency: event.detail.currency
  });
});

Performance Metrics​

// Monitor performance
ChatMaven.analytics.monitor({
  metrics: [
    'conversation_rate',
    'average_order_value',
    'support_resolution_time',
    'customer_satisfaction'
  ],
  period: 'daily'
});

Best Practices​

Performance​

  1. Optimization

    // Lazy load features
    ChatMaven.loadFeature('recommendations', {
      defer: true,
      timeout: 3000
    });

  2. Error Handling

    ChatMaven.on('error', (error) => {
      console.error('[ChatMaven]', error);
      if (error.critical) {
        notifyAdmin(error);
      }
    });

Security​

  1. Data Protection

    // Configure security settings
    ChatMaven.security.configure({
      maskCreditCard: true,
      maskEmail: true,
      encryptCustomerData: true
    });

  2. Access Control

    // Set permissions
    ChatMaven.setPermissions({
      orders: ['view', 'track'],
      cart: ['view', 'modify'],
      customer: ['view']
    });

Troubleshooting​

Common Issues​

  1. Installation Problems

    • Verify API key
    • Check theme compatibility
    • Clear cache
    • Review console errors

  2. Integration Issues

    // Debug mode
    ChatMaven.debug(true);
    ChatMaven.on('debug', (info) => {
      console.log('[Debug]', info);
    });

Next Steps​

FAQ and troubleshooting​

The chat widget does not show in my theme.​

Confirm the ChatMaven snippet or app embed is enabled in Online Store → Themes → Customize (or your theme’s app embed blocks). Clear theme cache and preview in an incognito window.

Orders or customer data do not sync as expected.​

Check API scopes granted to the ChatMaven app in Shopify and that you installed the app on the correct store. Private apps and headless storefronts may need alternate wiring.

Can I use ChatMaven on Shopify Plus only?​

Integration availability can depend on Shopify features and your ChatMaven plan. If something is greyed out, contact support with your store URL and plan name.