It’s time to Shopify! Shopify is absolutely one of our favorite eCommerce platforms out there today. It’s brilliantly easy to use, immensely robust, and wonderfully accessible in terms of what you want to get out of your business. With Reamaze for Shopify you’ll be able to sync relevant customer data, perform actions like creating draft orders and processing refunds within customer conversations, and simply integrate our JavaScript Shoutbox Embed. We’ll also teach you some more advanced toggles so you can customize Reamaze to your heart’s content.
Installing the Re:amaze App for Shopify
Before you install the Re:amaze app for Shopify, you'll want to make sure you have a Re:amaze account that's ready to connect. You can sign up for a new account here. You're also welcome to create an account when you install the Re:amaze app.
From your Shopify dashboard, click on the "Apps" button on the left and head over to the Shopify app store.
Search for "Reamaze" or find our app in the "Customer Service" category.
Once you find the Reamaze app for Shopify, click the "Add app" button to either create a new Reamaze account or start the connection process with an existing account. If you already have a Reamaze account, we recommend logging in first.
You will be asked to verify the connection. Simply click "Yes" to proceed.
Once Reamaze is installed to your Shopify dashboard, you will see a verification and congratulations screen. You'll be able to select the brand you'd like to connect your store to, and can choose to immediately add the shoutbox or chat widget to your store!
Customizing and Publishing the Re:amaze Shoutbox
Customizing the Shoutbox to fit the look and feel of your store is very important. It gives customers a familiar experience whenever they interact with your brand. Before starting the customization process, you'll want to think about if there's a need to collect any additional data from the customer before they contact you. For example, Reamaze allows you to add custom text fields (for things like Order ID), dropdown selection fields (for things like selecting a request type), checkbox selection fields (for things like subscribing to your newsletter), and many more. To see a video tutorial on customizing the Shoutbox, click here.
To start customizing the Shoutbox, you'll need to head over the Reamaze Chat Widget Builder found in your Reamaze account's settings menu. You can go to Settings > Website Integrations > Chat Widgets and click "+ New Chat Widget".
You can create a new Shoutbox or Lightbox to add it to your storefront. Go through the customization options until you're happy with your Shoutbox's look and feel.
You can even provide an FAQ search and order status lookup function to your chat!
At the end of the builder, you'll be provided with the full javascript. Since you have a Shopify store connected, you can also utilize the "One Click Publishing" feature to allow Re:amaze to update your storefront automatically. No coding necessary!
Once your Chatbox has been published, you can find it, edit it, and/or unpublish it under the Chat Widgets feature inside your Re:amaze settings menu.
Managing Your Re:amaze Embed Scripts Manually
If you prefer not to use the One-click publishing option for Shopify, you can manage your Re:amaze scripts manually. You'll want to locate your website's theme template files. This is located under "Online Store", then under the "Actions" tab. Click on "Edit Code".
Click on "theme.liquid" to access the main template file. Next, you'll want to paste the script provided to you by the Embed Builder right above the </head> tag. Once you've pasted the script it should look something like the following. Make sure to click on "Save" once you're done.
Head on over to your store's website and verify that the new Shoutbox is appearing. Easy!
Note: You can also integrate Reamaze with Google Tag Manager (GTM) for easy auto-publishing of the Shoutbox. We recommend using either our native Shopify One Click Publishing OR Google Tag Manager auto publishing, but not both. GTM can also help make adding, deleting, and editing the Shoutbox much faster by skipping the copying and pasting part in theme.liquid.
Implementing Proactive Engagement with Re:amaze Cues
Proactive engagement is a keystone feature for many eCommerce businesses. Not only can you automatically engage customers who are browsing your store with coupons, deals, announcements, etc, you can also actively prevent shopping cart abandonment by inviting them to checkout if they're about to leave or invite them to chat about something specific. Here's an article about Cues itself.
NOTE: For a list of common Shopify Cue recipes, click here.
To add a new Cue, you'll need to head over to the Cue Builder found in your Reamaze account's settings menu from Settings > Website Integrations > Cues. Once there, you'll be about to name the Cue, create the content message, add call to action buttons, etc.
You can also define the rules and conditions under which the Cue will show up for customers. There are a variety of options here, including Shopify-specific rules, so we can encourage testing. You can add multiple rules to further specify which customers should see the Cue.
Once you've completed the Cue message and conditions, the last step of the builder will provide you with a script very much like the Shoutbox script you saw earlier. You may also use One Click Publishing to launch this Cue campaign to your store.
Cues can be viewed, edited, and/or unpublished from your Shopify store under the Cues menu.
Managing Your Re:amaze Cue Scripts Manually
Again, if you don't want to use the Shopify One Click Publishing option, you can manually add the Cue to your store. In the same "theme.liquid" HTML template where you have pasted the Shoutbox script, paste the Cue script right beneath it. Remember to click on "SAVE" when finished.
Once added, refresh your store website under a new window or incognito window to see the Cue.
Note: You can also integrate also integrate Reamaze Cues with Google Tag Manager for easy auto-publishing of Cues. This will help make adding, deleting, and editing Cues much faster by skipping the copying and pasting part in theme.liquid. To see how Google Tag Manager works with Cues, see this article.
Embedding Your Re:amaze FAQ Into Your Store
Having a self-service FAQ ensures customers can search for their own answers on their own time. Even if you're not available to answer questions in real time, the FAQ serves as a repository for most commonly asked questions. We encourage you to leverage Reamaze's included FAQ feature to deploy a highly customizable experience.
Here's an article on the different variations of the FAQ you can deploy. For this tutorial, we'll show you how to embed an inline FAQ into your store.
Start by creating an FAQ embed in your Re:amaze settings. Go to Settings > Website Integrations > Embedded FAQs and click "+ New Embedded FAQ". Add an internal facing name and click "Save".
Since the embedded FAQ is only applied to a single page on your storefront, you won't be able to use the One Click Publishing method here. We've provided the scripts for you to manually add the inline FAQ into your store.
In your Shopify admin, you can access the "Pages" tab in your dashboard under the "Online Store" tab. Most Shopify websites have a dedicated page for FAQs or About Us. If you don't yet have one, you can easily add a new page. Type out the content you want, but leave out the actual FAQ articles since you'll be adding those in your Reamaze account and then embedding them in the page.
In your Shopify FAQ page, click the <> icon to enter the HTML editor. Copy and paste the the scripts from the FAQ embed you had created in your Re:amaze account into the HTML editor. The inline FAQ will show up where you paste the <div>. Once you're done, click save.
You can now navigate to your website, click on the page you just created and you should see the Reamaze inline FAQ!
In addition to the embedded inline FAQ, customers can also access your help articles through the Shoutbox itself. If you like this format, you can follow the steps above for customizing the Shoutbox to have it show the FAQ first. This is known as the self service mode.
Shopify Customer Data and Re:amaze
Your Shopify customer data is automatically sent to Reamaze based on email matching. With the Reamaze app installed for your Shopify account, you'll immediately start seeing customer data on the right hand side of conversations whenever email addresses match.
To see how Shopify customer data works in Reamaze, we suggest the following articles:
http://blog.reamaze.com/2017/06/22/reamaze-shopify-integration-v2/
and
http://blog.reamaze.com/2017/07/19/shopify-draft-orders-via-reamaze/