Add chat to a Shopify store

1. 1

   Step 1: Copy your chat code

   Sign in, open Chat, and press the copy button beside the install code. It is one line, and it already contains your account ID.

   It looks like this

   <script src="https://app.ringhero.example/widget.js" data-org="YOUR_ORG_ID" async></script>

   What you should see

   A message saying the code was copied.

2. 2

   Step 2: Open your themes

   In your Shopify admin choose Online Store, then Themes.

   What you should see

   Your current theme at the top of the page.

3. 3

   Step 3: Make a backup copy first

   Press the button with three dots beside your current theme and choose Duplicate. If anything goes wrong you can publish the copy.

   What you should see

   A second theme in your library with Copy of in its name.

4. 4

   Step 4: Open the code editor

   Press the three dots beside your current theme again and choose Edit code. In the list of files on the left, open the Layout folder and choose theme.liquid.

   What you should see

   A long page of code. You only need to find one line in it.

5. 5

   Step 5: Paste the code above the closing body tag

   Scroll to the very bottom of the file, or search for </body>. Click at the start of that line, press Enter to make an empty line above it, and paste your chat code on the empty line.

   The end of the file should look like this

     <script src="https://app.ringhero.example/widget.js" data-org="YOUR_ORG_ID" async></script>
   </body>
   </html>

   Important

   Do not delete or change anything else in this file.

6. 6

   Step 6: Save

   Press Save at the top right of the editor.

7. 7

   Step 7: Check it on your live site

   Open your website in a new private or incognito window, so you see what a visitor sees. Try it on your phone too.

   No button?

   Make sure the change is published, then refresh the page. If your site has a cookie banner or a cache plugin, clear the cache and look again.

   What you should see

   A green button labelled "Chat" in the bottom right corner of your website. Click it and a chat panel opens above the button, which now says "Close".

8. 8

   Step 8: Ask it a real question

   Ask about your hours and about a price from your price list. Then ask for something you have not told it.

   What you should see

   Answers that match your documents. For anything missing, it says the team will confirm and offers to take a name and number.

This guide was written for the beta. If a screen is named a little differently from what you see, the steps still apply in the same order.