Annoying Double Box in Your Shopify Cart Drawer? Fixing Baseline Theme's Safari Focus Glitch

Hey folks,

Ever been there? You've got your Shopify store looking slick, you've picked a fantastic theme like Baseline, and then bam – a weird visual glitch pops up that just won't quit. It's frustrating, especially when it's in a critical spot like your cart drawer, messing with that smooth checkout flow.

Recently, our community rallied around a common head-scratcher: a persistent "double focus box" appearing in the cart drawer of the Baseline theme, particularly for Safari users. Our friend fifth kicked off the discussion, sharing a screenshot of the issue.

The issue, as fifth described it, started with a double box around the "X" button to close the cart drawer. After trying some AI-generated code (which, let's be honest, can be a bit hit-or-miss for specific CSS tweaks), that particular box moved, but then it popped up around the "continue shopping" button instead. What a game of whack-a-mole!

What made this particularly tricky is that fifth confirmed it wasn't just a stray keyboard tab; it appeared automatically every time the cart drawer opened in Safari, even on the theme's demo store. This immediately flags it as a potential theme-level or browser-specific rendering quirk, not just user error.

Understanding the "Double Box" – Accessibility vs. Annoyance

This "double box" is almost certainly a browser's default CSS focus outline. Its primary purpose is to highlight elements that are currently "focused" – usually for users navigating with a keyboard. This is a crucial accessibility feature.

The Accessibility Debate: To Outline or Not to Outline?

The community discussion highlighted an important tension here. One member, Maximus3, strongly emphasized that this is an accessibility feature and warned against removing it with CSS. They suggested that if it's appearing without keyboard navigation, something might be "broken." While Maximus3's point about accessibility is absolutely valid and important, fifth's experience of it appearing automatically in Safari, even on the demo, suggests it's more of an unintended visual artifact than a deliberate keyboard interaction.

On the other hand, ShopIntegrations offered a more nuanced perspective, acknowledging the accessibility aspect but also providing a targeted fix for what is, in this context, a visual annoyance. They rightly pointed out that removing focus outlines completely can ding your accessibility score, as keyboard users rely on them to know where they are on the page.

Why Safari Behaves Differently: The :focus-visible Trick

As tim_1 initially pointed out, different browsers handle focus outlines differently, especially when it comes to :focus versus :focus-visible. The :focus pseudo-class applies when an element receives focus, regardless of how it got there (mouse click, keyboard tab, script). The newer :focus-visible pseudo-class, however, only applies when the browser determines that the focus should be visibly indicated to the user (typically, during keyboard navigation).

Safari, in some instances, can be a bit overzealous with its default focus outlines, showing them even on elements that were clicked with a mouse, which isn't always the most visually appealing. This is likely what fifth was encountering.

The Community's Best Solution & How to Implement It

While tim_1 offered a general CSS snippet:

:focus:not(:focus-visible) { 
    outline: none !important; 
}

...which aims to remove outlines only when the focus isn't "visible" (i.e., not from keyboard navigation), fifth reported it didn't quite solve the problem. This often happens because themes can have their own specific CSS rules that override general ones, or the browser's default behavior is simply too persistent.

The most effective and targeted solution came from ShopIntegrations, who suggested a fix specifically for buttons and links within the cart drawer:

.cart-drawer button:focus-visible, 
.cart-drawer a:focus-visible { 
outline: none !important; 
box-shadow: none !important; 
}

This code targets elements specifically within the .cart-drawer and uses :focus-visible to ensure it's still being mindful of potential keyboard navigation, but then explicitly removes the outline and box-shadow that might be causing the "double box" effect. Adding box-shadow: none !important; is a smart move, as some themes use box-shadows for focus states instead of or in addition to outlines.

Step-by-Step: Implementing the CSS Fix

Here's how you can add this code to your Shopify store to get rid of that pesky double box:

1. Go to your Shopify Admin: Log into your store's backend.
2. Navigate to Theme Customization: Go to Online Store > Themes.
3. Edit your Baseline Theme: Find your active Baseline theme, click on Actions > Edit code.
4. Find your CSS file: In the left sidebar, look for a file like theme.css, base.css, or custom.css within the "Assets" folder. The exact name can vary, but it's usually one of these. If you have a custom.css or a similar file specifically for custom styles, that's often the best place. Otherwise, add it to the very bottom of your main CSS file (like theme.css or base.css).
5. Add the CSS code: Scroll to the very bottom of the chosen CSS file and paste the following code:

   .cart-drawer button:focus-visible, 
   .cart-drawer a:focus-visible { 
   outline: none !important; 
   box-shadow: none !important; 
   }

6. Save your changes: Click the "Save" button in the top right corner.
7. Test in Safari: Clear your browser cache and test your cart drawer in Safari to see if the double box is gone.

My Takeaway for Store Owners

This thread is a fantastic example of the balance we often strike between perfect accessibility and visual aesthetics. While accessibility is paramount, sometimes browser quirks or theme implementations create visual noise that isn't truly serving an accessibility purpose for *all* users, especially when it appears without explicit keyboard navigation.

My advice? Always test thoroughly. If a visual glitch is detracting from your user experience and it's not a critical accessibility indicator for typical interactions (like a default outline appearing on a mouse click), a targeted CSS fix like this can be a lifesaver. Just be mindful of the :focus-visible pseudo-class to ensure you're not completely disabling outlines for keyboard users who truly rely on them.

Also, remember that while AI can offer quick code snippets, community discussions like ours often provide the nuanced, real-world solutions that account for browser-specific behaviors and theme intricacies. If you're using a newer theme like Baseline and encounter persistent issues, don't hesitate to reach out to the theme developers directly, especially if you can replicate it on their demo store – that's a strong indicator they should look into it!

Happy customizing!