Making your Shopify store accessible helps create a better browsing experience for all visitors, including people with disabilities. Follow the steps below to install the Barriano Accessibility Widget on your Shopify website.
Step 1: Register Your Website with Barriano
Register your Shopify website with Barriano and complete the website registration process.
After registration, Barriano will generate a unique installation script for your website. Copy the script to your clipboard or save it as a text file.
Your installation script will look similar to the following:
<script
src="https://widget.barriano.com/ada-widget.embed.min.js?YOUR_UNIQUE_KEY"
async>
</script>Replace YOUR_UNIQUE_KEY with the unique key generated for your website.
If your Shopify website has already been registered, sign in to your Barriano dashboard, select the relevant website, and copy its existing installation script.
Note: Add a screenshot showing the Barriano dashboard, the installation script, and the Copy button.
Step 2: Open Your Shopify Theme
Sign in to your Shopify admin panel.
From the left navigation menu, select Online Store, then click Themes.
Locate your active theme and click the ••• (More actions) menu.
Step 3: Open the Theme Code Editor
From the More actions menu, select Edit code.
The Shopify theme code editor will open.
Note: Add a screenshot showing the Edit code option.
Step 4: Open the Theme Layout File
In the theme code editor, expand the Layout folder.
Open the theme.liquid file.
Step 5: Add the Barriano Code
Scroll to the bottom of the theme.liquid file and locate the closing </body> tag.
Paste your Barriano installation script immediately before the closing </body> tag.
<script
src="https://widget.barriano.com/ada-widget.embed.min.js?YOUR_UNIQUE_KEY"
async>
</script>
</body>Do not modify the script URL or remove the unique website key.
Step 6: Save Your Changes
Click the Save button in the top-right corner of the theme code editor to apply your changes.
Step 7: Preview Your Website
Open your Shopify storefront and verify that the Barriano Accessibility Widget has been installed successfully.
Confirm that:
- The Barriano accessibility icon is visible.
- The widget opens correctly.
- The accessibility features work as expected.
- The widget appears on all required pages.
- The widget works properly on desktop and mobile devices.
Step 8: Customize Your Widget
Sign in to your Barriano dashboard and select your Shopify website.
Open the widget settings to customize the appearance and behavior of the widget.
You can configure the following options:
- Color
- Position
- Icon
- Size
- Display preferences
Save your changes after completing the customization.
You’re All Set!
The Barriano Accessibility Widget is now installed on your Shopify website.
Your visitors can now personalize their browsing experience according to their accessibility needs, helping make your Shopify store more inclusive and accessible to a wider audience.
