Add Beacon to a Shopify Site

Shopify is an ecommerce platform that has everything you need to sell online. Beacon provides on demand FAQs, chat, and an email contact rolled into one helpful widget you can plug right into your Shopify site to keep in contact with your customers. If you built and host your website on Shopify, embedding Beacon is as easy as a simple copy + paste.

Before you dive in!

Have you set up a Mailbox? You'll need to set up a Mailbox before you get started with Beacon. You can read our guide on how to set up your first Mailbox here.

1

Launch the Beacon builder under Manage → Beacon to create your all-in-one embeddable chat, email contact, and knowledge base widget. Customize to match the color scheme of your Shopify site, and decide if you want to use for Email, Docs, Chat, or a any combination of those three! 

2

Once you’ve got your Beacon just the way you want it, it’s time to copy the embed code to your website. You can continue to tweak your Beacon in Help Scout and all updates will be automatically reflected on your website as they are saved. 

3
In Shopify, click on Customize Theme and click the Customize Theme button

4
From the Themes Page, select on Edit Code from the dropdown .

5
Scroll down past templates and open the Sections folder. Choose header.liquid from Sections.

6
The code can be a little intimidating if you're a newbie to editing code. In header.liquid, command + F to search for {% schema %}. You'll paste your Beacon code right above that. 

7
Paste the Beacon code you copied in step 2 right above {% schema %}. If you paste it in the wrong place, Shopify will flash an error.

8
Save and Preview to view Beacon on your Shopify site to offer chat, an easy email contact form, and Docs all in one handy widget.

Want to learn more about Beacon? Check out our jumpstart guide

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still stuck? How can we help? How can we help?

Related Articles