Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Understand and customize your shopping cart, checkout, and order confirmation.
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.
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.
Select the Cart element on the canvas and Open cart from the Element settings panel (D). Then, choose the Cart type.
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.
Now that you’ve set how the cart opens, you can style the different elements in its 3 states:
You can toggle between these states in the Cart wrapper settings.
Learn more: Cart element
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.
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:
You can restore the default style anytime by removing the applied style from the background-color property of the Cart wrapper.
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
Once a customer has added products to their cart, they can complete checkout in 3 ways, depending on your store settings:
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.
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:
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.
Contains the entire checkout page form template elements. You can add it if you want to restore the default checkout page template.
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.
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.
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.
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.
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:
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.
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
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.
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:
Contains the entire order confirmation page template elements. You can add it if you want to restore the default page template.
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.
Shows the email and shipping address that the customer provided in the checkout form.
Displays the shipping method chosen during checkout.
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.
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.
Can be used to collect customer data like phone number, gift messages, and personalized instructions.
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.
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:
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.
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.
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.
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback
