Skip to content
Octo Assist

Install guide

How to add an accessibility widget to Shopify

To add Octo Assist to Shopify, paste your one-line install code into your theme's theme.liquid file, just before the closing </body> tag. That file wraps every storefront page, so the button appears across your store. It shows once your plan is active and the domain in your dashboard matches your store's domain.
Get your install codeJump to the steps
  • 5 steps
  • Copy and paste, no coding
  • Runs on every page

Shopify + Octo Assist

Steps at a glance

  1. Step 1: Open your themes
  2. Step 2: Open the code editor
  3. Step 3: Open theme.liquid
  4. Step 4: Paste the code before </body>
  5. Step 5: Save

What do you need before you start?

  • A Shopify account that can edit themes: the store owner, or staff with permission to edit theme code.
  • A theme you own. Shopify only lets you edit the code of a paid theme after you buy it, not during a trial.
  • Your store added in your Octo Assist dashboard under the domain shoppers use, for example example.com (www.example.com works too).
  • An active Octo Assist plan. You can paste the code first, but the button only appears once a plan is active. See pricing.

How do you add Octo Assist to Shopify?

  1. Step 1: Open your themes

    With your code copied, go to Online Store → Themes in your Shopify admin.

  2. Step 2: Open the code editor

    Next to your current theme, click the … (horizontal menu) button and choose Edit code. If you want a backup first, choose Duplicate from the same menu before you edit.

  3. Step 3: Open theme.liquid

    In the file list on the left, open the layout folder and click theme.liquid.

  4. Step 4: Paste the code before </body>

    Find the closing </body> tag near the bottom of the file (Ctrl+F or Cmd+F helps). Paste your code on a new line just above it. Don't remove anything else in the file.

  5. Step 5: Save

    Click Save. The change is live on your store right away.

How do you know it worked?

Open your live site in a private (incognito) window, so you see it the way a new visitor does. Look for the round button in the bottom right corner, or bottom left if you chose that in your dashboard. Click it, or press Alt+Shift+A (Option+Shift+A on a Mac), to open the panel, then turn on a tool such as Text size to check that the page changes. Check a product page and your cart page too.

What if the button doesn't show up?

I pasted the code, but the button doesn't show.

Check that you edited your live theme, the one shown as your current theme. Code added to another theme only shows when you preview that theme. Also check that the domain in your dashboard is the one shoppers use, such as example.com, and not your-store.myshopify.com.

Why isn't the button on my checkout pages?

Shopify runs the checkout pages itself, and they don't load your theme's theme.liquid file. The button appears on your storefront pages, such as your home page, collections, products and cart.

Will updating my theme remove the code?

It can. Shopify warns that a theme update can leave out code changes. After you update your theme, open theme.liquid again and check that the line is still there.

My dashboard says Needs a plan. Will the button show?

No. You can install the code before you choose a plan, but the button only appears once your plan is active. Choose a plan on the Billing page of your dashboard, then reload your site.

Other platforms

Give every visitor the tools they need

Create an account, add your website and preview the widget in minutes.

Get startedTry the live demo