UserWay Logo UserWay Logo Mobile
Featured image UserWay's Accessibility Widget Mannual Installation Guide for Shopify

Download video transcription (248kb)

Get UserWay’s Accessibility Widget code for your Shopify website, free!

Start Free Trial

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.

Shopify logo

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 1 Log in

Step 2: Shop for apps

On the right, click on “Shop for apps.” A new window will open.

Step 2 Shop for apps

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 3 Search for "UserWay”

Step 4: Search for “UserWay website accessibility”

When you get the search results, click on “UserWay website accessibility”.

Step 4 Search for "UserWay website accessibility"

Select “Add app.”

Select "Add app"

 

 

 

 

 

At the bottom, you need to click on “Install app.”

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.”

Step 5 Select the plan

Finally, to make the payment effective, click on “Approve subscription.”

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.

Step 6 Configure the look and feel of your widget

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.

Click on "Save"

Step 7: Sign in

Scroll back up and click on the “Sign in” button.

Step 6 Sign in

A dashboard will open where you can manage all the widget settings for all of your sites, and also manage your account settings.

Manage all the widget 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.

Step 6 Enable the widget

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 6 Choose Themes

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 7 Choose Actions

Step 11: Choose ‘theme.liquid’

Select ‘theme.liquid’ because this is the file that you’re going to edit.

Step 8 Choose 'theme.liquid'

Scroll all the way down until we find the body closing tag.

The body closing tag

Past the code and click on ‘Save.’

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.