What you need
File access to the themes folder, administrator rights in the back office and an installed parent theme. Make a backup first. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- Create a child theme under
/themes/withconfig/theme.ymlandpreview.png. Intheme.yml, enter the folder name asname, your active theme asparentanduse_parent_assets: trueunderassets. - In the child theme, create the file
templates/layouts/layout-both-columns.tplcontaining{extends file='parent:layouts/layout-both-columns.tpl'}. - In it, override the
hook_before_body_closing_tagblock. Output{$smarty.block.parent}first and then add the unchanged embed code. - Activate the child theme under Design → Theme & Logo. Clear the cache under Advanced Parameters → Performance.
- Check the homepage, a category, a product, the cart and checkout in a private window and in the mobile view.
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
Classic and Hummingbird contain the block in layouts/layout-both-columns.tpl. Other themes can differ. Without the parent: prefix, the template refers to itself. Test activating the theme in a copy of your shop first. The widget does not reach external payment pages and embedded payment fields.
Common questions about PrestaShop
Does the widget also appear in checkout?
In the Classic theme, yes. The checkout template extends the default layout, which builds on layouts/layout-both-columns.tpl. That is where the block before the closing body tag sits. The widget does not reach external payment pages or embedded payment fields. So test the full checkout.
Will my embed survive theme updates?
Yes. A child theme inherits templates and assets from the parent theme. You only override what you want to change. You can update the parent theme independently.
What applies in multistore mode?
Each shop can use its own theme. Assign your child theme to every shop that should show the widget. If the shops have their own domains, each domain needs its own Accessonaut project and therefore its own child theme.
Which cache settings matter?
Under Advanced Parameters → Performance you control template compilation. If templates are never recompiled, you only see changes after clearing the cache. During setup, the option to recompile templates when files have been updated helps.
Do I need to switch off “Combine, Compress and Cache”?
Not for the embed. PrestaShop does advise testing everything after switching on smart cache for JavaScript before leaving the setting on. While testing, also check that the widget still appears and works.
If something does not work
The widget is missing after saving the template.
Cause: Smarty is still using compiled templates.
Fix: Clear the cache under Advanced Parameters → Performance, at the top of the page.
The widget is missing in one shop of the multistore.
Cause: That shop uses a different theme.
Fix: Assign the child theme to the shop and clear the cache.
You want to remove the widget.
Cause: The overridden block in the child theme outputs the code.
Fix: Remove the embed code from hook_before_body_closing_tag and keep {$smarty.block.parent}. Alternatively, activate the parent theme again. Then clear the cache.
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.