Notifications (Toast Messages)

What toast notifications are

Toast notifications are small pop-up messages that show for a short time. They help customers understand what just happened (like adding an item, unlocking a reward, or applying a coupon).

Where to find toast settings

Set the toast position

Pick where the toast appears on the screen. Common choices are:

• Bottom right (common on desktop)
• Bottom center (common on mobile)
• Top right (good if your cart drawer opens from the bottom)

Set the duration (how long it shows)

Duration controls how many seconds the toast stays on screen before it disappears.

• Short (1–2 seconds): best for “Added to cart”
• Medium (3–4 seconds): good for “Coupon applied”
• Long (4–6 seconds): best for “Reward unlocked” so customers notice it

Customize the text for each action

Set clear text for each toast so customers know what happened.

Add to cart toast

• Goal: confirm the product was added
• Good examples:
  • “Added to cart”
  • “Added! View your cart”

Reward unlocked toast

• Goal: celebrate and explain the reward
• Good examples:
  • “Reward unlocked: Free shipping!”
  • “You unlocked a free gift!”

Coupon applied toast

• Goal: confirm the discount is active
• Good examples:
  • “Coupon applied”
  • “Discount applied successfully”

Style the toast (colors, size, and look)

Use styling to match your brand and make the message easy to read.

Common styling options

• Background color: the toast box color
• Text color: make sure it has strong contrast
• Border radius: rounded corners vs square
• Shadow: helps the toast stand out
• Font size: keep it readable on mobile

Suggested colors (simple and clear)

• Add to cart: dark background with white text (neutral and clean)
• Reward unlocked: green or your brand “success” color
• Coupon applied: blue or green (signals “success”)

Recommended setup (quick presets)

Test your toast messages