Removing blue box whenever tapping or clicking elements
You may have noticed, especially on mobile devices, that when you press and hold a specific clickable element, a blue box appears around it.
This is a normal and expected behavior of most modern web browsers. It serves to help individuals with impaired vision differentiate between clickable and non-clickable elements.
If your website already has well-written and semantic code, like most official Shopify themes, this blue box can be removed without any negative impact on your visitors.
In this article, we’ll show you how to quickly remove the blue background from clickable elements on your website.
Before diving into the tutorial, make sure you download the theme. This way, if you face any issues, you can easily revert back to the original version.
Locating the Code File to Edit
- From your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.
- Find the file named theme.liquid. You can search for it using the search bar to ensure you select the correct one.
- Inside this file, press CTRL + F (or CMD + F on Mac) and search for:
- Paste the following code before the line you found and save:
gist
And that's it – you’re all set!