## Ensure your storefront customizations work with accelerated checkout buttons We’ve rolled out improvements to accelerated checkout buttons on storefront pages. These changes will ensure that checkout buttons support features like [Functions](https://shopify.dev/docs/apps/build/functions) and [Bundles](https://shopify.dev/docs/apps/build/product-merchandising/bundles), and will improve button performance. As part of these changes, the HTML for the accelerated checkout buttons has been moved into a custom element with a closed [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). This new implementation means that legacy styling and event tracking that targets the HTML of these buttons will no longer work correctly. > Note: > If you show accelerated checkout buttons on your product or cart pages, then use this guide to future-proof your storefront by implementing Shopify’s supported methods for styling them and tracking buyer behavior. These changes were released on September 15th, 2024. ## Step 1: Review and update your existing style customizations 1. From the Shopify admin of your development store, go to **Online Store** > **[Themes](https://admin.shopify.com/themes)** and find the theme you want to test. 1. Click the **`…`** button, and then click **Preview**. 1. Navigate to any pages where you show accelerated checkout buttons, such as the product or cart pages, and ensure your buttons are showed in the manner you expect. 1. Use the following supported CSS custom properties to make changes, and ensure that the buttons match the remainder of your theme. These CSS custom properties can be applied to accelerated checkout buttons on product and cart pages. | CSS custom properties | Description | Default | |-----------------------|-------------|---------| | `--shopify-accelerated-checkout-button-block-size` | The height of the individual rendered wallet button. The minimum supported height is `25px`, and the maximum supported height is `55px`. | `44px` on product pages, `42px` on cart in the vertical layout stack. | | `--shopify-accelerated-checkout-button-inline-size` | (Cart only) The height of the individual rendered wallet buttons when in the horizontal row layout. The minimum supported height is `25px`, and the maximum supported height is `55px`. For more information on the horizontal and vertical layouts only on cart pages, see [Additional alignment properties](/docs/storefronts/themes/pricing-payments/accelerated-checkout#additional-alignment-properties). | `54px` | | `--shopify-accelerated-checkout-button-border-radius` | The corner radius of the rendered wallet buttons. | `0px` on product pages, `4px` on cart. | | `--shopify-accelerated-checkout-button-box-shadow` | The drop shadow cast by the rendered wallet buttons. | `none` | | `--shopify-accelerated-checkout-skeleton-background-color` | The background color of the loading skeleton that appears before the buttons are able to render. | `#dedede` | | `--shopify-accelerated-checkout-skeleton-animation-opacity-start` | The initial opacity in the animation on the loading skeleton, which fades from the start value, to the end value, and back again. Accepts any valid value for [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). | `1` | | `--shopify-accelerated-checkout-skeleton-animation-opacity-end` | The opacity transitioned to in the animation on the loading skeleton, which fades from the start value, to the end value, and back again. Accepts any valid value for [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). | `0.5` | | `--shopify-accelerated-checkout-skeleton-animation-duration` | How long the opacity transition takes to complete (from start, to end, and back to start). | `4s` | | `--shopify-accelerated-checkout-skeleton-animation-timing-function` | The timing-function for the opacity animation on the skeleton. | `ease` | | `--shopify-accelerated-checkout-inline-alignment` | (Cart only) The positioning of the wallet buttons within the container element when in the horizontal row layout. Accepts any valid value for [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#values). | `start` | | `--shopify-accelerated-checkout-row-gap` | (Cart only) The vertical spacing between the rendered wallets buttons in the vertical stack layout. | `8px` | We recommend applying these CSS custom properties on the `shopify-accelerated-checkout` and `shopify-accelerated-checkout-cart` element selectors, which are the two custom elements used to render accelerated checkout buttons.

1. Add the CSS custom properties to your theme and publish it so your store is compatible with any future accelerated checkout button updates. > Caution: > ​The accelerated checkout buttons hide their HTML in a custom element with a closed [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). This means that any styling or event tracking that targets the HTML structure of these buttons will not work. Please use the above variables to ensure future compatibility. ## Step 2: Review and update any third party analytic tools Because accelerated checkout buttons now load using a custom element with a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), only [composed events](https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/API/Event/composed&sa=D&source=docs&ust=1723508758073725&usg=AOvVaw2HGxq9eWPBq-cEmWL_eSr2) will be available for merchants that want to track button clicks. You therefore shouldn't depend on any markup to track usage other than the elements listed in this section. 1. From the Shopify admin of your development store, go to **Online Store** > **[Themes](https://admin.shopify.com/themes)**. 1. Select the preview feature for the theme you want to test. 1. Navigate to any pages where you show accelerated checkout buttons, such as the product or cart pages, and ensure your buttons are showed in the manner you expect. 1. Inspect the buttons and note the updated markup structure. If you are using tools for tracking clicks on accelerated checkout buttons, then you can listen to the following elements for clicks: * Shop Pay: `` * Amazon Pay: `` * Apple Pay: `` * Google Pay: `` * PayPal: ``