Shopify Visual Integration Walkthrough

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, integrate our JavaScript Shoutbox Embed, and bring the Reamaze interface into your Shopify dashboard with a few simple clicks. We’ll also teach you some more advanced toggles so you can customize Reamaze to your heart’s content.

Installing the Reamaze App for Shopify

Before you install the Reamaze app for Shopify, you'll want to make sure you have a Reamaze account that's ready to connect. You can sign up for a new account here or obtain one when you install the Reamaze app.

From your Shopify dashboard, locate the "Apps" tab on the left and head over to the Shopify app store.

Alt Text

Search for Reamaze or find our app in the "Customer Service" category.

Alt Text

Once you find the Reamaze app for Shopify, click the "Get" or "Install" button to either create a new Reamaze account or start the connection process. If you already have a Reamaze account, we recommend logging in first.

Alt Text

You will be asked to verify the connection. Simply click "Yes" to proceed.

Alt Text

Once Reamaze is installed to your Shopify dashboard, you will see a verification and congratulations screen. You'll also find detailed instructions there to this article as well as more advanced features.

Alt Text

You can find the Reamaze app and also access your Reamaze dashboard directly from your Shopify dashboard after the installation process.

Alt Text

Reamaze makes the initial default install very easy. In fact, the Reamaze Shoutbox (sometimes known as a chat box) is already installed for you on your storefront/website. Customers can immediately use the Shoutbox to chat with you in real time. Remember that this is the initial default install. We'll go over how to customize everything in the next step.

Alt Text

Customizing the Reamaze Shoutbox

To customize the Shoutbox to fit the look and feel of your store is very important. It gives customers a familiar experience whenever they interact with you. Before starting the customization process, you'll want to think about if there's a need to collect additional data from the customer before they reach out to you. For example, Reamaze allows you to add custom text entry fields (for things like Order ID), dropdown selection fields (for things like 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 Embed Builder found in your Reamaze account's settings menu.

Alt Text

Go through the customization option until you're happy with your Shoutbox's look and feel.

Alt Text

At the end of the builder, you'll be provided with a script to copy. Go ahead and copy everything in the black box.

Alt Text

Back in your Shopify dashboard, 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".

Alt Text

Click on "theme.liquid" to access the main template file. Next, you'll want to paste the script you copied earlier above the end of the </head> tag in that HTML file. Once you've pasted the script it should look something like the following. Make sure to click on "SAVE" once you're done.

Alt Text

Head on over to your store's website and verify that the new Shoutbox is appearing. Easy!

Alt Text

Implementing Proactive Engagement with Reamaze Cues

Proactive engagement is a keystone feature for many eCommerce businesses. Not only can you automatically engage customers who're 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. Once there, you'll be about to name the Cue, create the content message, add buttons, etc.

Alt Text

You can also define the rules and conditions under which the Cue will show up for customers. There are a variety of options here so we can encourage testing.

Alt Text

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. Go ahead and copy everything in the black box.

Alt Text

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.

Alt Text

Once added, refresh your store website under a new window or incognito window to see the Cue.

Alt Text

Note: You can also integrate also integrate Reamaze Cues with Google Tag Manager for easier 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 Reamaze FAQ/KB Into Your Store

Having a self-service knowledge base or 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 KB/FAQ feature to deploy a highly customizable experience.

Here's an article on the different variations of the KB/FAQ you can deploy. For this tutorial, we'll show you how to embed an inline KB/FAQ into your store.

Start by accessing the "Pages" tab in your Shopify account dashboard. Most Shopify websites have a dedicate 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.

Alt Text

Head over to Reamaze's Developer portal or use the Embed Builder again to copy the installation <div> you need to add. Keep in mind that if you already have the Shoutbox installed, you do not need to copy and paste that script again. All you need is the KB/FAQ <div>.

Alt Text

In your FAQ page, click the <> icon to edit the HTML of the page. Paste the <div> where you want the embedded Reamaze KB/FAQ to show up. This is also known as inline embedding. The KB/FAQ will show up where you paste the <div>. Once you're done, click save.

Alt Text

You can now navigate to your website, click on the page you just created and you should see the Reamaze inline KB/FAQ!

Alt Text

In addition to the embedded inline KB/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 knowledge base first. This is known as the self service mode.

Alt Text

Advanced: Implementing SSO Authentication

If your store supports customer logins, you might want to make it easier for logged in customers to contact you without having to enter their name and email again. SSO authentication will allow customers who're logged in to your Shopify store to pass their credentials directly to Reamaze. In addition to easier sign-in, Shopify can provide Reamaze with other data. See this article for more details.

Start by locating your Reamaze accounts SSO key in the settings menu. It should be inside the "Account IDs and Secrets" option toward the bottom.

Alt Text

Copy the advanced SSO script in this article and paste it before the {{ content_for_header }} line in your theme.liquid HTML template and replace $SSO_KEY with your actual Reamaze account's SSO key. Save and refresh!

Alt Text

Shopify Customer Data and Reamaze

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. If you have a Facebook Page or Facebook Messenger account integrated into Reamaze as well, Reamaze can also detect customer matches based on the customers' Facebook ID and his/her email address.

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/