Shopify Integration

Nhi Luong Updated by Nhi Luong

Chat Widget

Login to WATI, access the Integration page, click the "Shopify" icon.

Upon clicking, the user will need to provide Shopify App domain and click "Install"

After install, the default value of the Live Chat button is "Disable". We need to click "Enable" to enable it.

After enabling, the system displays two parts: WhatsApp Chat and Automated Message

WhatsApp Chat: "Chat Button Settings" and "Chat Widget settings"

Chat Button Settings: We can setup the GUI of the button which will display on our Shopify page, including:

  • Color (select color or input code)
  • Text display. Eg: Chat with us
  • Border Radius. For eg if it's 0, the button is in rectangle shape. If it >0, it's changing to an ellipse shape.

Chat Widget settings: We can setup the GUI of the chat widget (when users click in chat button), including:

  • Brand Name
  • Brand Sub Title
  • Phone Number
  • Brand Image
  • Welcome Text
  • Background Color
  • CTA Text
  • Border Radius(px)
  • Open widget by default: True/False. If we choose True, when customers go to our shop, the chat widget will auto-open by default, customer doesn't need to click the Chat button.

After finishing the setup, go back to the store and refresh the page, we will see the chat button and chat widget (when we click the button)

When a customer starts a chat and sends a question, the question will be sent to WATI (if the WhatsApp number is integrated to Wati) or to that WhatsApp number directly.

Automated Message: This feature allow the user to trigger some automated messages in each event:

  • Collect WhatsApp opt-in from Checkout Page: read and follow the instruction when clicking the button:

Below are some messages that will be triggered automatically for each event.

There already have the default template that we can use as below:

Message

Default template

Abandoned Recovery Message

shopify_default_abandoned_recovery_v4

Order completed/confirmation

shopify_default_order_complete_v4

Order fulfilled

shopify_default_order_fulfilled_v4

Follow up after Purchase

shopify_default_follow_up_v4

Return and exchange request

shopify_default_refund_v4

If the user integrates WATI with Shopify and decides to continue with WATI, you can also create a new beautiful template with your own content and pull it out automatically.

Note that in order for the template to be displayed in Shopify, the template category should be "Shipping Update".

Abandoned Recovery Message: When we click "Enable", the setting will be displayed, User can select the template, the time to be sent (after the event happens). In this step we can also tick to include a discount coupon with discount type is % or fixed discount with code.

Order completed/confirmation: When we click "Enable", the setting will be displayed, User can select a template and include a discount coupon

Order fulfilled: When we click "Enable", the setting will be displayed, User can select the template

Follow up after Purchase: When we click "Enable", the setting will be displayed, User can select the template, the time to be sent (after the event happens). In this step we can also tick to include a discount coupon with discount type is % or fixed discount with code.

Return and exchange request: When we click "Enable", the setting will be displayed, User can select a template

How did we do?

Integromat Integration

WooCommerce Integration

Contact