Skip to main content

Installing AllAccessible on Shopify

Step-by-step guide to installing the AllAccessible accessibility widget on your Shopify store by editing theme.liquid.

Written by Frank

Installing AllAccessible on Shopify

Overview

Install the AllAccessible accessibility widget on your Shopify store by adding a small code snippet to your theme. This guide walks you through the process step by step.

Who This Is For

  • Shopify store owners and administrators

  • Shopify developers managing client stores

  • Anyone running a Shopify store who needs to add accessibility features

What You'll Learn

  • How to install AllAccessible by editing your Shopify theme

  • How to verify the widget is working

  • Troubleshooting tips specific to Shopify

Before You Start

Requirements:

  • An active AllAccessible account with a Site ID

  • Access to your Shopify admin dashboard

  • Your store must be on a paid Shopify plan (for theme code editing)

What You'll Need:

Time Required: 2-5 minutes

Coming Soon: We're developing an AllAccessible Shopify App that will make installation even easier — no code editing required. In the meantime, follow the steps below.

Installation via Theme Code

Add the widget by pasting a small script into your Shopify theme's theme.liquid file.

Step 1: Back Up Your Theme

Important: Always duplicate your theme before editing code. This gives you a safe copy to revert to if anything goes wrong.

  1. Log in to your Shopify admin

  2. Go to Online Store → Themes

  3. On your current live theme, click "..." (three dots) → Duplicate

  4. Wait for the copy to be created

Step 2: Edit Your Theme Code

  1. Go to Online Store → Themes

  2. On your live theme, click "..." (three dots) → Edit code

  3. In the left sidebar under Layout, click theme.liquid

  4. Find the closing </head> tag (use Ctrl+F or Cmd+F to search for it)

  5. Paste your AllAccessible code directly above the </head> tag:

<!-- AllAccessible Widget -->
<script>
    (function(d) {
        var s = d.createElement("script");
        s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
        s.setAttribute("id", "allAccessibleWidget");
        s.async = true;
        s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
        d.head.appendChild(s);
    })(document)
</script>

  1. Replace YOUR_ACCOUNT_ID with your actual Account ID from the AllAccessible dashboard

  2. Click Save

Your code placement should look like this:

    ...other head content...    <!-- AllAccessible Widget -->
    <script>
        (function(d) {
            var s = d.createElement("script");
            s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
            s.setAttribute("id", "allAccessibleWidget");
            s.async = true;
            s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
            d.head.appendChild(s);
        })(document)
    </script>
</head>

Tip: Adding the <!-- AllAccessible Widget --> comment makes it easy to find your code later if you need to update or remove it.

Step 3: Verify Installation

  1. Visit your live storefront (not the Shopify admin)

  2. Look for the accessibility button — it typically appears in the bottom-right corner

  3. Click the button to open the widget

  4. Test a feature like increasing text size or changing contrast

  5. Navigate to a product page and confirm the widget appears there too

If You Don't See the Widget

Check 1: View your live store, not the admin
The widget appears on your public storefront, not within the Shopify admin panel.

Check 2: Preview before publishing (manual method)
If you edited a duplicate theme, you can preview it:

  1. Go to Online Store → Themes

  2. On the duplicated theme, click "..." → Preview

  3. Check if the widget appears in the preview

Check 3: View Page Source

  1. On your live store, right-click and select View Page Source

  2. Press Ctrl+F (Windows) or Cmd+F (Mac) and search for "allaccessible"

  3. You should see your script code in the source

Check 4: Clear your browser cache

  • Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

  • Or open your store in an incognito/private browsing window

Check 5: Verify your domain in AllAccessible

  1. Log in to your AllAccessible dashboard

  2. Go to Sites

  3. Make sure your Shopify domain is registered — add both your yourstore.myshopify.com domain and your custom domain if you have one

Troubleshooting

Widget Doesn't Appear After Saving

Possible Causes:

  • Wrong Account ID — double-check the ID matches your AllAccessible dashboard

  • Code in wrong location — make sure it's inside the <head> section of theme.liquid, not in a section or snippet file

  • Domain not registered — add your Shopify domain in the AllAccessible dashboard under Sites

  • Browser cache — try incognito mode

  • Ad blocker — temporarily disable any ad blockers and test

"Edit code" Option Not Available

The code editor requires a paid Shopify plan. If you're on a trial or development store, you'll need to upgrade to a paid plan to access theme code editing.

Widget Conflicts with Other Shopify Elements

If the widget button overlaps with Shopify chat, a cookie banner, or other floating elements:

  1. Log in to your AllAccessible dashboard

  2. Go to your site's Widget Settings

  3. Change the Widget Position (e.g., bottom-left instead of bottom-right)

  4. Adjust the Widget Offset to fine-tune spacing

Widget Disappears After Theme Update

If you update or switch your Shopify theme, you'll need to re-add the AllAccessible code to the new theme's theme.liquid file.

To re-apply after a theme change:

  1. Go to Online Store → Themes → Edit code

  2. Open theme.liquid

  3. Add the AllAccessible script above </head> again

  4. Save

Important Notes

  • Theme updates may overwrite your code — Check that your code is still present after any theme update

  • One theme.liquid per theme — The code only needs to be added once; it loads on every page of your store automatically

  • Shopify uses HTTPS by default — No extra configuration needed; AllAccessible works with Shopify's built-in SSL

  • Password-protected stores — The widget will work on password-protected storefronts, but only after a visitor enters the password and accesses the store

Frequently Asked Questions

Q: Will the widget appear on all pages of my store?
A: Yes. The theme.liquid method adds the widget to every page — homepage, product pages, collection pages, cart, checkout (where permitted), and all other pages.

Q: Will the widget slow down my Shopify store?
A: No. The widget loads asynchronously, meaning it won't block your page content from loading. Typical impact is less than 0.1 seconds.

Q: Do I need to add the code to every page or template?
A: No. The theme.liquid file is the master layout that wraps every page in your store. Adding the code once there covers your entire site.

Q: What happens if I switch Shopify themes?
A: You'll need to re-add the AllAccessible code to the new theme's theme.liquid file. Your AllAccessible account settings and widget configuration are preserved — only the code snippet needs to be re-added.

Q: Can I customize the widget's appearance?
A: Yes! Customize colors, position, language, and branding from your AllAccessible dashboard — no code changes needed.

Q: Does this work with Shopify headless / Hydrogen stores?
A: For headless Shopify stores using Hydrogen or a custom frontend, follow the Universal JavaScript Installation guide instead and add the script to your frontend's root layout component.

Shopify References

Related Articles

Last Updated: February 2026
​Installation Method: Theme Code Edit
​Difficulty: Intermediate
​Time Required: 2-5 minutes
​Platform: Shopify

Related Articles
Did this answer your question?