Receipts7 min read•Audience: Developers, Designers
Dynamic Collections & Order Receipts
Step-by-step blueprint for building production-grade transactional order confirmations and multi-item invoices.
Key Takeaways
- Transactional receipts require combined loops, calculations, and conditional shipping discounts.
- Build a resilient 3-column line item structure (Thumbnail, Name/Qty, Price).
- Format currency using the {{formatCurrency price}} helper.
- Include tax, shipping, and discount summary rows at the bottom of the collection.
Receipt Architecture Blueprint#
A resilient receipt layout consists of three parts:
code
text
This pattern renders cleanly across all devices: on mobile, line items stack naturally while financial numbers stay right-aligned.
Designing Responsive Line Items#
To build line items that look balanced on both desktop and mobile:
- Use an asymmetric 3-column row: 20% for the product thumbnail, 55% for the title/options/SKU, and 25% for quantity and price.
- Set horizontal padding to
5px 10pxto create a clean gap between thumbnail and description. - On mobile, the thumbnail remains sharp and adjacent to the item description without excessive horizontal squishing.
Frequently Asked Questions
Can I show discounts conditionally only when a coupon was applied?
Yes. Wrap the discount row in {{#if order.discountAmount}}...{{/if}} so that zero-discount orders omit the row entirely.
How do I handle international currency symbols like € or £?
Pass the currency symbol directly or configure your server to format prices prior to JSON payload delivery.