Updating accelerated checkout buttons

Starting September 15, 2024, Shopify has updated the accelerated checkout buttons (also known as dynamic checkout buttons). Those buttons (if enabled) show a one-click button on product pages and integrate with third-party providers such as Shop Pay, Apple Pay, or Amazon Pay.

Shopify introduced those changes to ensure that the buttons support new platform features. From the theme perspective, those buttons are entirely functional even on older theme versions, but the styling of the buttons might be slightly incorrect.

All our themes have been upgraded in August 2024, so if you are using Prestige 10.2.0 (or newer), Impact 6.2.0 (or newer), Focal 12.2.0 (or newer) or Warehouse 6.1.0 (or newer), you have nothing to do, your theme is already updated. You also have nothing to do if you do not use dynamic checkout buttons on your product pages.

If you are using an older version and would like to ensure that the buttons look their best, the recommended approach is to upgrade your theme to the latest version. This will ensure that your store can take advantage of all the latest features.

If you are using Prestige 10.2.0 (or newer), Impact 6.2.0 (or newer), Focal 12.2.0 (or newer) or Warehouse 6.1.0 (or newer), your store is already upgraded, you have nothing to do.

If upgrading is not possible, you can manually apply a fix. To do that, open the theme editor and click on the "Theme settings" icon:

Then, click on the "Custom CSS" box:

Finally, copy-paste the code below based on your theme (make sure to only copy-paste the code applicable to your theme), and click on "Save" to persist the changes.

If the "Custom CSS" already contains some code, copy-paste the code at the end, after all the existing code.

Prestige

If you are using the theme Prestige, copy-paste the code below:

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 44px;
  --shopify-accelerated-checkout-button-border-radius: var(--button-border-radius);
  --shopify-accelerated-checkout-button-box-shadow: none;
}

.additional-checkout-buttons {
  width: 100%;
}

Impact

If you are using the theme Impact, copy-paste the code below:

shopify-accelerated-checkout, shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 54px;
  --shopify-accelerated-checkout-button-border-radius: var(--rounded-button);
  --shopify-accelerated-checkout-button-box-shadow: none;
}

@media screen and (min-width: 700px) {
  shopify-accelerated-checkout, shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: 60px;
  }

  .quick-buy-drawer shopify-accelerated-checkout, .quick-buy-drawer shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: 46px;
  }
}

Focal

If you are using the theme Focal, copy-paste the code below:

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--button-height);
  --shopify-accelerated-checkout-button-border-radius: var(--button-border-radius);
  --shopify-accelerated-checkout-button-box-shadow: none;
}

Warehouse

If you are using the theme Warehouse, copy-paste the code below:

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 48px;
  --shopify-accelerated-checkout-button-border-radius: 2px;
  --shopify-accelerated-checkout-button-box-shadow: none;
}