Shopify

Add an AI Chatbot to your store in less than 5 minutes

Providing timely responses to your eCommerce website is key to gaining trust and making more sales online.

You can embed the Userdesk AI Chatbot to your Shopify store, to reply to the questions of your users, even on your products!

Train the AI Chatbot on your store

All Shopify stores automatically generate a sitemap.xml file that contains links to all your products, primary product images, pages, collections, and blog posts.

You can find your sitemap in the root directory of your Shopify store's domains, such as johns-apparel.com/sitemap.xml.

Add the sitemap URL to Userdesk and train your Chatbot on it. The AI will retrieve the information of your products, and automatically reply to the questions of your visitors.

Orders status

The Chatbot widget of Userdesk provides a special integration with your Shopify store.

It automatically retrieves the status of the orders, so that they are available to your users in the support chat.

How to add the AI Chatbot bubble to your e-commerce store website

To add the AI Chatbot bubble widget to your Shopify store follow these instructions:

  • Select your store

  • Click on Online Store

  • Click on Themes

  • Click on the Customize button on your current theme

  • Click on the three dots at the top of the page and click Edit code

Now you need to find a theme file that is used on every page, usually, it is called index.liquid

Click on the file name and paste this code.

<script 
	async 
	src="https://d3kno6bpmj270m.cloudfront.net/widget/userdesk.js" 
	data-userdesk="your_chatbot_id">
</script>

<script>
    window.userdeskShopifyCustomer = { "has_account": {{ customer.has_account }}, "email": "{{ customer.email }}"};
    window.userdeskOrders = [];
      {% for order in customer.orders -%}
        userdeskOrders.push({ 
          "order_status_url": "{{order.order_status_url}}",
          "fulfillment_status_label": "{{order.fulfillment_status_label}}",
          "order_name": "{{order.name}}",
          "total_price": "{{ order.total_price }}",
          "items_size": {{order.line_items.size}},
          "line_items": [
            {% for line_item in order.line_items -%}
            {
              "tracking_company": "{{line_item.fulfillment.tracking_company}}",
              "tracking_number": "{{line_item.fulfillment.tracking_number}}",
              "tracking_url": "{{line_item.fulfillment.tracking_url}}",
              "item_count": "{{line_item.fulfillment.item_count}}",
              "product_description": "{{line_item.product.description}}",
              "product_title": "{{line_item.product.title}}",
              "featured_image": "{{line_item.product.featured_image | img_url: '120x' }}",
              "product_images": [
                {% for image in line_item.product.images -%}
                  {
                    "preview_image": "{{image.preview_image | img_url: '120x' }}",
                    "src": "{{image.src  | img_url: '120x' }}",
                    "aspect_ratio": "{{image.aspect_ratio}}"
                  }{%- if forloop.last == false -%},{%- endif -%}
                {%- endfor %}
              ],
              "url": "{{line_item.url}}",
              "title": "{{line_item.title}}"
            }{%- if forloop.last == false -%},{%- endif -%}
            {%- endfor %}
          ]
        });
      {%- endfor %}
</script>

Remember to replace your_chatbot_id with the ID of your Chatbot. You can take it from the Embed section of your Chatbot on Userdesk.

Finally, click on Save Your Shopify store is now configured with an AI Chatbot 🎉 If you have any issues adding Userdesk to your Shopify Store, feel free to reach out to us at support@userdesk.io

Last updated