Customize the checkout experience

Learn how to customize the checkout and order confirmation pages.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

With Webflow Ecommerce, you can make the checkout experience seamlessly integrate with the entire shopping experience. To do that, customize and style the Ecommerce utility pages: the “checkout” and the “order confirmation” pages.

In this lesson
  1. ‍Checkout page and checkout page elements
  2. ‍Order confirmation page and order related elements

Checkout page and checkout page elements

Once an online shopper has added some products to their cart and they are ready to submit their order, they’ll open the cart, choose to continue to checkout, and they’ll be taken to the checkout page (/checkout).

To go to the checkout page, open the cart and click continue to checkout
‍To go to the checkout page, open the cart and click continue to checkout.

This is the first Ecommerce utility page that you can customize. It’s found in the Pages panel and it comes with some default components already added to the page.

‍‍Ecommerce template pages and utility pages
‍Ecommerce template pages and utility pages

Customizing the checkout page

You can customize this page by reordering the components and elements and styling them as you please. However, note that deleting or hiding components which contain required fields may break the checkout form. You can add the "order items", "order summary", and/or "Web Payments" components back later if you change your mind. They will be available in the Add panel when you’re on the checkout page.

Checkout form

Contains the entire checkout page form template elements. You can add it if you want to restore the default checkout page template.

Order items

Shows all the products and variants in the cart. The shopper can confirm that these are the products they want to purchase before they complete the checkout process.

Order summary

Shows the subtotal of the cart, any taxes and shipping rates, and the total of the order. This helps the shopper see a breakdown of the price they're paying.

Web Payments

Allows your customers to skip the default checkout process and quickly check out of your store  using their digital wallets (such as Apple Pay or Google Pay).

Learn more: Web Payments

Design tip
You can also add a navbar and a footer to this page, even a “continue shopping” button that takes users back to the main store page.

Order confirmation page and order related elements

Once the order is submitted, the online shopper will be taken to the order confirmation page. This is another Ecommerce utility page in the Pages panel → Ecommerce pages section.

It also comes with a default template that you can customize and style fully. Unlike the checkout page, all components on this page can be removed and re-added from the Add panel. You can add the whole template with all the blocks by dragging in the order confirmation components. Or, you can add the following components individually within the order confirmation container: order items, customer info, shipping method, payment info, order summary.

Order confirmation page elements
Order confirmation

Contains the entire order confirmation page template elements. You can add it if you want to restore the default page template.

Order items

Shows all the products and variants in the cart. The shopper can confirm that these are the products they want to purchase before they complete the checkout process.

Customer info

Shows the email and shipping address that the customer provided in the checkout form.

Shipping method

Displays the shipping method chosen during checkout.

Payment info

Shows the payment info and billing address that the customer provided during checkout.

Order summary

Shows the subtotal of the cart, any taxes and shipping rates, and the total of the order. This helps the shopper see a breakdown of the price they're paying.

Design tip
Again, you can add a navbar and a footer to this page. You can also add a button that takes users back to the main store page or your homepage.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.