Selma Widget
Accessibility widget for Shopify
Selma Widget gives customers in your Shopify store a menu where they can adjust text, contrast and motion to their needs. You add one line of code to your theme, and the store looks just as it did.
Why it suits Shopify
A store more people can shop in
Product images get a description
A store has a lot of product images, and not all of them have alt text. The widget gives images without alt text a description written by AI, and rescans the store every 24 hours so new products are covered too.
Menus and forms by keyboard
The widget improves focus and keyboard navigation and adds the information screen readers need, for example for menus, pop-ups and forms. That makes it easier to get around the store without a mouse.
Keep your theme
The widget goes into your theme once and sits on top of it. You do not need to change themes or apps. The monthly reports show what the widget has adjusted, so you know what is left to fix in the theme.
What is included
What your visitors get
Profiles for different needs
Ready-made profiles for low vision, cognitive needs and ADHD, among others, and a mode that stops flashing and moving content.
Own adjustments
The visitor can change text size, contrast, line spacing and the cursor, use a reading mask and stop animations.
Keyboard and screen readers
The widget improves focus and keyboard navigation and adds information that screen readers need, for menus, pop-ups and forms, for example.
Alternative text
Images without alternative text get a description written by AI.
The menu in 33 languages
The menu is available in 33 languages. The site's own content is not translated.
Loads after the page
The widget loads once the page is already showing, so it does not hold back the content.
Get started
How to add the widget
The widget is one line of code that you add once and that then loads on every page of the store. It picks up its settings from your domain, so there is nothing else to change in Shopify.
- 1
Open the theme code
Go to Online Store and Themes in the Shopify admin. Choose Edit code in the menu for your current theme and open theme.liquid under Layout.
- 2
Paste the code
Paste Selma's code just before the closing body tag and save. The accessibility icon then appears in your store.
Good to know
What the widget does not do
The widget makes the page easier to use for many visitors, but it does not replace fixing the issues in the code.
Outside what the widget does
- Your source code does not change. The adjustments exist in the visitor's browser, and if the widget is removed, they are gone.
- PDFs and other documents, captions for video and content from other domains in iframes
- Subdomains and services on other domains, such as booking or payment
- Mobile apps
Selma Bevakning helps your developers fix the issues in the code, and Selma Services carries out manual reviews and user tests.
Questions about Selma Widget and Shopify
- How do I add the widget to Shopify?
- Open Online Store and Themes, choose Edit code for your theme and paste Selma's code before the closing body tag in theme.liquid. Save, and the widget loads on every page of the store.
- What happens if we change or update our theme?
- The code lives in the theme. If you change or update your theme, check that the line is still in theme.liquid and add it again if it is missing.
- Does the widget slow down the store?
- No. The widget loads once the page is already showing, so it does not hold back your products or content.
- Does the widget change our products or our theme?
- No. The adjustments are applied in the customer's browser. Your products, theme and apps stay as they were, and if you remove the code, the adjustments go with it.
See the widget on your Shopify site
Book a demo and we will show you how the widget works on your website, and what it does not do.