The Latest Order block shows a customer their single most recent order at a glance, right inside the Account Sidebar.
Tapping the card opens the full order details, and the All orders link at the top of the block takes the customer to their Orders tab. This block is only visible to logged-in customers, and it automatically hides itself when the customer has no orders.
How to Configure the Latest Order Block
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Account Sidebar.
Click the Blocks tab.
Click Add and select Latest Order (if it is not already in your list of blocks).
Click the Latest Order block to expand its settings, and make sure its toggle is turned on.
Set the Section Title and All orders link text (see Field Reference below).
If you like, drag the block to reorder where it appears in the sidebar.
Click Save.
Field Reference
Field | What It Does | Example |
Section Title | The heading shown at the top of the block. Defaults to "Latest order". | "Your latest order", "Recent order" |
All orders link text | The link shown at the top-right of the block. Tapping it opens the customer's Orders tab. Defaults to "All orders". | "View all", "Order history" |
CSS Reference
Merchants can restyle the Latest Order block with custom CSS. Add your rules in the Account Sidebar Design tab, under Custom CSS. The block uses the classes below.
Class | What it targets |
| The outer wrapper around the whole block. |
| The header row (title and All orders link). |
| The block title text. |
| The All orders link. |
| The tappable order card. |
| The product image container. |
| The placeholder icon shown when an item has no image. |
| The text area next to the image. |
| The status line (dot and label). |
| The small dot next to the status. |
| The bold arrival or delivered line. |
| The arrow icon on the right of the card. |
| The loading placeholder shown while the order loads. |
The status line also receives one of the modifier classes below, depending on the order's current status. These classes are shared with the Orders list, so any styling you apply also updates the status there. Combine a modifier with the status class to recolour a specific state.
Modifier class | Applied when the status is |
| Unfulfilled |
| In progress |
| Partially fulfilled |
| On hold |
| Scheduled |
| Request declined |
| Fulfilled |
| Cancelled |
| In transit |
| Out for delivery |
| Ready for pickup |
| Picked up |
| Attempted delivery |
| Delayed |
| Delivery issue |
| Delivered |
For example, to colour the status green once an order has been delivered:
.mage-sidebar-latest-order__status.mage-sidebar-orders__item-status--delivered {
color: #1a7f37;
}The status dot automatically follows the colour of the status text.
Troubleshooting
The block isn't showing
It is only visible to logged-in customers. If you are viewing your storefront while logged out, the block will not appear.
It automatically hides when the customer has no orders. Test with a customer account that has at least one order.
Check that the block toggle is turned on and that you clicked Save.
I can't find the Latest Order block in my list
It is not added by default. In the Blocks tab, click Add and select Latest Order.
The status or arrival time looks out of date
Order status and delivery timing come from Shopify and the carrier. The block refreshes shortly after an order updates, so give it a few minutes and reopen the sidebar.
The arrival estimate only appears when the carrier provides one. Some orders and carriers do not, in which case the card shows the status without an arrival line.
No product image is showing
The block uses the image of the first item in the order. If that product has no image in Shopify, a placeholder icon is shown instead.
Still need help or can't find the answers you're looking for? Reach out to the Mage Loyalty team through our live chat support.