🛍️

Cart page design

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

📋 Site audit: essential cart checklist

‣

📌 Table stakes elements for shopping cart pages 👇

‣

☝️ Optional elements

💡Ideas and tips

Cart details 🖋️

‣

🦄 Provide contextual urgency copy

‣

Test adding social proof to your urgency copy

‣

🦄 Add “Sale ends in” urgency countdown

‣

Let shoppers Save to Favorites (remove from Cart)

‣

Let shoppers Save for Later (within the Cart)

‣

Let customers choose where “Continue Shopping” goes

‣

Use a Quick Look modal for variant editing

‣

🦄 Show “Try another [variant]” link for OOS items

Order summary 🤑

‣

Provide a last chance to change to store pickup

‣

Make it easy to edit the cart (Remove, Edit and Save for Later)

‣

Quantify a “you saved” total

‣

Make it clear when an order qualifies for free shipping

‣

Downplay the promo code input field

‣

Combine the promo code box with gift card box

‣

Highlight savings / discounts in color

Shipping detail

‣

Use microcopy to indicate more shipping options available in checkout

‣

Consider a tooltip to expose additional shipping detail

‣

Let shoppers preview all shipping speeds and costs in the Cart (flat rate shipping)

‣

Consider providing a shipping estimator tool in the Cart (variable cost shipping)

‣

Make sure you invoke the right mobile keyboard for shipping estimators

‣

Try a shipping method selector with a sliding shelf (mobile-first)

‣

🦄 Show estimated arrival dates vs business days

‣

Emphasize estimated arrival dates in colored text

‣

🦄 Show order cutoff time in the user’s time zone

Checkout buttons 🛒

‣

Place Checkout buttons above and below cart contents

‣

Consider styling alternative payments as white-logo-buttons

‣

Consider offering more than one BNPL option

‣

🦄 Try a checkout button drawer 📲 on mobile

Other calls to action

‣

Test a “keep shopping” banner CTA

‣

Promote your loyalty program sign up

‣

Call out your satisfaction guarantee

‣

Consider including a graphic value prop near the Checkout button

‣

🦄 Add a “See similar” feature for OOS cart contents and Saved Items

‣

🦄 Let customers send “eGifts”

🫣 Cautions

‣

Be careful if you force customers to create an account to get free shipping

‣

Don’t place important links out of context

‣

Don’t bury your shipping carrot

Checkout buttons

‣

Avoid using too-similarly styled payment buttons

‣

Pin the Checkout button without its companion Express Checkout options

‣

Require an email address before Proceed to Checkout

‣

Be careful with competing CTAs near your checkout buttons

‣

Avoid using “Member Checkout” in place of “Sign In”

‣

Avoid placing shipping info outside of cart summary eye path

‣

Don’t show shipping cost only (without indicating default shipping service)

Back to Cart page ideas

👉 Follow on LinkedIn for daily ideas 💡