Taming Your Accessibility Widget: How to Hide AccessiBe and Trigger it Manually on Shopify

Hey there, fellow store owners! Let's talk about something that often comes up in our Shopify community discussions: balancing essential features with a smooth user experience. Specifically, we're diving into a common dilemma with accessibility widgets, like the popular AccessiBe app, and how to make them less intrusive without sacrificing compliance.

I recently followed a really insightful thread where a store owner, greenwichsocial, brought up a classic problem. They were using AccessiBe, which places a floating pop-up widget on the bottom right of their site. While fantastic for accessibility compliance (which is super important, by the way!), some customers found it was getting in the way, particularly when trying to click the “add to cart” button. Sound familiar? It’s a classic case of good intentions colliding with practical UX challenges.

The Challenge: Intrusive Widgets vs. Compliance

The core issue was clear: how do you keep your site accessible and compliant while also ensuring a seamless, unobstructed shopping experience? greenwichsocial wanted the widget to only appear when a user actively clicked a link, perhaps in the footer, making it less intrusive by default. This is a brilliant idea because it puts the control in the user's hands while still making the feature easily discoverable for those who need it.

Exploring Initial Solutions: AccessiBe's Built-in Option

As the discussion unfolded, another community member, Michross, jumped in with a helpful starting point. They pointed out that this is a common complaint with AccessiBe, and thankfully, the app actually has a built-in option for it! In your AccessiBe dashboard, under Widget Customization, you'll find a "Hide the widget button" option. Enabling this completely hides the floating button, which is great for decluttering your site.

However, as greenwichsocial quickly clarified, simply hiding it isn't enough for compliance. You still need a way to manually trigger it. This is where the community really shines, because just hiding it would leave a gap. We need that manual trigger!

The Community's Winning Solution: Custom JavaScript Magic

This is where tim_1, another helpful expert in the community, stepped in with a robust JavaScript solution that ties everything together. This approach allows you to hide the AccessiBe widget by default and then trigger it with a custom link, giving you the best of both worlds: a clean interface and full accessibility compliance.

greenwichsocial later confirmed that this solution worked perfectly, which is always fantastic to see!

Step-by-Step: Implementing the Manual Trigger for AccessiBe

Here’s how you can implement this solution on your Shopify store, combining AccessiBe's built-in feature with a bit of custom code:

1. Hide the Widget Button in AccessiBe:
   • Log into your AccessiBe dashboard.
   • Navigate to Widget Customization.
   • Find and enable the "Hide the widget button" option. This will make the floating button disappear from your site.
2. Create Your Custom Trigger Link:
   • Decide where you want your accessibility trigger link to appear (e.g., in your footer menu, a static page, or a custom section).
   • Add a link with the href attribute set to #show-widget. The text of the link can be anything descriptive, like "Control Accessibility" or "Accessibility Options".
   • For example, in your Shopify admin, if you're adding it to a menu, you'd create a new menu item and for the link, you'd type #show-widget (or select "Web Address" and type it there).
   • It would render something like: Control Accessibility
3. Add the JavaScript to Your Shopify Theme:
   • In your Shopify admin, go to Online Store > Themes.
   • Find your current theme, click Actions > Edit code.
   • Scroll down to the Sections directory and look for a file related to your footer (often footer.liquid or similar). If you're not sure, you can also add a new "Custom liquid" section to your footer group via the Theme Customizer.
   • Paste the following code snippet into a new "Custom liquid" section in your footer group, or directly into your footer.liquid file before the closing tag.

How the Code Works

Let's break down that JavaScript just a little bit. What it does is listen for any clicks on your page. When someone clicks a link, it checks if that link's href attribute contains #show-widget (the one you created!). If it does, it prevents the browser from trying to navigate to that non-existent anchor. Instead, it then programmatically finds the hidden AccessiBe widget (which lives in something called a shadowRoot, a technical detail for how web components work) and simulates a click on its hidden trigger button. This forces the widget to open, just as if it had been floating there all along!

This clever workaround means your site remains clean and uncluttered, but the accessibility features are still fully available with a simple click for those who need them. It's a fantastic example of how a little custom code, combined with smart app configuration, can significantly improve your store's user experience and maintain crucial compliance.

So, if you've been grappling with an intrusive accessibility widget, give this community-tested solution a try. It's a great way to show you care about all your customers while keeping your store looking its best!