Overview
This module allows you to display express payment options that are active on your Online Store page below the UpCart's Checkout button.
Express Payment, or Accelerated Checkout buttons allow returning customers complete their order more quickly, as they use their saved payment information. If you are not familiar with these, check out Shopify Documentation for more info.
How to display Express Payments
To allow UpCart to display your express payment buttons, you will need to add a short strip of code into your theme's files. Don't worry, you don't need any coding experience for this, it is as easy as copy + paste, but you need to find the proper location for the code placement.
Steps to display Express Payments in UpCart:
Open the code editor for your Shopify theme.
Open the
layoutfolder.Open a file called
"theme.liquid".Find the line that contains
<body>.Make sure the tag you found is not a closing
</body>tag (with a/in it).Find an opening tag that starts with
<body, it can have more code right after it like<body class=" ... ">. It is generally below the closing</head>tag.
Add a new line below the line with
<body>and paste the code below.
{% if additional_checkout_buttons %}
<div style="display: none !important">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}6. Save the file.
Here is an example of what it should look like:
After following these steps, express Payments will show below the checkout button.
Would you prefer not to modify the code, or do you need any assistance?
We highly recommend hiring a developer or a Shopify Expert to help you insert the provided code into the proper location. Your theme developer may also be able to help you with your request.
Accelerated Checkout Buttons Design
This section allows you to adjust how the buttons appear in UpCart.
Button Height
Allows you to set the height of the buttons on desktop versus mobile layout.
Checkout Button Alignment
Allows you to set the alignment of the buttons. Available options: Left, Right, Center, and Space Between.
Row Gap
Specifies the spacing between the buttons.
Hide Buyer Consent
Hides the buyer consent information for accelerated checkout buttons. Typically displayed when a subscription product is in the cart, this information occupies vertical space, but enabling this setting is optional.
Render Cart in Shadow DOM
Shadow DOM will ensure UpCart, and the Accelerated Checkout Buttons are not affected by the theme's CSS code. It also automatically enables the same setting found in UpCart's Settings > Advanced Settings.
⚠️ Important
If you have any settings saved in the legacy version of the express payment buttons, please make sure to de-select any options you have currently selected, as they will interfere with the functionality of the current version.