Share

Gambio

Gambio is an eCommerce platform used to create and manage online stores. You can install the Barriano Accessibility Widget by adding the Barriano installation script to your shop’s frontend theme so that it loads across the website. Gambio supports custom theme development and extensions through its theme system and GXModules.

Step 1: Register Your Gambio Website with Barriano

Register your Gambio 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 Gambio website has already been registered, sign in to your Barriano dashboard, select the relevant website, and copy its existing installation script.

Step 2: Open Your Gambio Theme

Sign in to your Gambio administration panel and identify the active theme used by your shop.

Gambio recommends making frontend modifications through a custom theme or module instead of directly modifying core shop files. This helps keep your customizations maintainable when the shop is updated.

Step 3: Open the Theme Template Files

Access the files for your custom Gambio theme or GXModule.

Locate the template file responsible for the main page structure or footer area of the storefront.

Gambio’s theme system allows custom templates to extend the existing storefront theme without directly modifying the original theme files.

Step 4: Add the Barriano Installation Code

Open the template used across your storefront and locate the closing </body> tag.

Add the 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>

Do not modify the script URL or remove the unique website key.

Gambio’s module architecture can also be used to extend template areas without editing the original template directly.

Step 5: Save Your Changes

Save the updated theme or module files.

Make sure the customized theme is active for the storefront where you want the Barriano Accessibility Widget to appear.

Step 6: Clear the Shop Cache

Clear the Gambio shop cache after making the template changes so the updated frontend files are loaded.

After clearing the cache, reload your storefront to apply the changes.

Step 7: Preview Your Gambio Website

Open your Gambio storefront in a browser 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 Gambio storefront.

Step 8: Customize Your Widget

Sign in to your Barriano dashboard and select your Gambio 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.

You’re All Set!

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

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

You might be interested in this.