Fix accelerated checkout buttons design

On September the 15th 2024, Shopify released an update that might break the design of your store's accelerated checkout buttons. We've already patched a fix in all of our themes, but in case you need an urgent solution and don't want to update your theme yet, we've provided easy CSS snippets that you can paste into your theme's Custom CSS settings, which will fix the design for your store.

Split

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--button-size);
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius);
  --shopify-accelerated-checkout-skeleton-background-color: var(--main-text);
}
.template-cart .additional-checkout-buttons {
  float: none;
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: flex-end;
}
.template-cart .additional-checkout-buttons > div {
  min-width: 300px;
}

Local

:root {
  --button-checkout-size: 48px;
  --button-checkout-product-size: 60px;
}
@media screen and (max-width: 767px) {
  :root {
    --button-checkout-size: 40px;
    --button-checkout-product-size: 50px;
  }
}
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--border-radius-buttons);
  --shopify-accelerated-checkout-skeleton-background-color: var(--color-text-main);
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--button-checkout-size);
}
shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: var(--button-checkout-product-size);
}
.sidebar .additional-checkout-buttons {
  margin-top: 0.75rem !important;
}
@media screen and (max-width: 474px) {
  .sidebar .additional-checkout-buttons {
    margin-top: 0.5rem !important;
  }
}
.template-cart .additional-checkout-buttons {
  margin-top: 0 !important;
}

Combine

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--border-radius-buttons);
  --shopify-accelerated-checkout-skeleton-background-color: var(--color-text-main);
  --shopify-accelerated-checkout-button-block-size: 50px;
}
@media screen and (max-width: 767px) {
  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: 43px;
  }
}
.additional-checkout-buttons {
  margin-top: 0.5rem;
}

Borders

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--button-min-height);
  --shopify-accelerated-checkout-button-border-radius: var(--border-radius-buttons);
  --shopify-accelerated-checkout-skeleton-background-color: var(--color-scheme-text);
}
.template-cart .additional-checkout-buttons {
  margin-top: 12px;
}

Highlight

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--button-height);
  --shopify-accelerated-checkout-button-border-radius: 0;
  --shopify-accelerated-checkout-skeleton-background-color: var(--color-text);
}
.template-cart #CheckOut {
  margin-bottom: 0;
}

Kingdom

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 55px;
  --shopify-accelerated-checkout-button-border-radius: 0;
  --shopify-accelerated-checkout-skeleton-background-color: rgba(var(--color-body-txt), 1);
}
.shopify-payment-button {
  margin-top: 20px;
}
.additional-checkout-buttons {
  margin-top: 12px;
}