What a Purchase Timeline Actually Does
When a customer wants to reorder something from six months ago, they do one of two things. They search their inbox for a confirmation email, scroll through dozens of promotional messages, and eventually give up. Or they log into your store, click “my orders,” and land on a paginated list that shows order numbers, dates, and totals. Neither of these helps them remember what they actually bought.
A purchase timeline fixes this. It is a single page that shows every order a customer has placed with you in chronological order, with product thumbnails, order status, and a one-click reorder button. Instead of digging through emails or scrolling a generic order list, the customer sees their entire purchase history laid out visually. They can scan it, find the product they want, and reorder in seconds.
This guide walks through building one using Shopify customer account templates and a small amount of Liquid code. No plugin required. No paid app. Just your existing theme and about 45 minutes.
What You Need Before You Start
- A Shopify store with Online Store 2.0 theme (Dawn, Sense, Refresh, or any 2.0-compatible theme)
- Access to your theme code editor (Shopify Admin > Online Store > Themes > Actions > Edit code)
- Basic familiarity with HTML and Liquid (you do not need to be a developer, but you should be comfortable copy-pasting and adjusting variables)
- Product images that are at least 100×100 pixels (Shopify automatically generates thumbnails, but they need to exist)
Step 1: Create a New Template for the Timeline Page
In your theme code editor, go to the Templates folder and click “Add a new template.” Choose “customer/order” and name it timeline. This creates a file called customer/order.timeline.liquid.
This template will override the default order detail page when a customer visits their timeline URL. Instead of showing a single order, it will show all orders in a visual timeline layout.
Step 2: Build the Timeline Loop
Replace the contents of your new template with the following code. This loops through all of the customer orders and displays them as a vertical timeline with product thumbnails:
{% assign orders = customer.orders | sort: 'created_at' | reverse %}<div class="purchase-timeline"> {% for order in orders %} <div class="timeline-item"> <div class="timeline-date">{{ order.created_at | date: "%b %Y" }}</div> <div class="timeline-content"> <div class="timeline-products"> {% for line_item in order.line_items limit: 3 %} <img src="{{ line_item.product.featured_image | img_url: '100x100' }}" alt="{{ line_item.title }}" class="timeline-thumb"> {% endfor %} </div> <div class="timeline-meta"> <span class="order-number">{{ order.name }}</span> <span class="order-total">{{ order.total_price | money }}</span> <span class="order-status {{ order.fulfillment_status }}">{{ order.fulfillment_status | capitalize }}</span> </div> <a href="{{ order.customer_url }}" class="reorder-btn">View Order</a> </div> </div> {% endfor %}</div>The key parts: sort: 'created_at' | reverse puts the most recent orders at the top. limit: 3 on line items shows only the first three products per order, keeping the timeline scannable. The customer_url filter generates a direct link to the order detail page where the customer can reorder.
Step 3: Add the CSS for the Timeline Layout
Add this CSS to your theme stylesheet or inside a {% style %} tag at the top of your template:
.purchase-timeline { max-width: 600px; margin: 0 auto; padding: 20px;}.timeline-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #eee;}.timeline-date { min-width: 60px; font-size: 14px; color: #888; text-transform: uppercase; letter-spacing: 1px;}.timeline-products { display: flex; gap: 8px; margin-bottom: 8px;}.timeline-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 8px;}.timeline-meta { display: flex; gap: 12px; font-size: 13px; align-items: center;}.reorder-btn { display: inline-block; margin-top: 8px; padding: 6px 16px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; font-size: 13px;}This creates a clean vertical timeline with the date on the left and the order details on the right. Product thumbnails are 60×60 pixels with rounded corners. The layout is mobile-responsive because it uses flexbox with a max-width container.
Step 4: Add a Reorder Button to Each Timeline Item
The default Shopify order page has a reorder link, but it requires the customer to click through to the order detail page first. You can add a direct reorder button to each timeline item by linking to the order page with a query parameter that triggers the cart add.
Replace the View Order link in your template with:
<a href="{{ order.customer_url }}?reorder=true" class="reorder-btn">Reorder These Items</a>{% if order.line_items.size > 3 %} <span class="more-items">+{{ order.line_items.size | minus: 3 }} more</span>{% endif %}The +N more text appears when an order had more than three products, so the customer knows there were additional items without the timeline becoming cluttered.
Step 5: Add the Timeline Link to the Customer Account Navigation
In your theme, open the customer account layout file (usually layout/customer/account.liquid or sections/customer-account.liquid depending on your theme). Add a link to the timeline page in the account navigation:
<a href="{{ routes.account_url }}/orders/timeline" class="account-nav-link">Purchase Timeline</a>This makes the timeline accessible from the main account page. Customers can switch between the default order list and the visual timeline.
Step 6: Test the Timeline With a Real Customer Account
Place a test order on your store, then log in as that customer and visit the timeline URL: yoursite.com/account/orders/timeline. Verify that:
- Orders appear in reverse chronological order (most recent first)
- Product thumbnails load correctly
- The date format is readable (abbreviated month and year)
- Order status badges display correctly (fulfilled, unfulfilled, partial)
- The reorder link takes you to the correct order detail page
- The layout works on mobile (test at 375px width)
Optional: Add Order Frequency Insights
If you want to make the timeline even more useful, add a small summary at the top that shows the customer how often they order. This is a nice touch that makes the page feel personalised:
{% assign order_count = customer.orders.size %}{% if order_count > 0 %} <div class="timeline-summary"> You have placed {{ order_count }} orders since {{ customer.orders.last.created_at | date: "%B %Y" }}. {% if order_count >= 3 %} You order roughly every {{ customer.orders.first.created_at | time_diff: customer.orders.last.created_at | divided_by: order_count | divided_by: 86400 | round }} days on average. {% endif %} </div>{% endif %}This block only appears if the customer has placed at least one order. The average calculation uses the time difference between their first and last order, divided by the total number of orders. It gives customers a sense of their own purchasing rhythm, which makes the page feel like a personal dashboard rather than a generic order list.
Common Issues and Fixes
No orders showing: Make sure you are logged in as a customer who has actually placed orders. The customer.orders object only returns orders for the authenticated customer.
Thumbnails not loading: If a product was deleted or inventory was removed, the featured image may be null. Add a fallback: {% if line_item.product.featured_image %}...{% else %}<div class="timeline-thumb-placeholder"></div>{% endif %}
Template not rendering: Shopify requires the template name to match exactly. If you named it timeline, the URL should be /account/orders/timeline. Check for typos in the template filename.
Why This Works Better Than the Default Order Page
The default Shopify order page is functional but impersonal. It shows order numbers and totals in a table format that feels like a spreadsheet. Customers use it when they need to track a shipment or check a status. They do not browse it.
A timeline changes the behaviour. When customers can see their purchase history visually, they remember products they forgot they bought. They notice patterns (“I order skincare every three months”). And because each item has a reorder button, the friction between remembering and buying drops to almost zero.
The result is a page that turns order history from a support tool into a sales tool. Customers come to check an order. They leave with two more products in their cart.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
