Add Beacon to a Shopify Site

Shopify is an ecommerce platform that has everything you need to sell online. Beacon provides on demand Docs, chat, and an email contact form rolled into one helpful widget you can plug right into your Shopify site to keep in contact with your customers. 

If you've built and hosted your website on Shopify, embedding Beacon is as easy as a simple copy + paste.

Note: There are other ways to add custom JavaScript to a Shopify site — if you're more comfortable with some other method, go for it! This is just one way you can add the code.

1

Create a new Beacon, or head to the Installation tab for an existing Beacon, and grab the embed code. Just click the Copy button to get that code on your clipboard.

2

In Shopify, click on Online Store from the left navigation menu under Sales Channels, then Themes.

3

From the Themes Page, select on Edit Code from the Actions dropdown on your current theme.

4

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

5

The code can be a little intimidating if you're new to editing code. In header.liquid, Cmd +F (on Mac) or Ctrl + F (on Windows) to search for  {% schema %}. You'll paste your Beacon code right above that. 

6

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.

7

Save and Preview to view Beacon on your Shopify site. That's it!

If you want to try your hand at adding some of the features of the Beacon JavaScript API, you'd pop that code into the same spot in your Shopify site. Check out Advanced Beacon Customization for some ideas on what's possible!