Templates

Customer Templates manage the post-authentication experience and account lifecycle within a Soppiya storefront. These templates reside in a dedicated subdirectory and are responsible for rendering sensitive, user-specific data such as order history, shipping addresses, and personal profile information.

In the Soppiya ecosystem, these templates are built as modular JSON wrappers that allow merchants to customize the layout of account pages using sections and blocks, while maintaining high security and performance.

---

Folder Location

Customer-related templates must be stored within the /customers subfolder inside the /templates directory.

└── theme
    └── templates
        └── customers/
            ├── account.json          # Main account dashboard
            ├── addresses.json        # Shipping/Billing management
            ├── login.json            # Authentication portal
            ├── order.json            # Specific order details
            ├── orders.json           # Historical order list
            ├── register.json         # Account creation
            └── reset_password.json   # Password recovery

---

Template Reference

account.json

The primary landing page for logged-in users. It serves as a dashboard providing a summary of the customer's profile and a quick view of the most recent orders.

orders.json

Renders a comprehensive list of all transactions associated with the customer.

• Key Logic: Uses a loop to iterate through the customer.orders array.
• Data Points: Typically displays Order ID (Serial ID), Date, Fulfillment Status, and Total Price.

order.json

Provides a detailed breakdown of a single transaction.

• Data Access: Uses the order object to render line items, tracking numbers, and billing/shipping address details.

addresses.json

A management interface for customer addresses.

• Functionality: Supports adding new addresses, editing existing ones, and designating a "Default" address for faster checkout.

###login.json & register.json The entry points for the customer journey. These templates host the authentication forms.

---

Technical Implementation

Like other Soppiya templates, customer templates utilize a JSON schema to define which sections appear on the page. This modularity allows developers to add banners, FAQs, or promotional content to the account pages.

Example: templates/customers/account.json

{
  "sections": {
    "account_main": {
      "type": "account-dashboard",
      "name": "Account Dashboard",
      "settings": {
        "show_profile_image": true,
        "color_scheme": "light",
        "padding_top": 40,
        "padding_bottom": 40
      }
    },
    "recent_orders": {
      "type": "order-list-minimal",
      "settings": {
        "limit": 5
      }
    }
  },
  "order": [
    "account_main",
    "recent_orders"
  ]
}

---

Accessible Data Objects

When a user is authenticated, the customer object becomes globally accessible, allowing you to personalize the experience across any section in the theme.

Attribute	Liquid Usage	Result Example
First Name	{{ customer.first_name }}	Hridoy
Last Name	{{ customer.last_name }}	Ahmed
Email	{{ customer.email.address }}	hiday.soppiya@gmail.com
Order Count	{{ customer.orders.size }}	12
Default Address	{{ customer.default_address.city }}	Dhaka

important

Authentication Shield: If a guest user tries to access /account, Soppiya automatically redirects them to the login.json template. You do not need to write manual redirect logic for core account paths.

---

Best Practices

tip

Breadcrumb Integration: Always include a breadcrumb section in customer templates (e.g., Home > Account > Order #1002). This helps users navigate back to the store from deep account levels.

note

Empty States: For the orders.json template, always include an empty state block or section. If customer.orders.size == 0, display a "You haven't placed any orders yet" message with a button leading back to the products list.

warning

Security & Privacy: Avoid hardcoding any sensitive customer data into scripts or global assets. Utilize the | json filter only when strictly necessary for AJAX-based address management.

---

To learn how to manage the global styling of these pages, proceed to the Theme Settings (Config) documentation.