• Ensure your storefront customizations work with accelerated checkout buttons
  • Step 1: Review and update your existing style customizations
  • Step 2: Review and update any third party analytic tools

Upgrade accelerated checkout

Note

Any theme updates leading up to September 15th, 2024 that address the changes outlined in this guide will be exempt from the "one release per month" rule. Please note in your update request that you are following the steps outlined in this guide to address the upcoming changes with accelerated checkout buttons.

Ensure your storefront customizations work with accelerated checkout buttons

Anchor link to section titled "Ensure your storefront customizations work with accelerated checkout buttons"

We’re rolling out improvements to accelerated checkout buttons on storefront pages. These changes will ensure that checkout buttons support features like Functions and 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. This new implementation means that existing 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 will begin rolling out on September 15th, 2024.

Step 1: Review and update your existing style customizations

Anchor link to section titled "Step 1: Review and update your existing style customizations"
  1. From the Shopify admin of your development store, go to Online Store > Themes and find the theme you want to test.
  2. Click the … button, and then click Preview.
  3. 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.

Note

Preview the changes by applying a X-Accelerated-Checkout-Preview: true HTTP header to your storefront page requests. This will ensure a consistent preview experience if your theme uses Section Rendering API to render page sections that include accelerated checkout buttons. To disable changes, apply a X-Accelerated-Checkout-Preview: false HTTP header. This parameter will only work on development stores for testing purposes.

Alternatively, preview the changes on a store by adding the ?accelerated-checkout-preview=true query parameter to the end of the page’s URL. To disable changes, use the ?accelerated-checkout-preview=false parameter. This parameter will only work on development stores for testing purposes.

  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. 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. 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. 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. 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 ready and future proofed when the accelerated checkout button markup changes on September 15th, 2024.

Caution

​The accelerated checkout buttons hide their HTML in a custom element with a closed shadow DOM. This means that any styling or event tracking that targets the existing HTML structure of these buttons will break. Please use the above variables to ensure future compatibility.

Step 2: Review and update any third party analytic tools

Anchor link to section titled "Step 2: Review and update any third party analytic tools"

Because accelerated checkout buttons now load using a custom element with a shadow DOM, only composed events 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.
  2. Select the preview feature for the theme you want to test.
  3. 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.

Note

Preview the changes by applying a X-Accelerated-Checkout-Preview: true HTTP header to your storefront page requests. This will ensure a consistent preview experience if your theme uses Section Rendering API to render page sections that include accelerated checkout buttons. To disable changes, apply a X-Accelerated-Checkout-Preview: false HTTP header. This parameter will only work on development stores for testing purposes.

Alternatively, preview the changes on a store by adding the ?accelerated-checkout-preview=true query parameter to the end of the page’s URL. To disable changes, use the ?accelerated-checkout-preview=false parameter. This parameter will only work on development stores for testing purposes.

  1. Inspect the buttons and note the new 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: <shop-pay-wallet-button>
    • Amazon Pay: <shopify-amazon-pay-button>
    • Apple Pay: <shopify-apple-pay-button>
    • Google Pay: <shopify-google-pay-button>
    • PayPal: <shopify-paypal-button>
  2. Update your analytics scripts to begin listening for clicks on the new elements so your store is ready and future-proofed when the accelerated checkout button markup changes on September 15th, 2024.

On this page

  • Ensure your storefront customizations work with accelerated checkout buttons
  • Step 1: Review and update your existing style customizations
  • Step 2: Review and update any third party analytic tools