Description
On desktop viewports, the checkout page utilizes a two-column layout (Form on the left, Order Summary on the right). However, as the customer scrolls down the lengthy left column to input their billing and payment data, the right column (Order Summary) scrolls out of view. The customer loses sight of their total price and the items they are buying at the exact moment they are inputting their credit card, causing hesitation and cart abandonment.
Proposed Solution
- Audit the CSS grid/flexbox architecture governing the desktop
/checkout layout.
- Apply a dynamic, sticky CSS positioning to the right-hand
<OrderSummarySidebar /> component: position: sticky; top: 2rem; align-self: start;.
- This guarantees that as the user scrolls down the lengthy payment form, the order summary perfectly tracks their movement, remaining locked in the viewport. It provides constant visual reassurance of the purchase context, significantly reducing cognitive load and checkout abandonment.
Description
On desktop viewports, the checkout page utilizes a two-column layout (Form on the left, Order Summary on the right). However, as the customer scrolls down the lengthy left column to input their billing and payment data, the right column (Order Summary) scrolls out of view. The customer loses sight of their total price and the items they are buying at the exact moment they are inputting their credit card, causing hesitation and cart abandonment.
Proposed Solution
/checkoutlayout.<OrderSummarySidebar />component:position: sticky; top: 2rem; align-self: start;.