Back to guides

How to add UserWay’s accessibility widget on Shopify

As a business, you want to make sure your online store is easy to navigate and accessible to all potential customers, but ensuring complete website accessibility can be difficult to integrate if you’re not an experienced web developer. UserWay’s Shopify widget can help. This plugin provides seamless integration of UserWay’s innovative technology to make your Shopify website more accessible by becoming ADA and WCAG compliant. Adding the accessibility plugin is quick and easy, and can be done automatically through the Shopify app store, or manually using a unique code.

How to automatically install UserWay’s accessibility plugin from the Shopify app store

Step 1: Find UserWay in the Shopify Store

Search for “UserWay” in the Shopify app store. Select the option “UserWay Website Accessibility,” and then select “Add app,” followed by “Install app.” 

1 - shopify app

2 - add UserWay shopify plugin

Step 2: Check Your Email for Your Credentials

If this is your first time using the UserWay widget, we will send a welcome email to you with your UserWay username, password, and code. You can skip this step and use your login credentials if you already have an account.

Step 3: Upgrade For More Features

This is the app’s default, free version. If you’d like more robust ADA and WCAG compliance for your website, you can purchase the AI-powered version starting at $49/month by clicking the green “Upgrade Now” button.

Step 4: Enable the Widget

To enable the widget, toggle the On/Off button found below “Configure Your UserWay Widget.”

3 - Enable UserWay widget

Step 5: Customize Your Widget

You can now customize the type, color, size, and position of your UserWay icon. Be sure to click “Save your settings,” or you will lose your customizations.

Step 6: Generate an Accessibility Statement

To generate an accessibility statement, select the “Accessibility Statement” tab found on the blue and white menu bar at the top of the page. Fill in your details and select “Generate My Accessibility Statement.” Check your email inbox, as we will email it to you.

Step 7: Preview Your Website

To double-check that everything has been correctly installed and is working, preview your website by selecting the eye icon in the left menu. Your previewed site should open automatically.  

How to manually install UserWay’s accessibility widget

Step 1: Register Your Website With UserWay

Register your website with UserWay by clicking the “Start Free Trial” icon at the top right of the page and completing the steps to get your unique code. For more information on how to get your code, click here (need link).

Step 2: Receive Your Text Code

For a new website registration, we will email your text code and login credentials to you, but you can also copy your unique code to your clipboard or save it as a text file. If you have already registered a website with UserWay, you can add a new website to your account, which will use the same code issued to you with the first site.

To find your code, go to the top menu of your dashboard at userway.org and click “My embed script.” 

Step 3: Paste Your Code

Next, you will want to paste your code into the theme editor. Look for the “Online Store” along the left-side menu and click on “Theme Editor,” then click on “Current Theme,” then “Actions,” then “Duplicate.” This will create a backup copy of your theme. 

1 - Go to online store - themes - Actions - Duplicate

Step 4: Select Your Theme

In your backup theme, select “Edit code,” which will bring up a list of template files. Within this list, select “theme.liquid,” and the file will open on the right side of your screen.

2 - Go to duplicated theme - Actions - Edit code

3 - Click theme-liquid

Step 5: Paste Your Code

Scroll to the end of the code to find the body closing tag </body>. Click on the start of this closing tag and press “Enter” a few times to make space for the new code above it. Paste the code in this space. Don’t forget to save your changes by clicking “Save” in the top right pero of the screen. 

4 - Scroll until body closing tag

5 - Paste code - click save

Step 6: Preview Your Website

Preview your website to confirm that the widget is correctly installed and working. 

UserWay’s accessibility widget adds necessary elements to strengthen your Shopify website’s accessibility, and to bring it up to ADA and WCAG standards. By using this accessibility plugin, you are making your Shopify online store exponentially more compliant, and offering a site that’s more accessible to everyone.

 

Ready to Make Your Shopify Website Accessible?

FAQ

If you need help uninstalling UserWay’s Shopify app, our support team will be happy to help you out. You can contact us directly through Shopify’s chat function. 

If you’d like to uninstall UserWay’s Shopify widget by yourself, here’s how:

Step 1: On the left menu of your Shopify Admin page, select “Apps.”

Step 2: Search for “UserWay Website accessibility” in the search section at the center of the page, and click “Delete.”

Step 3: We appreciate your feedback. To provide it, select one of the options from the dropdown menu, followed by “Delete again.”

The easiest way you can make your Shopify store more accessible is by setting options for a high contrast between the background color and the color of your text. For example, gray text on a white background could be difficult to see for people with low vision. Best practice is to have a solid colored background that presents a strong contrast to the text on the page, such as black text on a white background.  

Next, it is important that your Shopify site is screen reader compatible. Screen readers announce web page content out loud for blind or visually impaired users. It’s important to make sure your website is compatible with this commonly used technology, so that people using it to access websites like yours can easily navigate through the web pages. Installing UserWay’s accessibility widget can help you make your website accessible and WCAG and ADA-compliant. 

Shopify does not check each website for ADA or WCAG compliance. It is up to each website developer to ensure that their Shopify store is accessible to all. 

If you don’t include digital accessibility measures in your website design, you are preventing people with disabilities from accessing your site. Not only is it the right thing to do to prevent discrimination against people with disabilities, accessibility is also beneficial to your brand. It allows you to be open to all potential customers, and to significantly increase your client base.