Customize The Checkout
Styling the checkout with custom CSS and JavaScript, blocking checkout unless conditions are met, and other display-level customizations beyond basic settings.
Add a message above the email field on the checkout
How to display a custom message above the email field on checkout using Twig in your checkout template, with optional custom CSS to style it.
Add a message above the shipping rates
How to show a custom message above the shipping rates on the cart and checkout using Twig in your template — useful for delivery notes or shipping policy reminders.
Add an upsell modal to the checkout
How to show a modal at checkout that lets customers quickly add more products before completing their order.
Add custom validation to your checkout
How to use the checkout-submit event to add custom JavaScript validation, including conditionally required fields.
Automatically select the first shipping rate
How to have the cart and checkout auto select the first shipping rate returned for the customer's address.
Let customers add a donation at checkout
How to let customers add an optional, self-chosen donation amount to their order at checkout — a common ask for nonprofits and cause-driven brands selling alongside their products.
Prevent shipping to PO boxes
How to block customers from checking out with a PO Box shipping address using custom JavaScript added to your checkout template.
Style the address autocomplete widget
How to adjust the look of the country/state autocomplete on checkout so it matches the rest of your custom-styled checkout, since it automatically follows your existing input styling.