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

Technical Q&A
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.

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.

5

Thanks for your response. They’re not supposed to be stacked, there is only supposed to be one alternative payment method dynamically chosen by Shopify below the checkout button, not multiple. This is the error.

6

This is not always true – in cart Shopify displays all accelerated checkout button which are possible in your store on this device.
Documentation says:

There is no control over what buttons are shown other than enabling/disabling these payment options.

It’s also not possible to do selectively with CSS.

What you can do with CSS is to limit the container element to only show one or two top buttons.

Like this – will show only one button:


:has(> shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-block-size: clamp(25px, var(--height-buy-buttons), 55px);
  max-height: calc( var(--shopify-accelerated-checkout-button-block-size) + 4px);
  overflow: hidden;
}

Can paste this code into “Theme settings”-> “Custom CSS”
Should probably do what you want it to do.

if this post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it