Installing Front Chat on a Shopify Site

Overview

The steps you need to take to install Front Chat on your Shopify site varies from our regular instructions for installing Front Chat, as Shopify sites are constructed in a specific way that require you to add code blocks to your site. This guide should help you navigate those differences and install Front Chat on your Shopify site.


Instructions

Step 1

Open your Shopify site settings, and click the Online Store > Themes tab in the left sidebar.

Step 2

On your current theme, click Actions > Edit Code.

Step 3

You should now see a page that looks something like this;

 Under the Layout section, select {/} theme.liquid

Step 4

Scroll to the bottom of the code that appears, and look for the closing </body> tag. This is where we will insert our Front Chat code.

In the line above the closing </body> tag, let's enter the following code:

{% include 'front-chat' %}

Click Save in the top right corner of this file

 Step 5

Ok, now we need to define a "snippet" which contains your actual Front Chat code. Open the Snippets section, and click Add a new snippet.

 

You should name that snippet "front-chat" to match the name of the code snippet you included in Step 4. 

Step 6

Open Front. Either create a new Front Chat inbox, or click into Settings > Inboxes and open the settings for your existing Front Chat inbox.

Scroll down to the Code Snippet section, and copy the code you see there.

Paste this into the new front-chat.liquid file you just created in Shopify, and click Save

 

And you're done! You should now have a working implementation of Front Chat on your Shopify site. 


FAQ

Can I use the "Logged In User" feature?

In this implementation, no. Because this is the case, we suggest checking that the Verify logged-in user identity > Only accept messages from verified users
setting on your Front Chat channel is disabled.

Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like Follow
  • 6 days agoLast active
  • 22Views
  • 1 Following