Docs
Code and developers

Fix the accelerated checkout buttons design

Shopify changed the accelerated checkout buttons in September 2024. Update your theme, or paste the CSS fix for your theme into Custom CSS.

Applies to: All Krown themes. Last checked: 2026-10-13.

On 2024-09-15 Shopify changed how the accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay, PayPal and others) are built. In older theme versions their size, corners and spacing no longer matched the theme. Krown fixed this in a theme update; the CSS on this page is only for stores that still run an older version.

Where to find it: Theme settings → Custom CSS

Which theme versions include the fix?

These versions and every later one style the new buttons correctly:

ThemeFirst version with the fix
Local2.4.2 (2024-08-27)
Combine2.4.3 (2024-09-13)
Borders1.3.2 (2024-09-16)
Split4.3.1 (2024-08-22)
Highlight3.3.1 (2024-09-16)
Kingdom5.3.1 (2024-09-16)
Seventhevery version

The best fix is to update your theme, see Update your Shopify theme. Your theme version is shown under the theme name in Online Store → Themes.

Add the CSS fix to an older version

Open Custom CSS

In the theme editor, open Theme settings → Custom CSS.

Paste the CSS for your theme and save

Copy the block for your theme below, paste it at the end of the field and select Save. Use only the block of your own theme.

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;
}

Should I remove the CSS after I update?

Yes, it is no longer needed: the updated theme styles the buttons itself. Custom CSS is carried over by the update, so delete the block from Theme settings → Custom CSS in the new version and check the product page and the cart.

Add jQuery for apps that need it

Krown themes do not load jQuery. If an app breaks because it expects jQuery, ask the app developer first, or load jQuery in theme.liquid.

JavaScript events for developers

Public JavaScript events and functions of Krown themes: refresh the cart drawer, and listen for cart updates, add to cart and variant changes.

On this page

Which theme versions include the fix?Add the CSS fix to an older versionSplitLocalCombineBordersHighlightKingdomShould I remove the CSS after I update?Related pages