Table of Contents
Download video transcription (248kb)
Get UserWay’s Accessibility Widget code for your Shopify website, free!
Quickly strengthen the accessibility of your Shopify website by installing UserWay’s Accessibility Widget, which works perfectly, out-of-the-box, on any website built with Shopify.
UserWay’s Accessibility Widget immediately helps strengthen any weak points and accessibility hurdles on your Shopify site. UserWay works flawlessly on both purchased and premade templates as well as your own hand-crafted templates and designs.
Installing UserWay’s Accessibility Widget for your portfolio of Shopify sites is free, regardless of how many sites you manage or the number of pages each of your sites contains.
Enjoy an immediate accessibility boost and provide powerful site enhancements for your users while helping to fend off potential lawsuits and legal claims related to accessibility, ADA, Section 508 and other violations rooted in code that’s non-compliant with WCAG 2.1 AA requirements.
Take a look at the installation video below, which provides a step-by-step guide on how to set up UserWay’s Accessibility Widget on your Shopify website in less than two minutes. You can also proceed with a standard UserWay’s Accessibility Widget Installation Guide for Shopify.
How to install UserWay’s Widget on Shopify
Step 1: Log in
Log in to your Shopify admin and on the left menu click on “Apps.”
Step 2: Shop for apps
On the right, click on “Shop for apps.” A new window will open.
Step 3: Search for “UserWay”
On the search bar, type “UserWay,” then press the enter key on your keyboard or click on the search icon.
Step 4: Search for “UserWay website accessibility”
When you get the search results, click on “UserWay website accessibility”.
Select “Add app.”
At the bottom, you need to click on “Install app.”
Step 5: Select the plan
Select which one of these three plans suits you best depending on the number of page views that your site gets a month. Then click on “Pay Now.”
Finally, to make the payment effective, click on “Approve subscription.”
Step 6: Configure the look and feel of your widget
Configure the look and feel of your widget before you enable it on your site. So scroll down to find the different customization options. You can choose among these four icons, change the color using the color picker, and also change the size.
You can select the position of the widget, you can choose one of the eight default locations, but if none of them fit you can add your own exact position. Don’t forget to click on “Save” to make the changes effective.
Step 7: Sign in
Scroll back up and click on the “Sign in” button.
A dashboard will open where you can manage all the widget settings for all of your sites, and also manage your account settings.
Step 8: Enable the widget
Go back to Shopify and finish our widget configuration. To enable the widget switch the toggle button to “On.” The final step is to preview your online store and make sure you can see the UserWay widget on your site.
Then, switch over to Shopify.
Step 9: Choose Themes
In Shopify’s back-end click on ‘Online Store.’ Then click on ‘Themes.’ Here you’ll see all the themes that you have. Make sure that we’re going to edit your current theme.
Step 10: Choose Actions
You might find other themes down here, but it has to be active so this is the current theme. Click on ‘Actions.’ Scroll down a little bit and click on ‘Actions’ and ‘Edit Code.’
Step 11: Choose ‘theme.liquid’
Select ‘theme.liquid’ because this is the file that you’re going to edit.
Scroll all the way down until we find the body closing tag.
Past the code and click on ‘Save.’
To make sure you’ve done all these steps correctly then preview this site I’m going to open it in a new tab. If you see the widget right here, this means that you’ve installed it correctly.
There’s another way to check if you’ve set up everything correctly. Go back to userway.org and here click on the ‘Let’s Verify’ button. But again if you see the widget on your site that means you’ve done everything correctly. So what we can do is click on ‘Skip,’ and you get your accessibility statement. This is a template that you can modify, you can add all your details, you can customize it, and bring it to your site.