Understand and customize your shopping cart, checkout, and order confirmation.
The shopping cart. A metaphor based on a mid-20th-century invention called a shopping cart.
In this video, we’ll cover choosing the cart type (these are a bunch of different starting points for your cart design). We’ll cover how to customize the animation on the cart. And finally, we’ll talk about styling the cart in different states.
Let’s start at the top. So where does all this start? It starts with a cart button. And you drag this right into your project from the add panel. All we have to do? Is go to our element settings. There’s a lot going on here, but we’re focused on this: the cart type. Which is why we put up on the screen an enormous number with the words “cart type.”
This is our default cart. We can preview it by pressing open cart. If we want to change it? Maybe we want it to go on the left? We can do that here, too. Same with the right side. And that last one? We can make the cart a dropdown.
And one note about dropdown: we gain the ability to set our alignment (that’s whether we want it to be aligned to the left side or the right side of the cart button). And we gain the ability to open our cart on click. Or, if you want it to open on hover, just choose hover.
Let’s talk animation. We’ll go over to preview mode to see this. Click on the cart? That’s the animation. Let’s close out. What about our other cart types? Here’s the default for left (the cart on the left side). And here’s the default for our cart on the right side. And finally, let’s look at the dropdown animation.
You might be fine with the defaults, but there’s a chance you want to be edgy. Or experimental. In the dropdown, we can control easing type and under that, we can adjust our duration. 1000 milliseconds? What is that in seconds? Let’s find out.
That’s 1 second. We can test the effect by going over to preview mode. Click our cart? That’s ease-out–quad over 1000 milliseconds.
What about designing in different states? There are three. Default, empty, and error.
But let’s look at this in a blank project. You might notice that we can’t immediately style default and error. That’s because we have to add products. And we’ll use a quick feature here — we’ll use CSV import. And if we don’t have something to import? If we don’t have a CSV of our own? We can use this CSV template.
This template is a good example of how to format bulk items in a CSV. But right now, we’re not going to make any changes. We’re just going to import it back into Webflow. Why? Good question.
Because: when we do? We get sample content to work with. (Sample products.) Once that’s imported, (or once we create products in our project), we’ve unlocked the ability to use other states.
So. Default. This is the default state. We can sample what it’ll look like with a certain number of items in our cart. Want to simulate three items added to the cart? Go to three. Want to simulate 15?
We can also style any of this. Font, layout, alignment — we have the same controls here that we have in a CMS collection. So that means changes to one cart item will affect others. Move something in one? It updates — it moves in all the others.
And what about that cart container? Want rounded corners? We can simply add rounded corners. Want to change the background — the cart container background color to blue? No. Because that looks hideous.
What about the empty state? This is what we see when don’t have something in our cart. We can change or add items — in this case, we’ll change the text to “there is literally nothing in your cart.” And we can add a GIF. What kind of GIF? A GIF that we can drag right into our cart. This will show up when our cart is empty.
That’s the empty state. What about error? Once we’re over in the error state, let’s click on the error message itself. So there are a ton of options here. And by a ton, we mean three. You can style it however you want, but you can also choose from three types of messages. Three errors that are generated based on what’s going on. Quantity not available, checkout disabled, or just a general error message.
Now. The benefit of having all these options is that you can make this whole thing look and feel however you want. Are you interested in drop shadows? So are we. Are you a fan of adding tremendous amounts of top margin to your elements? Go ahead. Want to make your price massive? Let’s do it. Have an idea in which your cart responds to the position of the mouse? Of course you can do that. This is Webflow.
We have a ton of content on interactions (and other topics) — as well as the CMS. This is all on Webflow University, so: check it out so you can learn more about how you can use everything.
In the meantime, here’s a slide that shows what we just talked about. We make these in Keynote.
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.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback