Skip to content

Shop emails

The emails a shop sends its customers: order confirmation, dispatch, collection, tracking, cancellation, returns, gift cards, review requests, password resets, bill pay, table bookings, fundraising, the email-address confirmation for marketing sign-ups, and a shop's reply to a contact form message. How they're sent and rendered is in Transactional email; this page covers how they look.

Decisions

  • One layout for every customer email. They all use the order confirmation's (orderPlaced) layout, so a customer sees the same shop from the first email to the last. Until October 2026 only the confirmation and the subscription emails had it, and the dispatch email a customer got next looked like a different shop's.
  • The shop's brand, never Badger's. Colours, font, logo and footer come from the shop's email branding (EmailBranding). Shop staff get Badger-branded emails instead: see Back-office emails.
  • Each template carries its own copy of the layout. There is no shared layout fragment (masters/master.html is unused), because the render tests use a bare Thymeleaf engine rooted at templates/bootstrap/email/, which can't resolve email/... fragment paths. The table-booking emails are the exception: they share reservation/parts.html. A change to the layout is a change to every template.
  • Email campaigns use the banner and footers, not the rest. A campaign (campaign.html) opens with the same primary-colour banner and logo, without the emoji or heading, because the campaign's own blocks say what it's about, and ends with the footer inside the card and its own footer (why you got it, unsubscribe, who sent it). The blocks between use the layout's colours and button.
  • What doesn't use it. The -clean dispatch and partial-dispatch variants, which a site picks with orderDispatchTemplate, keep their older plain look on purpose. The fulfiller and staff emails (orderFulfilment*, orderReturnRequestedStaff, the *Fulfilment subscription emails, fundraiser/admin-*, contactUsReceived) aren't customer emails and don't use it.

The layout

From top to bottom, inside a white 600px card with 8px corners on the shop's background colour:

  1. Banner. A gradient of the shop's primary colour with the logo (or the orderConfirmation.logoURL message), an emoji for what happened (✓ placed or collected, 🚚 dispatched, 📦 tracking or returns, 🛍 ready to collect), a white heading and a one-line subtitle.
  2. Order number and date, when the email is about an order.
  3. Sections, 24px padding, divided by #eef0f3 lines. Labels are 11px uppercase #85878e; body text #51545e; anything to stand out (names, totals) is in the shop's secondary colour. Facts go in grey panels (#f8f9fb, 6px corners); delivery and collection notes go in a box tinted with the primary colour (primaryColor + 1A).
  4. One main button in the primary colour, 6px corners. A second action is an outline button.
  5. Footer inside the card: the shop's footer text, or the orderConfirmationEmail.companyAddress message.
  6. Footer outside the card: "Questions? Email" with orderConfirmationEmail.companyEmail, or the email's own line where it had one (reply to this email, why you got it).

Rules for a new customer email

  • Start from orderDispatched.html and keep the layout as it is.
  • No new English: every word comes from messages.properties, as for the storefront.
  • Add a render test that checks what the customer has to see (the code, the amount, the link).