Customer Accounts - Nexus Theme Documentation

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;
}