Skip to main content
⚠️ Important notice The theme snippet below applies to both versions of the Upcart cart modules — it makes Shopify render the accelerated-checkout buttons on the page, which is what Upcart needs regardless of module version. The .additional-checkout-buttons selector below is Shopify’s own class on the accelerated-checkout container, not an Upcart module class, so it is the same on either cart version.

​
Overview

Sometimes express checkout buttons are not clickable or do not appear inside Upcart. This is a common issue caused by how Shopify controls the rendering of express payment buttons within themes. This guide explains why this happens and what you can do to fix it.

​
Required Setup for the New Module

⚠️ Important: These steps apply to the new Express Payments module in Upcart, not the legacy version. To make express checkout buttons work correctly in Upcart, you must add a small snippet of code to your Shopify theme. Without this snippet, Shopify will not load the payment buttons properly inside the cart drawer.Before making these changes, verify that relevant payment methods (e.g., Shop Pay, PayPal, Apple Pay, Google Pay) are enabled in your Shopify Admin account settings. Without enabling these methods, the buttons will not be visible. Additionally, ensure that the snippet is placed directly under the opening <body> tag in your theme file (e.g., <body class="...">). If placed incorrectly, such as after the closing </body> tag, the express checkout buttons may not function properly.

​
How to Fix

  1. Go to your Shopify Admin.
  2. Navigate to Online Store > Themes > Edit Code.
  3. Open layout/theme.liquid, find the <body> line, and add the snippet below on a new line directly beneath it. It has to go there — not in cart-drawer.liquid or elsewhere — because the buttons must exist on every page where the cart can open.
  1. Save your changes and refresh your storefront.
  2. Reopen the cart drawer to verify that express checkout buttons (such as Shop Pay, PayPal, Apple Pay, or Google Pay) now appear and are clickable.
Refer to the Express Payments Module** Guide** for full setup instructions.

​
Why This Happens

Express payment buttons are fully managed by Shopify, not Upcart. This means:
  • Upcart doesn’t render its own buttons. It clones Shopify’s accelerated-checkout buttons from the page into the cart drawer, which is why they have to be present on the page in the first place — that’s what the theme snippet above guarantees.
  • Apple Pay will only show on Apple devices that have Apple Pay set up.
  • Upcart does not control which express buttons appear, since the content and functionality are handled by Shopify.
🎨 Note:
The buttons in Upcart act as visual containers, while Shopify controls their display and behavior. Upcart cannot modify their appearance or function.

​
Common Problems and Fixes

​
1. The Buttons Aren’t Rendered on the Page

This is the most common cause. Upcart clones Shopify’s buttons out of the page, so if the page doesn’t render them there is nothing to clone and the cart shows an empty space. What to do:
  • Add the theme snippet from How to Fix above, directly below the <body> line in layout/theme.liquid.
Don’t remove your theme’s own express buttons to “avoid a conflict”. Upcart depends on them being present. Removing them from the theme, or turning them off in theme settings, removes the source Upcart clones from — which makes this problem worse, not better.

​
3. CSS Is Blocking the Buttons

Some themes hide express buttons by default using CSS. For example:
What to do:
  • Review your theme’s CSS.
  • Ask your theme developer to ensure no CSS rules are hiding or disabling the buttons in the Upcart drawer.

​
4. Legacy Settings Are Interfering

If you used the older version of the Express Payments module, saved settings may conflict with the new setup. What to do:
  • Open the old Express Payments module (if still visible).
  • Uncheck any previous options and save.
  • Test again using the new module.

​
Still Having Issues?

​
Disable Shadow DOM in Upcart

In some cases, express payment buttons may fail to load or update because Shadow DOM is enabled in Upcart. What is Shadow DOM?
Shadow DOM isolates Upcart from the rest of your store’s code to improve stability. However, in rare cases, this separation can prevent Shopify’s express buttons from updating correctly. How to Disable Shadow DOM:
  1. Go to Upcart > Cart Editor > Settings > Cart settings, then expand Advanced Settings.
  2. Uncheck Render Cart in Shadow DOM.
  3. Save and test again.
⚠️ Important:
Always test your cart after turning off Shadow DOM, as it may affect how other apps or theme elements interact with Upcart. 💡 Note: Disabling Shadow DOM may fix this issue but can introduce CSS conflicts with your theme. See the Shadow DOM Setting doc for the full trade-off.

​
Need More Help?

If the issue persists after completing these steps:
  • Contact your theme developer to help remove conflicting code or settings.
  • You can also reach out to a Shopify Expert for advanced theme edits or integration assistance.

​
References

  • Shopify Help – Accelerated Checkouts
  • Shopify Dev Docs – Express Payment Buttons