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.
How to Fix
Go to your Shopify Admin.
Navigate to Online Store > Themes > Edit Code.
Add the following code snippet to your theme files (usually in theme.liquid or cart-drawer.liquid):
{% if additional_checkout_buttons %} <div style="display: none !important"> {{ content_for_additional_checkout_buttons }} </div> {% endif %}Save your changes and refresh your storefront.
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:
Shopify only allows express buttons to appear once per page (for example, on a product page, cart drawer, or checkout). If they are already displayed elsewhere, Shopify will block them inside Upcart.
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. Your Theme Has Extra Express Checkout Buttons
If your theme or another app already adds express buttons (for example, in the product page or another cart drawer), Shopify will block Upcart’s version.
What to do:
Check your theme files (for example, theme.liquid, cart.liquid, or drawer.liquid) for additional express button code.
Remove extra instances if possible, or contact your theme developer to remove them.
2. Theme Settings Show Express Buttons Elsewhere
Some themes include express checkout button options in their settings.
What to do:
Go to Online Store > Themes > Customize.
Disable express button options on the product page or cart drawer if they are enabled.
Shopify prioritizes those over Upcart, so turning them off helps avoid conflicts.
3. CSS Is Blocking the Buttons
Some themes hide express buttons by default using CSS. For example:
.additional-checkout-buttons { display: none !important; }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:
Go to Upcart Editor > Settings > Advanced Settings.
Uncheck Render Cart in Shadow DOM.
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.
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.