Removing blue box whenever tapping or clicking elements
You may have noticed before, especially on mobile devices, that if you press and hold a specific clickable element a blue box will appear around it.
This is a normal and expected behavior of most modern web browsers: this intended feature serves to help those with impaired vision to be able to differentiate from clickable to non-clickable elements.
Anyhow, if your website already has a well written and semantic code – like all official Shopify themes do from the get go -, this can be removed without causing any negative impacts to your visitors.
This is how you can quickly remove the blue background from clickable elements on your website.
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
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 type it on the search bar to ensure you select the correct one.
- Inside this file, press CTRL + F (or CMD + F on Mac) and search for:
</body> - Paste the following code before the </body> line you found and save:
And that's it – you are all set!
Was this article helpful?
