Share

Shopware is a powerful eCommerce platform used to create and manage online stores. You can install the Barriano Accessibility Widget by adding the Barriano installation script to your Shopware storefront theme. For Shopware 6, it is recommended to make changes in a custom or derived theme instead of modifying the default Storefront theme.

Step 1: Register Your Shopware Website with Barriano

Register your Shopware 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 Shopware 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 Shopware Theme

Sign in to your Shopware administration panel.

From the left navigation menu, open Content and select Themes.

Locate the theme currently assigned to your storefront.

Shopware allows themes to be managed from the Themes section and assigned to individual sales channels.

Note: Add a screenshot showing Content → Themes and the active storefront theme.

Step 3: Open Your Custom Theme Files

The Barriano installation script should be added to your storefront template.

For Shopware 6, it is recommended to make template changes in a custom or derived theme rather than modifying the default Storefront theme.

Custom storefront templates are typically located in the following directory:

/custom/plugins/YourTheme/src/Resources/views/storefront/

Open the storefront template in your custom theme that extends the main Shopware page layout.

Note: Add a screenshot showing the custom theme directory and the storefront template.

Step 4: Add the Barriano Installation Script

Add the Barriano installation script to your storefront template so it loads on every page of your Shopware store.

Paste the script near the end of the page, 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.

Note: Add a screenshot showing the Barriano script added to the custom Shopware storefront template.

Step 5: Save and Compile Your Theme

Save the updated theme files.

Make sure your custom theme is installed, activated, and assigned to the appropriate Shopware sales channel.

Compile or refresh the theme after making the changes so the updated template is applied.

Note: Add a screenshot showing the active theme assigned to the Shopware sales channel.

Step 6: Clear the Shopware Cache

After updating the template, clear the Shopware cache so the new installation script is loaded.

If you have terminal access, run the following command:

php bin/console cache:clear

If your hosting environment provides a cache management option in the Shopware administration panel, you can use that instead.

Note: Add a screenshot showing the terminal command or the Shopware cache-clearing option.

Step 7: Preview Your Shopware Website

Open your Shopware 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.

Note: Add a screenshot showing the Barriano Accessibility Widget on the live Shopware storefront.

Step 8: Customize Your Widget

Sign in to your Barriano dashboard and select your Shopware website.

Open the widget settings to customize the appearance and behavior of the Barriano Accessibility Widget.

You can customize the following:

  • Color
  • Position
  • Icon
  • Size
  • Display preferences

Save your changes after completing the customization.

Note: Add a screenshot showing the available widget customization settings in the Barriano dashboard.

You’re All Set!

The Barriano Accessibility Widget is now installed on your Shopware website.

Your visitors can now personalize their browsing experience according to their accessibility needs, helping make your Shopware store more inclusive and accessible to a wider audience.

You might be interested in this.