What you need
Access to the code of your online store theme. Duplicate the theme before making changes. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- Open Online Store → Themes and duplicate the theme you use.
- In the duplicated theme, open Edit code and the shared layout file, usually layout/theme.liquid.
- Paste the unchanged embed code once, directly before the closing body tag, and save.
- Check the theme preview. Once everything works, publish the theme and test the public domain again.
What the embed looks like
Use the ready-made code from your project. The example needs your real project ID and the publicly reachable service address.
<script src="https://accessonaut.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-language="en" defer></script>Match the design to your website
In your Accessonaut project, open “Reading-aid widget”. Five templates and a live preview help you with the design: colours, fonts, menu width, corners, shadows, an icon or labelled opener and your own texts. Position and edge spacing can be set separately for desktop and smartphone. After saving, your existing embed code picks up the project design automatically; the public configuration is cached for up to one minute.
In the WordPress plugin you can choose local settings instead. These take priority over the project design. Design options are available on all plans. On the Free plan, the Accessonaut notice stays visible. Your visitors’ personal reading settings take priority over design defaults.
Keep in mind
The theme code covers the online store. Shopify checkout, customer accounts and embedded third-party apps can have their own technical limits and installation paths. Check these flows separately. Switching themes can remove your embed.
Common questions about Shopify
Does the widget work in Shopify checkout?
No. Layout files like theme.liquid apply to all pages except checkout. Shopify no longer allows your own scripts in checkout: checkout.liquid is no longer supported, and Shopify has sunset the former additional scripts on the Thank you and Order status pages. Checkout extensions run isolated, without access to the page. So check your checkout separately for barriers.
Does the widget appear in customer accounts?
You customise the new customer accounts through the checkout and accounts editor and app extensions, not through theme code. According to Shopify, these extensions have no access to the account page itself. So do not expect the widget there.
Will my embed survive a theme update?
Shopify carries code edits over into the updated theme copy if they do not conflict with the update. The theme card shows whether this worked. If not, add the embed code again before the closing body tag in the new copy. Save your code before updating.
Do I need a separate embed for several languages or markets?
No. Only one theme is ever published, and all languages use it. With data-language="auto", the widget follows the page’s lang attribute; the Dawn theme sets it with {{ request.locale.iso_code }}. If a market uses its own domain, that domain needs its own Accessonaut project.
Can I test the widget in the theme preview?
Yes, the preview renders the theme including the embed. Shared preview links run on shopifypreview.com, though. There the widget does not load your project configuration and shows the default design with the Accessonaut notice. Check the final design on your store domain.
If something does not work
The widget is missing after switching themes.
Cause: The embed code is in the old theme. Every theme has its own theme.liquid.
Fix: Add the code to the new theme before you publish it. Remove it from themes you no longer need.
Two accessibility buttons overlap.
Cause: Another app shows its own tool. Two tools that both change fonts and colours get in each other’s way.
Fix: Choose one tool and fully deactivate the other.
Check the installation
- Open the public website in a private window. The widget appears exactly once.
- Reach the button with the keyboard. Open the panel, change the text size and close it again.
- Check the homepage, a subpage, a form and the mobile view. The widget must not cover any important controls.
- In the Network tab, check that widget.js and the project configuration load from your service address. If there are errors, check the domain, project ID and CSP.
- For Free projects, the visible Accessonaut notice remains part of the widget. Permissions come from your project.
Privacy and limits
When it loads, the visitor’s browser fetches the script and the project configuration from the Accessonaut service. This involves the IP address, browser request data and the website hostname. Display preferences are stored locally in the browser. Cover the integration in your privacy notice and check your specific configuration.
The reading aids do not guarantee conformance. Also check barriers in the source code and complete user journeys, both automatically and manually.