Your Customers Want One Page That Shows Everything
When a returning customer logs into your store, they see a default account page. It probably shows their name, a link to order history, and maybe a logout button. That is not a dashboard. That is a list of links.
Your customers already have order confirmation emails, tracking numbers in their inbox, and loyalty points they cannot check without emailing you. A customer account dashboard puts all of that in one place. Orders, rewards, saved items, addresses, and recent activity. One page. No clicking through five sub-pages.
Here is how to build one without installing a plugin or writing code.
What Your Dashboard Should Include
Before you build anything, decide what goes on the page. A good customer account dashboard has four sections:
- Recent orders: Last 5 orders with status, date, and a reorder button
- Rewards or store credit: Current points balance and how to redeem
- Saved items: Wishlist or saved-for-later products with a move-to-cart button
- Saved addresses: Default shipping and billing address with an edit link
You do not need order tracking, review history, or subscription management on this page. Those belong on sub-pages. The dashboard is the overview, not the full report.
Step 1: Create a Custom Page Template
If you are on Shopify, create a new page template in your theme. Go to Online Store, Themes, click Actions, then Edit Code. Under Templates, click Add a new template. Choose page and name it account-dashboard.
If you are on WordPress with WooCommerce, duplicate your page.php template and rename it page-account-dashboard.php. Add a custom page slug in the editor.
The goal is to have a dedicated template you can control without affecting the rest of your site.
Step 2: Pull In the Customer’s Order History
In Shopify, use Liquid to pull the customer’s recent orders:
{% raw %}
{% if customer %}
{% for order in customer.orders limit:5 %}
<div class="dashboard-order">
<span>{{ order.name }}</span>
<span>{{ order.created_at | date: "%b %d, %Y" }}</span>
<span>{{ order.financial_status_label }}</span>
<a href="{{ order.customer_url }}">View</a>
</div>
{% endfor %}
{% endif %}
{% endraw %}This loops through the last 5 orders and displays the order number, date, payment status, and a link to the order detail page. No plugin needed. The data is already available through Shopify’s customer object.
In WooCommerce, use the wc_get_customer_orders function to pull the same data. Limit to 5, sort by date descending.
Step 3: Display Rewards or Store Credit Balance
If you use a loyalty app like Smile.io or LoyaltyLion, they provide a snippet or embed that shows the customer’s points balance. Drop that embed code into a section on your dashboard page.
If you run a manual store credit system, create a metafield on the customer profile called store_credit_balance. Update it when you issue credit. Display it with:
{% raw %}
{% if customer.metafields.custom.store_credit_balance %}
<p>Your store credit: {{ customer.metafields.custom.store_credit_balance | money }}</p>
{% endif %}
{% endraw %}Simple. The customer sees their balance without emailing you.
Step 4: Show Saved Items or Wishlist
Shopify does not have a native wishlist, but you can use a metafield to store saved product IDs. If you use a wishlist app, most provide a widget that shows saved items. Place that widget in a section on the dashboard.
If you want to keep it simple without an app, create a metafield called wishlist that stores a comma-separated list of product IDs. Loop through them on the dashboard:
{% raw %}
{% assign wishlist_ids = customer.metafields.custom.wishlist | split: ',' %}
{% for id in wishlist_ids %}
{% assign product = all_products[id] %}
{% if product %}
<div class="wishlist-item">
<img src="{{ product.featured_image | image_url: width: 100 }}" alt="{{ product.title }}">
<a href="{{ product.url }}">{{ product.title }}</a>
<span>{{ product.price | money }}</span>
</div>
{% endif %}
{% endfor %}
{% endraw %}Each saved item shows a thumbnail, product link, and price. The customer can click through to buy.
Step 5: Add Saved Addresses
Shopify’s customer object includes default addresses. Display the default shipping address with an edit link:
{% raw %}
{% if customer.default_address %}
<div class="address-card">
<p>{{ customer.default_address.name }}</p>
<p>{{ customer.default_address.street }}</p>
<p>{{ customer.default_address.city }}, {{ customer.default_address.province }}</p>
<a href="/account/addresses">Edit</a>
</div>
{% else %}
<p><a href="/account/addresses">Add a shipping address</a></p>
{% endif %}
{% endraw %}One glance. No digging.
Step 6: Style It Like a Dashboard, Not a List
The difference between a dashboard and a list is layout. Use a grid. Put orders in the top-left, rewards in the top-right, saved items below orders, and addresses below rewards. Add section headers with icons. Use cards with subtle shadows.
Here is a simple CSS grid to get you started:
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 24px;
}
.dashboard-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 20px;
}
.dashboard-card h3 {
font-size: 16px;
margin-bottom: 16px;
}Two columns. Four cards. Clean separation. On mobile, stack to one column with grid-template-columns: 1fr in a media query.
Step 7: Add a Reorder Button to Each Order
One of the most useful features on a dashboard is a reorder button. In Shopify, you can link directly to the cart with all items from a previous order pre-loaded:
{% raw %}
<a href="/cart?{% for line_item in order.line_items %}id[]={{ line_item.variant_id }}&quantity[]={{ line_item.quantity }}{% unless forloop.last %}&{% endunless %}{% endfor %}">Reorder</a>
{% endraw %}This builds a URL that adds every item from the previous order to the cart. One click. No searching for the product page.
What Not to Put on the Dashboard
Keep it lean. Do not add:
- Order tracking details. That belongs on the order page.
- Review forms. Those belong on the product page.
- Subscription management. That belongs on a dedicated subscriptions page.
- Email preferences. That belongs in a preference center.
The dashboard is the launchpad. Everything else is a destination.
Test It Before You Ship
Create a test customer account. Place a test order. Earn some points. Save a product. Add an address. Log in and check the dashboard. Every section should load in under 2 seconds. Every link should go somewhere useful.
If something is empty, show a helpful message. “No saved items yet. Browse our collection and tap the heart icon to save something for later.” Empty states should guide, not frustrate.
The Result
Your customers now have one page that answers three questions: What did I buy? Do I have rewards? What did I save? No emailing support. No digging through order emails. No guessing if they have store credit.
The account dashboard is the most underbuilt page in most e-commerce stores. Fixing it takes under an hour and it quietly improves repeat purchase rate for every customer who logs in.
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.
