Personalize the shopping cart and payment experience

Personalize the Cart transition

Adapt the way in which the cart initiates and concludes by setting the shift Smoothness and Duration for the animation. You can experiment with the effect in preview mode.

Design distinct Cart states

Now that you’ve established how the cart reveals itself, you can stylize the various elements within its 3 modes:

1. Default (Cart overview)
2. Empty (when Cart has zero items)
3. Error (incase of checkout hindrance).

You can switch between these modes in the Cart container settings.

Discover more: Cart factor

Tailor the Cart for different statuses

For the default status, you can specify the quantity of items to display in the cart glimpse.

For the error state, adjust error notifications that may surface during a payment failure. Choose the Error message text block to access the Error message settings. Click the pencil icon that appears next to the error message within the setting on hover to modify it.

You can Restore default error messages in Edit error message.

Once the styling and customization of your Cart is complete, close it as you opened it in the Element settings panel > Initiate cart.

Design the Cart container

Upon opening the Cart, a semi-transparent overlay encompasses the Cart on the page. This is known as the “Cart wrapper.”

To alter the backdrop color of the wrapper:

1. Select the Cart wrapper (you can employ the Navigator for exactness)
2. Alter the backdrop hue in the Style panel
3. Opt for a solid color and introduce some transparency to indicate it’s a popup modal on the current page

You can revert to the default style anytime by eliminating the applied style from the background-color characteristic of the Cart wrapper.

Comprehend payment streams

From a product page or product list, buyers can either Include in cart or proceed directly to checkout with the Purchase now choice.

Remark: As PayPal checkout follows a distinct flow, Purchase now is only effective on stores enabled with Stripe.

Discover more: Add to cart and Purchase now 

Payment procedures

Once a customer has added items to their cart, they can finalize payment in 3 methods based on your store settings:

1. Proceed to the Payment page to complete payment using a credit card. On the Payment page, they may also apply a Promo code and/or furnish additional details.concerning their purchase. Reminder: this choice needs Stripe.
2. Utilize Online payments (such as Apple Pay or Google Pay) for a swift checkout that skips the original Checkout page. Reminder: this feature requires both Stripe and the Activate online payments option.
3. Choose PayPal checkoutthatopens a new pop-up where the buyer can authorize PayPal. The buyer is then directed to the Checkout (PayPal) page to finalize their purchase, redeem a Voucher, and provide more details. If you have PayPal activated, make sure you’ve customized that page.

Reminder: You may also insert the Online payments and PayPal buttons at the top of your default Checkout page to offer customers more alternatives once they move away from the cart.

Modify the checkout page

After an online customer has added items to their cart and is prepared to place an order, they will open the cart, opt to proceed to checkout, and land on the checkout page (/checkout).

‍

This is the initial Ecommerce utility page you can tweak. It’s located in the Pages panel and arrives with default elements. You also have the option to modify all Ecommerce pages, which consist of:

• Checkout
• Checkout (PayPal) – only needs customization if PayPal is enabled
• Order Confirmation

You can personalize the checkout page by rearranging and designing components and elements as desired. Bear in mind that removing or concealing components with obligatory fields can disrupt the checkout form. You can always add back Order items, Order summary, and Online payments from the Add panel on the Checkout page.

Checkout form

Encompasses all the template elements of the checkout page form. You can include it if you wish to revert to the default checkout page template.

Order items

Displays all the items and variations in the cart. The buyer can confirm these are the items they wish to buy before finalizing the checkout process.

Order summary

Reveals the cart’s subtotal, any taxes and shipping fees, and the total cost of the order. This aids the buyer in understanding the breakdown of the amount they are paying.

Online Payments

Enables your clients to bypass the standard checkout process and swiftly complete purchases from your store using their digital wallets (e.g., Apple Pay or Google Pay).

Find out more about activating online payments.

Additional information

Presents data entered in any of the additional info fields collected during checkout. Reminder: Ensure to update both the Order form and Checkout Confirmation, as they have separate labels and fields that don’t sync automatically.

Design suggestion: You can also introduce a navigation bar and a footer on this page, including a “continue shopping” button that directs users back to the main store page.

Personalize PayPal checkout

If you wish to utilize PayPal, you must design a distinct Checkout (PayPal) template page. 

If you have no intention of incorporating PayPal on your site, you need not concern yourself with this page. Accessing PayPal would not be possible without activating it as a payment provider.

When utilizing PayPal on the live site, the purchasing sequence with PayPal will appear as follows:

1. Buyer selects PayPal checkout from the Cart or the (standard) Checkout page
2. The PayPal payment modal emerges, guiding the buyer to log in or input payment details and shipping address
3. Buyer returns to Checkout (PayPal) page after PayPal validation
4. Buyer picks a delivery method from Checkout (PayPal) page (if applicable)
5. Buyer finalizes the purchase
6. Buyer lands on the Order Confirmation page once the purchase concludes

Designing the Checkout (PayPal) page

The Checkout (PayPal) page is automatically generated when Ecommerce is activated.

Reminder: For projects with Ecommerce enabled pre PayPal inclusion, the page is automatically produced post adding a PayPal button to the Cart or Checkout page. If you can’t find this page, try adding a PayPal button to the cart.

Similar to the Checkout page, the Paypal page includes default elements, which you can supplement and replace through the Add panel. 

‍

The modules on the Payment Gateway (PayPal) page function identically to those on the Payment page, yet these two sections are not interconnected. You’ll have to manually ensure they have a comparable layout and appearance.

If you wish to employ Discounts or gather Extra details during checkout, remember to incorporate these components on both the Payment and Payment Gateway (PayPal) pages.

Distinguishing features of the PayPal Checkout page vs. Checkout

• Because the shopper pays via PayPal, there are no fields for inputting payment details.
• The only information expected from the shopper on this page is a preferred shipping method.
• If the order comprises only items that do not necessitate shipping, selecting a shipping method is unnecessary. In such scenarios, the page operates more like a final confirmation prior to completing the purchase.

Note: PayPal does not transmit the full billing address of the shopper to Webflow — on the published website, the Payment details section will solely display a name and the country of the billing address.

Personalize Payment page error notifications

If an error occurs during checkout, the shopper will encounter diverse error messages. You can preview and personalize these messages by choosing the Payment Form component and switching to the Error state within the configuration panel.

Next, select the Error Message component to access the Error Message Configurations. Navigate through the settings to view each message on the canvas. To edit a message, hover over it in the setting until a pencil icon appears, indicating you can edit it.

Note: If your store utilizes PayPal, you’ll need to customize the same error messages on the Payment Gateway (PayPal) page too.

Comprehend the Order confirmation page and associated elements

After submitting the order, the online buyer will be directed to the order confirmation page. This serves as another Ecommerce utility in the Pages panel > Ecommerce pages segment.

The Order confirmation page features a default layout that you can completely modify and design. Unlike the Payment page, all components on this page are removable and re-addable from the Add panel. You can incorporate the entire template with all the sections by dragging the order confirmation elements.

You can integrate the following elements individually within the order confirmation container: 

• Order confirmation
• Order items
• Client info
• Delivery method
• Payment details
• Order summary
• Extra info
• Downloads (beta)

Order confirmation

Encompasses all elements of the order confirmation page template. Add it if you desire to restore the default page template.

Order items

Displays all the products and variations in the cart. The buyer can affirm these are the items they intend to purchase before finalizing the checkout process.

Client info

Reveals the email address and shipping details entered by the customer in the checkout form.

Delivery method

Indicates the delivery method chosen during checkout.

Payment details

Presents the payment particulars and billing address provided by the customer during checkout.

Note: For PayPal transactions, only the name and billing address country are shown since PayPal does not deliver the full billing address to Webflow.

Order summary

Shows the subtotal of the cart, any applicable taxes and shipping fees, and the total amount of the order. This enables the shopper to comprehend the payment breakdown.

Extra info

Aids in collecting customer information such as phone numbers, gift messages, and customized instructions.

Downloads (beta)

Lists all downloadable files in the order. Discover more about digital downloads.

Design hint: You have the option to append a navbar and a footer to this page. Moreover, consider adding a button for redirecting users to the primary store page or your homepage.

Grasp the concept of minimum and maximum transaction sums

Payment processors enforce transaction restrictions. If a shopper’s order amount falls below the minimum or exceeds the maximum, they will encounter an error message during checkout. 

These transaction thresholds vary based on the payment processor and store currency:

• PayPal imposes a minimum of 0.01, although there might be transaction limitations for PayPal users. View PayPal’s documentation for additional insights
• Stripe’s restrictions are based on the store’s currency. For instance, in USD, the minimum is $0.50. Refer to Stripe’s documentation.

When an order is below the minimum threshold, the shopper will encounter the “Order minimum not met” error during checkout, which you can tailor. Learn more about customizing error messages.

Understanding free orders

Occasionally, a shopper may place an order with a zero total due to either a giveaway or a 100% discount. In such instances, Webflow will process the order post-checkout without transmitting it to a payment processor.

Key points regarding free orders:

Free orders will be visible in your Webflow order manager but not in your Stripe or PayPal dashboards since these orders are not relayed to the payment processor.

Since the PayPal checkout initiates before calculating shipping, initiating PayPal checkout is unfeasible when the subtotal preceding shipping amounts to 0. Consequently, in stores exclusively using PayPal, shoppers cannot finalize transactions with a 0 subtotal that involves shipping fees. 

We recommend that stores solely employing PayPal either offer complimentary shipping or solely utilize free orders for items not requiring shipping. In this instance, shoppers will utilize the native Payment page instead of the Payment Gateway (PayPal) page.