Accelerated Checkout Button - Modify Height?

[mrseb]

Hi. It seems like the height of the accelerated checkout button has changed its height in the last couple of months. Now it looks a bit ugly near my standard ATC button.

What is the best way to change the height of the accelerated checkout button so that it matches my ATC button?

(I don't wish to reduce the height on my ATC button, as I think it will be too skinny.)

Thanks!

[CodeWizard · Accepted solution]

In Custom CSS add this: (modify size and radius by your preferred size, max size supported is 55px)

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 46px;
  --shopify-accelerated-checkout-button-border-radius: 4px;
}

New API for accelerated checkout 

[mrseb]

It works! Thanks.

I actually saw those docs before, but the warning at the top of the CSS section made it sound like this is for the 'buy now' buttons on the new Checkout Extensibility checkout, rather than on store pages.

But I'm glad it works. Thanks again.