Customize checkout page

The checkout page is the final step before an order is completed and plays a key role in conversion. This guide will help you understand its structure, editing options, and customization capabilities.

Select a page

In the editor’s top navigation bar, click the dropdown arrow next to Home to view the list of supported page types for the current market.

• Select Checkout to enter the default checkout template.

You can also access the checkout page directly from the Page management section.

Page structure

The checkout page is divided into the following sections:

• Contact information: Enter an email address and choose whether to receive promotional updates.
• Shipping method: Provide a shipping address and select a delivery option.
• Payment method: Display the payment methods supported by the store.
• Billing address: Enter the billing address.
• Order summary: Review product details, subtotal, shipping fee, and total order amount.

Global styles

The checkout page inherits the global styles of your store theme, including fonts and primary colors. You can also override specific elements to maintain brand consistency while highlighting key information.

Sidebar features

• Custom Liquid: Add custom Liquid code to implement flexible logic or dynamic content. For example, show VIP notices or exclusive discounts to specific customer groups.
• App embeds: A dedicated area at the top of the checkout page lets you embed third-party apps or marketing tools. For example, you can display coupon reminders or countdown timers to create urgency and boost conversions.

Live preview

After making changes, you can instantly preview the results in the editor—no need to switch back and forth between front-end and back-end views.