Setting the file. One moment.
Skill 01 · Storefront Best Practices
Subchapter 1.21
reference/layouts/order-confirmation.mdMarkdown7 KBView on GitHub
The order confirmation page displays immediately after successful checkout. Purpose: Confirm purchase, provide order details, guide customers on next steps, build post-purchase confidence.
Backend Integration:
Fetch order details from backend API immediately after checkout completes. Do this based on backend integrated. Never hardcode or mock order data.
Confirmation headline: Large, prominent heading, positive reassuring message, success icon (green checkmark), immediately visible above fold.
Example messages:
Subheading: Brief reassurance, email confirmation mention, delivery timeframe preview.
Example:
✓ Order Confirmed!
Thank you for your purchase! We've sent a confirmation
email to customer@example.com with your order details.Display requirements:
Example:
Order Number: #ORD-123456789Confirmation email was sent, email address used, check spam folder reminder (optional), resend email option (optional).
Display per item:
Price breakdown:
Medusa pricing note: Medusa stores prices as-is (not in cents). Display prices directly without dividing by 100. Example: If backend returns 49.99, display $49.99.
Example:
Subtotal: $139.97
Shipping (Express): $5.99
Tax: $11.20
Discount (SAVE10): -$14.00
─────────────────────────────
Order Total: $143.16Shipping address: Recipient name, complete address, phone number, shipping method selected, estimated delivery date.
Billing address: If same as shipping: “Same as shipping address”. If different: Show full billing address.
Payment information: Payment method type, last 4 digits (if card), alternative methods (PayPal email, Apple Pay). Never show full card number.
Timeline guidance: Order processing information, shipment timeline, when tracking becomes available, expected delivery date.
Example:
What's Next?
1. Order Processing (1-2 business days)
We're carefully preparing your items for shipment.
2. Shipment Notification
You'll receive an email with tracking information
when your order ships.
3. Delivery (By January 30)
Your package will arrive at your address.Benefits: Sets clear expectations, reduces “where’s my order” inquiries, builds confidence in process.
Full-width content, centered on page, all sections stacked vertically. Mobile-friendly by default.
Section order:
Continue Shopping (MOST IMPORTANT): Large, prominent button (primary color), returns to homepage or shop page. Text: “Continue Shopping” or “Back to Store”. Encourages repeat visits.
Create Account (for guest orders): Encourage account creation, pre-fill email from order, benefits messaging (“Track orders easily”). Optional, not required.
Print Receipt: Print-friendly CSS, button to print page.
Contact Support: Link to support page or contact form, phone number (if available), help with order questions.
Button layout: Primary action prominent (filled button), secondary actions less prominent (outline or link), adequate spacing (16-24px), mobile full-width.
Single column only: Full-width sections, generous padding (16-20px), larger text for important info, touch-friendly buttons.
Order number: Extra large (28-36px), highly visible, easy to read and reference, tap to copy (if implemented).
Buttons: Full-width or near full-width (min 90%), 48-56px height (touch-friendly), 16px spacing between buttons.
Quick actions:
Essential elements: