With Webflow Ecommerce, you can make the checkout experience seamlessly integrate with the entire shopping experience. Let’s look at how to customize and style your Ecommerce utility pages — the shopping cart, checkout, and order confirmation.
In this lesson
- Specify the Cart type
- Customize the Cart animation
- Style different Cart states
- Style the Cart wrapper
- Understand checkout flows
- Customize the Checkout page
- Customize PayPal checkout
- Customize Checkout page error message
- Understand Order confirmation page and related elements
- Understand minimum and maximum transaction amounts
- Understand free orders
After adding, customizing, and styling a Cart button, you can customize the Cart itself. You can choose the type, the easing, and duration of the opening and closing animation, and the number of items to show in the Cart preview. You can also specify if you want to open the Cart when a product is added.
Specify the Cart type
Select the Cart element on the canvas and Open cart from the Element settings panel (D). Then, choose the Cart type.
Customize the Cart animation
Modify how the cart opens and closes by setting the transition Easing and Duration for the animation. You can test the effect in preview mode.
Style different Cart states
Now that you’ve set how the cart opens, you can style the different elements in its 3 states:
- Default (preview of Cart)
- Empty (when the Cart has no items)
- Error (when there’s an error and you cannot continue to checkout).
You can toggle between these states in the Cart wrapper settings.
Learn more: Cart element
Customize the Cart for different states
For the default state, you can specify how many items should appear in the cart preview.
For the error state, customize error messages that may appear when the checkout fails. Select the Error message text block to access the Error message settings. Select each message in the setting to view it on the canvas. To edit the message, click the pencil icon that appears next to the message in the setting when you hover over it.
You can Restore default error messages under Edit error message.
Once you’re done styling and customizing your Cart, close it the same way you opened it in Element settings panel > Open cart.
Style the Cart wrapper
When you open the Cart, you’ll see a semi-transparent overlay over your page surrounding the Cart. This is the “Cart wrapper.”
To change the background color of the wrapper:
- Select the Cart wrapper (you can use the Navigator for precision)
- Change the background color in the Style panel
- Choose an opaque color and add some opacity to make it clear that the Cart is a popup modal on the same page
You can restore the default style anytime by removing the applied style from the background-color property of the Cart wrapper.
Understand checkout flows
From a product page or product list, shoppers can either Add to cart or be taken directly to checkout with the Buy now option.
Note: Since PayPal checkout uses a different flow, Buy now only works on Stripe-enabled stores.
Learn more: Add to cart and Buy now
Checkout actions
Once a customer has added products to their cart, they can complete checkout in 3 ways, depending on your store settings:
- Go to the Checkout page to complete payment via credit card. On the Checkout page, they’ll also be able to apply a Discount code and/or provide additional information about their order. Note: this option requires Stripe.
- Use Web payments (like Apple Pay or Google Pay) for a fast checkout that bypasses the native Checkout page. Note: this option requires Stripe and the Enable web payments setting.
- Use PayPal checkout that opens a new modal where the shopper can authorize PayPal. The shopper is then taken to the Checkout (PayPal) page to complete their purchase, apply a Discount, and provide additional information. If you have PayPal enabled, make sure you’ve designed that page.
Note: You can also add the Web payments and PayPal buttons to the top of your native Checkout page to give shoppers more options after they navigate away from the cart.
Customize the checkout page
Once an online shopper has added products to their cart and they’re ready to submit an order, they’ll open the cart, choose to continue to checkout, and be taken to the checkout page (/checkout).
This is the first Ecommerce utility page you can customize. It’s found in the Pages panel and comes with default components. You can also update all Ecommerce pages, which include:
- Checkout
- Checkout (PayPal) - only needs customization if PayPal is enabled
- Order Confirmation
You can customize the checkout page by reordering and styling components and elements and as you like. Just note that deleting or hiding components with required fields can break the checkout form. You can re add Order items, Order summary, and Web payments whenever you like from the Add panel 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 about enabling web payments.
Additional info
Displays information entered in any of the additional info fields collected on checkout. Note: Make sure to update both Order and Checkout Confirmation, as these contain independent labels and fields that don't automatically sync.
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.
Customize PayPal checkout
If you want to use PayPal, you’ll need to design a separate Checkout (PayPal) template page.
If you don’t plan on using PayPal on your site, you don’t need to worry about this page. PayPal won’t be accessible without being enabled as a payment provider.
On the published site, when using PayPal, the shopping flow will look like this:
- Shopper clicks PayPal checkout from the Cart or the (regular) Checkout page
- PayPal payment modal opens and prompts shopper to login or enter payment details and shipping address
- Shopper returns to Checkout (PayPal) page after PayPal is authenticated
- Shopper selects a shipping method from Checkout (PayPal) page (if this applies)
- Shopper completes purchase
- Shopper is taken to the Order Confirmation page once purchase is complete
Designing the Checkout (PayPal) page
The Checkout (PayPal) page is automatically created when Ecommerce is enabled.
Note: For projects with Ecommerce enabled before the PayPal feature was available, the page is automatically created after adding a PayPal button to the Cart or Checkout page. If you’re missing this page, try adding a PayPal button to the cart.
Similar to the Checkout page, the Paypal page comes with default elements, but you can add and replace them from the Add panel.
The elements on the Checkout (PayPal) page work the same way as the Checkout page, but the two pages are not linked. You’ll need to manually give them a similar structure and appearance.
If you want to use Discounts or collect Additional info at checkout, make sure you add these elements to both the Checkout and Checkout (PayPal) pages.
How the PayPal Checkout page differs from Checkout
- Because your shopper is paying with PayPal, there are no inputs for payment information
- The only information your shopper must provide on this page is a shipping method
- If the order only has items that don’t require shipping, the shopper won’t need to select a shipping method. In this case, the page works more like a final confirmation before the purchase is completed.
Note: PayPal doesn’t send the entire billing address for your shopper to Webflow — on the published site, the Payment info section will only show a name and a billing address country
Customize Checkout page error message
If something goes wrong at checkout, your shopper will see a variety of error messages. You can preview and customize these messages by selecting the Checkout Form element and toggling to the Error state in the settings panel.
Then, click on the Error Message element to access Error Message Settings. Select each message in the setting to view it on the canvas. To edit the message, click the pencil icon that appears next to the message in the setting when you hover over it.
Note: if your store uses PayPal, you will need to customize the same error messages on the Checkout (PayPal) page as well.
Understand Order confirmation page and 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.
The Order confirmation page comes with a default template you can fully customize and style. 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.
You can add the following components individually within the order confirmation container:
- Order confirmation
- Order items
- Customer info
- Shipping method
- Payment info
- Order summary
- Additional info
- Downloads (beta)
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.
Note: For PayPal orders, this will only show a name and billing address country since PayPal does not send the full billing address to Webflow.
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.
Additional info
Can be used to collect customer data like phone number, gift messages, and personalized instructions.
Downloads (beta)
A list of all the downloadable files in the order. Learn more about digital downloads.
Design tip: 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.
Understand minimum and maximum transaction amounts
Payment processors have transaction limits. If a shopper has an order total below the minimum or above the maximum, they’ll get an error message at checkout.
The transaction limits depend on the payment processor and the store currency:
- PayPal has a minimum of 0.01, but there may be transaction maximums for shoppers using PayPal. See PayPal documentation for more details
- Stripe’s limits depend on the store currency. For example, in USD, there is a minimum of $0.50. See Stripe documentation.
When an order is below the minimum, the shopper will see the “Order minimum not met” error at checkout, which you can customize. Learn more about customizing error messages.
Understand free orders
Sometimes a shopper may have an order with a zero total because you’re giving something away or they’ve applied a 100% discount. In this case, Webflow will process the order from checkout without sending it to a payment processor.
Important notes on free orders:
Free orders will show up in your Webflow order manager, but not in your Stripe or PayPal dashboards, since we don’t send these orders to the payment processor.
Since PayPal checkout initiates before shipping is calculated, we can’t initiate PayPal checkout when the subtotal before shipping is 0. This means that on PayPal-only stores, the shopper won’t be able to complete the transaction when an order subtotal is 0, but they need to pay for shipping.
We recommend that PayPal-only stores offer free shipping or only use free orders with products that don’t require shipping. In this case, the shopper will use the native Checkout page rather than the Checkout (PayPal) page.
