Horizon Theme Error ⚠️: Accelerated Checkout Buttons Stacked in Safari browser

Technical Q&A

Topic summary

Horizon theme cart drawer issue in Safari: accelerated checkout buttons (Apple Pay, etc.) stack vertically on desktop and mobile, taking significant space and reducing product visibility. A circular outline also appears around the cart drawer close “X”. Screenshots were provided and the merchant temporarily disabled accelerated checkout buttons on iPhone to mitigate impact.

Troubleshooting to date:

  • Disabled a speed/“page boost” app; issue persists.
  • Contacted a developer who recently optimized the site; awaiting results.
  • Asked if other Horizon users can replicate.

Suggestions and context from replies:

  • Clarified the problem is in the cart drawer UI, not the checkout.
  • Test with another theme (e.g., Dawn) to confirm if it’s Horizon-specific.
  • Horizon relies heavily on JavaScript; optimization/boost apps may conflict and break UI.
  • Possible workaround for the “X” outline: add Custom CSS to set the focus outline width to 0 on the close button.
  • Contact the theme’s official support via Shopify for a definitive fix.

Status: Unresolved/ongoing. Key open questions: whether the stacking is a Horizon bug or caused by third‑party optimization, and the actual sales impact (recommend running real traffic tests rather than relying on hypotheticals). Images are central to understanding the visual issue.

Summarized with AI on November 25. AI used: gpt-5.
1

When using Safari, the Shopify accelerated checkout buttons appear stacked (Desktop and Mobile), taking up loads of space and limiting the product view, potentially hindering sales (especially on mobile as that is where it is especially problematic!).

Here are screenshots:

IMG_2510.PNG
IMG_2510.PNG1125×2436 217 KB

Screenshot 2025-11-17 at 23.55.57
Screenshot 2025-11-17 at 23.55.571920×1283 262 KB

Also, notice the circle that appears around the ‘X’ button. This should not be there either and only appears in Safari (not Google Chrome at least, I haven’t tested other browsers).

Clearly, Horizon has some trouble being fully compatible with Safari, and since around 17–25% of internet users browse with Safari, this is a big deal.

Please fix ASAP.

Thanks,

Asa

(P.S. I have disabled accelerated checkout buttons temporarily to avoid hindering sales for iPhone users.)

2

I know you’re only 3rd day merchant, but this is not Checkout – this is card drawer.
sorry for the pun if you find it offensive
Just so it’s not confusing for others.

What are your expectation in regards to the accelerated checkout buttons? Have you tried other themes, say dawn to confirm if this is Horizon-only problem?

As for the outline, you can ad something like this to “Custom CSS”, either section or theme settings:

.cart-drawer__close-button {
    --focus-outline-width: 0;
}

However, I believe the root problem here is not with Horizon itself, but with page boost app(s)?

Horizon depends on JS more than previous themes, so fiddling with it does not always work out good.

1 Like
3

Thanks for this. I tried disabling the speed boost app I use but that didn’t work, so I also contacted a developer who recently made some edits to speed up my website.

We’ll see. If anyone has Horizon theme, please let me know if this is a problem for you.

4

For issues , or confusion, in themes contact that actual themes developer/support DIRECTLY.
In this case go to the help pages and talk a shopifiy support-advisor. https://community.shopify.com

For UI think it through first, if the buttons aren’t “stacked” then what.
Show them ALL on one row off screen forcing users to horizontally scroll for their preferred method.

Do some actual tests with traffic then, don’t leave it to hypotheticals.