Customize shopping cart & checkout experience

Understand and customize your shopping cart, checkout, and order confirmation.

This video features an old UI. Updated version coming soon!

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.

In this lesson

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).

‍‍To go to the checkout page, open the cart and click continue to 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

‍Ecommerce template pages and utility pages

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.

PayPal Checkout Form contains all the default elements. Add it to restore the page to the default state.

‍

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)