Creating an Order Confirmation Screen in Adalo

An order confirmation screen gives users clear feedback that their purchase was successful and guides them to the next step. Without this screen, users may be unsure whether their payment went through

Why an Order Confirmation Screen Matters

After a user taps Pay, they expect immediate feedback. If nothing happens, users may wonder:

• Did my order go through?

• Was my payment successful?

• What should I do next?

An order confirmation screen solves this by:

• Confirming the purchase was successful

• Reassuring the user

• Providing clear next actions (such as tracking the order or placing another one)

---

Overview of the Flow

1. User completes checkout

2. User taps Pay

3. App navigates to an Order Confirmation screen

4. User sees confirmation messaging and next-step options

---

Step 1: Create the Order Confirmation Screen

1. In the Adalo Editor, create a new screen

2. Name the screen something clear, such as:

   • Order Confirmation

   • Order Placed

   • Order Success

This screen does not need to be complex. Simplicity improves clarity and performance.

---

Step 2: Add Confirmation Content

Add a Visual Element (Optional but Recommended)

• Add an Image component to the screen

• Use:

  • A static image, or

  • A lightweight GIF with subtle animation

Best practices

• Avoid large or complex Lottie animations

• If using animation, ensure the file size is small and optimized

• The visual should reinforce success (for example: checkmark, confetti, or celebration)

---

Add Confirmation Text

Include clear, reassuring messaging such as:

• “Order Confirmed”

• “Thank you for your purchase”

You may optionally personalize the message using Magic Text, such as:

• The user’s name

• The order number

Example:

“Thanks, {Logged in User → First Name}! Your order has been placed.”

---

Step 3: Add Action Buttons

Add two buttons to guide the user’s next steps.

Button 1: Order More

Purpose Allows the user to continue shopping.

Button Action

• Navigate → Go to Screen

• Destination: Menu or Product List screen

---

Button 2: Track Order

Purpose Allows the user to view the status of their order.

Button Action

• Navigate → Go to Screen

• Destination: Order Tracking screen

Note: The tracking screen can be built later. You can still link to it now or add the action once the screen exists. See this tutorial for how to build a tracking screen.

---

Step 4: Link the Pay Button to the Confirmation Screen

1. Select the Pay button on your checkout screen

2. Add the appropriate payment or order-creation actions

3. As the final action, add:

   • Navigate → Go to Screen

   • Destination: Order Confirmation screen

This ensures the user always sees confirmation after completing payment.

---

Example: User Experience Comparison

Without an Order Confirmation Screen

• User taps Pay

• Nothing happens or the screen stays the same

• User is unsure if the order was successful

With an Order Confirmation Screen

• User taps Pay

• Confirmation screen appears immediately

• User sees success messaging and clear next steps

This small change significantly improves usability and trust.

---

Best Practices

• Keep the confirmation screen simple and fast-loading

• Avoid heavy animations or large media files

• Always provide at least one clear next action

• Use friendly, reassuring language

• Treat this screen as part of your conversion experience

---

Summary

An order confirmation screen is a small but critical part of any checkout flow. In Adalo, creating one is as simple as:

1. Creating a new screen

2. Linking the Pay button to it

3. Adding confirmation messaging and navigation buttons

This simple step can greatly improve clarity, confidence, and overall user experience in your app.