{"id":6174,"date":"2024-04-14T19:28:33","date_gmt":"2024-04-14T11:28:33","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6174"},"modified":"2024-04-14T19:28:33","modified_gmt":"2024-04-14T11:28:33","slug":"personalize-the-shopping-cart-and-payment-experience","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/personalize-the-shopping-cart-and-payment-experience\/","title":{"rendered":"Personalize the shopping cart and payment experience"},"content":{"rendered":"\n
\n

By utilizing Webflow Ecommerce, you have the ability to customize the payment process to seamlessly blend in with the overall shopping journey. Let’s explore how to personalize and design your Ecommerce auxiliary pages \u2014 the shopping cart, payment, and order approval.<\/p>\n

Within this instructional session<\/strong><\/h5>\n
    \n
  1. Select the Cart style<\/li>\n
  2. Tailor the Cart transition<\/li>\n
  3. Design diverse Cart conditions<\/li>\n
  4. Revamp the Cart container<\/li>\n
  5. Comprehend payment progressions<\/li>\n
  6. \u200dModify the Payment page<\/li>\n
  7. Adjust the process of PayPal payment<\/li>\n
  8. Adapt the payment error alert<\/li>\n
  9. \u200dUnderstand Order acceptance page and associated components<\/li>\n
  10. Understand the least and utmost transaction amounts<\/li>\n
  11. Grasp costless orders<\/li>\n<\/ol>\n

    <\/p>\n

    Once you have inserted, personalized, and designed a Cart button, you can now personalize the Cart itself. You can opt for the kind, the smoothness, and the duration of the opening and closing animation, and how many items to display in the Cart preview. You can also set it to open when an item is added.<\/p>\n

    Select the Cart style<\/h2>\n

    Identify the Cart element on the design area and Initiate cart<\/strong> within the Element configuration panel <\/strong>(D). Then, pick the Cart<\/strong>.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    Personalize the Cart transition<\/h2>\n

    Adapt the way in which the cart initiates and concludes by setting the shift Smoothness<\/strong> and Duration<\/strong> for the animation. You can experiment with the effect in preview mode.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    Design distinct Cart states<\/h2>\n
    \n
    <\/div>\n<\/figure>\n

    Now that you’ve established how the cart reveals itself, you can stylize the various elements within its 3 modes:<\/p>\n

      \n
    1. Default (Cart overview)<\/li>\n
    2. Empty (when Cart has zero items)<\/li>\n
    3. Error (incase of checkout hindrance).<\/li>\n<\/ol>\n

      You can switch between these modes in the Cart container settings<\/strong>.<\/p>\n

      Discover more:<\/strong> Cart factor<\/p>\n

      Tailor the Cart for different statuses<\/strong><\/h3>\n

      For the default<\/strong> status, you can specify the quantity of items to display in the cart glimpse.<\/p>\n

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

      \n
      <\/div>\n<\/figure>\n

      You can Restore default<\/strong> error messages in Edit error message<\/strong>.<\/p>\n

      \n
      <\/div>\n<\/figure>\n

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

      Design the Cart container<\/h2>\n

      Upon opening the Cart, a semi-transparent overlay encompasses the Cart on the page. This is known as the \u201cCart wrapper.\u201d<\/p>\n

      To alter the backdrop color of the wrapper:<\/p>\n

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

        You can revert to the default style anytime by eliminating the applied style from the background-color characteristic of the Cart wrapper.<\/p>\n

        \n
        <\/div>\n<\/figure>\n

        Comprehend payment streams<\/h2>\n

        From a product page or product list, buyers can either Include in cart<\/strong> or proceed directly to checkout with the Purchase now<\/strong> choice.<\/p>\n

        Remark<\/strong>: As PayPal checkout follows a distinct flow, Purchase now<\/strong> is only effective on stores enabled with Stripe.<\/p><\/blockquote>\n

        Discover more: Add to cart and Purchase now\u00a0<\/p>\n

        Payment procedures<\/h3>\n

        Once a customer has added items to their cart, they can finalize payment in 3 methods based on your store settings:<\/p>\n

          \n
        1. Proceed to the Payment<\/strong> 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<\/strong>.<\/li>\n
        2. Utilize Online payments<\/strong> (such as Apple Pay or Google Pay) for a swift checkout that skips the original Checkout page<\/strong>. Reminder: this feature requires both Stripe and the <\/strong>Activate online payments option<\/strong>.<\/strong><\/li>\n
        3. Choose PayPal checkout<\/strong>thatopens a new pop-up where the buyer can authorize PayPal. The buyer is then directed to the Checkout (PayPal) <\/strong>page to finalize their purchase, redeem a Voucher, and provide more details. If you have PayPal activated, make sure you’ve customized that page.<\/li>\n<\/ol>\n

          Reminder<\/strong>: You may also insert the Online payments<\/strong> and PayPal buttons<\/strong> at the top of your default Checkout<\/strong> page to offer customers more alternatives once they move away from the cart.<\/p><\/blockquote>\n

          Modify the checkout page<\/h2>\n

          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).<\/p>\n

          \n
          <\/div>
          \u200d\u200dTo access the checkout page, launch the cart and press continue to checkout.<\/figcaption><\/figure>\n

          \u200d<\/p>\n

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