Skip to main content
Nexus Theme includes a complete customer account system with order history, address management, and account settings.

​
Overview

Customer accounts include:
  • Account Dashboard with order overview
  • Order History with detailed tracking
  • Address Management for shipping and billing
  • Account Settings for personal information
  • Wishlist functionality
  • Responsive Design optimized for all devices

​
Account Features

​
Account Dashboard

<div class="customer-account">
  <div class="customer-account__header">
    <h1 class="customer-account__title">My Account</h1>
    <p class="customer-account__welcome">Welcome back, {{ customer.first_name }}!</p>
  </div>
  
  <div class="customer-account__content">
    <div class="customer-account__orders">
      <h2>Recent Orders</h2>
      {% if customer.orders.size > 0 %}
        <div class="customer-account__orders-list">
          {% for order in customer.orders limit: 5 %}
            <div class="customer-account__order">
              <div class="customer-account__order-info">
                <h3>Order #{{ order.name }}</h3>
                <p>{{ order.created_at | date: '%B %d, %Y' }}</p>
                <p>{{ order.financial_status_label }}</p>
              </div>
              <a href="{{ order.customer_url }}" class="btn btn--primary">View Order</a>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <p>No orders yet.</p>
      {% endif %}
    </div>
  </div>
</div>

​
CSS Styling

.customer-account {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.customer-account__header {
  text-align: center;
  margin-bottom: 3rem;
}

.customer-account__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}

.customer-account__welcome {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
}

.customer-account__orders {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.customer-account__orders h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--color-text-primary);
}

.customer-account__order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.customer-account__order:last-child {
  border-bottom: none;
}

.customer-account__order-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
}

.customer-account__order-info p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
}