# My Account

URL: https://docs.sparklayer.io/help/storefront/interfaces/my-account

Learn what B2B customers can do in the SparkLayer My Account interface: track and export orders, reorder, manage lists and addresses, and hide sections.

> **Quick summary**
>
> - My Account is SparkLayer's B2B account area. Signed-in B2B customers see it instead of your store's account pages, as a panel over any page.
> - Customers can track and export their orders, reorder, manage shopping lists and addresses, see their account and credit details, run purchase reports and manage [company users](https://docs.sparklayer.io/help/customers/company-users.md).
> - You can reorder its sections without code at **Storefront > Options > My Account** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > My Account** in the Shopify app. Order status names and extra account fields are set up in [Customise My Account](https://docs.sparklayer.io/help/customers/account-and-addresses.md).
> - It's included on every plan. Some features it shows depend on your plan, such as [invoices](https://docs.sparklayer.io/help/ordering/invoices.md) and order approval (Growth and above). See [Plans and features](https://docs.sparklayer.io/help/plans-and-features.md).

[Try the interactive demo](https://www.figma.com/proto/5FPCY5hSGl7mlwjsjMZI2t/SparkLayer-Interfaces?page-id=0%3A1\&type=design\&node-id=86-36708\&viewport=554%2C-398%2C0.33\&t=34VlPwbCqpvQOTsh-8\&scaling=min-zoom\&starting-point-node-id=35%3A7920\&hide-ui=1) to click through My Account yourself.

This page starts with what your customers see and do in My Account. The settings you control start at [Hide the Financials section](#hide-the-financials-section), [Set up quick links to orders](#set-up-quick-links-to-orders) and [Reorder or hide sections](#reorder-or-hide-sections).

## How it works

My Account is one of SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md). When SparkLayer is installed, it replaces your store's own account area for B2B customers. It opens as a panel over the page the customer is on, with a greeting that uses the customer's first name, such as "Welcome back".

**My Cart** and **My Account** tabs at the top let customers switch to the [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md) without leaving the page.

In My Account, customers can:

- See every order they've placed, with its payment status and status, and filter, search and export them.
- Reorder a whole order, a single product or everything bought in a time period.
- Load, edit and delete their shopping lists.
- Add, edit and delete addresses, and choose their default addresses.
- See their account details and, if you use them, their credit limit, balance and payment terms.
- Message your team about orders and quotes, and manage company users if you've turned that on.

How customers reorder from My Account:

1. **Recent Activity**: Open a past order, report or shopping list
2. **Actions**: Add the items to the current cart, or start a new cart with them
3. **My Cart**: Adjust quantities and check out

### Sections

My Account is made up of these sections, shown in this order by default. You can [reorder or hide them](#reorder-or-hide-sections).

| Section | What customers see and do | Name in code (for developers) |
| --- | --- | --- |
| Custom content | Your own content at the top of the page, if you've added a [custom slot](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md) | `spark-slot-my-account` |
| **Recent Activity** | Their latest orders and quotes, with a **Status** filter and **View all** for the full list | `recent-activity` |
| **Favourites** | The products they've saved with the heart icon, if [favourites](https://docs.sparklayer.io/help/ordering/favourites.md) are on, with **View all** | – |
| **Shopping Lists** | Their saved shopping lists, each with an **Actions** menu to load or delete it | `shopping-lists` |
| **Financials** | Their **Payment terms**, **Unpaid Balance** and **Credit Limit**, if you use credit terms | `financials` |
| **My Details** | Their email address and name, plus any custom fields | `my-details` |
| **Reports** | Their purchase history by time period | `reports` |
| **Address Book** | Their saved addresses, with **Add new address** | `address-book` |
| **Company Users** | The people who share the account, with **Invite new user**, if [company users](https://docs.sparklayer.io/help/customers/company-users.md) is on | `company-users` |

## How customers open My Account

Customers can open My Account from any page in 2 ways:

| Way in | How it works |
| --- | --- |
| Account link | Your store's account link, usually in the header, opens My Account, as long as it points to `/account`. |
| `#spark-account` link | Any URL ending in `#spark-account`, for example `https://www.yourstore.com/#spark-account`. |

When a signed-in customer goes to your store's own account pages (for example `/account`), they're redirected to My Account. To send B2B customers to a different URL after they sign in, your developer can update the Core Script. See [Customise My Account](https://docs.sparklayer.io/help/customers/account-and-addresses.md).

## Order history

Every order a customer places through SparkLayer is saved to their order history. The **Recent Activity** section lists them, newest first:

| Column | What it shows |
| --- | --- |
| **Reference** | The order or quote reference. Click it to open the order. |
| **Submitted on** | The date the order was placed. |
| **Payment** | The payment status, such as **Pending** or **Paid**. |
| **Status** | The order status, such as **Processing** or **Shipped**. See [Order statuses](#order-statuses). |
| **Amount** | The order total. |

The **Status** menu at the top of the section filters the list, for example to **All**, **Processing** or **Shipped**. Each option shows a count. Other filters, such as **Awaiting merchant** or **Requires approval** (for [company users](https://docs.sparklayer.io/help/customers/company-users.md)), appear when the customer has orders in them. 

Customers click an order's reference to see its full details, however it was paid for. To rename the order statuses customers see, see [Customise My Account](https://docs.sparklayer.io/help/customers/account-and-addresses.md).

### Search and filter orders

To see all their orders, customers click **View all** in **Recent Activity**. This opens the Activity view, where they can filter and search:

| Filter | Options |
| --- | --- |
| Date | Choose a year or a time period (within a 365-day period), or **Custom Date Range** with a **Start Date** and **End Date**. |
| Search | Search by order ID, purchase order (PO) number, or address (first line, second line, city or zip code). |

### Order details

By default, My Account shows completed orders, and purchases that exist only in SparkLayer, such as quotes and orders waiting for approval. Draft orders in your store aren't listed.

An order opens on its own page, headed with its reference (for example **My Account › #1001**), with 3 tabs and an **Actions** menu for [reordering](#reorder).

| Tab | What it shows |
| --- | --- |
| **Summary** | The **Order Summary**: **Payment Status**, **Status**, **Payment Method**, **Shipping Method**, **Submitted on**, any **Additional Information** (such as a preferred shipping date) and the **Shipping Address**. **View & download invoice** opens the invoice, where there is one. |
| **Order Lines** | Every product ordered, grouped by status, with its quantity, SKU and options, line total, quantity × unit price and RRP. Each line has **Order again**. Under the lines, the **Order Total**: **Sub-total**, **Shipping**, **Tax**, **Total**, **Paid** and the **Balance**, with its due date and terms for orders paid on account. |
| **Timeline** | Messages and events for the order. See [Timeline and messages](#timeline-and-messages). |

**More detail**

- **Status** is based on the status sent from your store admin or backend system, for example Processing, Shipped or Cancelled.
- **Payment Status** is, for example, Pending or Paid, and **Payment Method** shows how the order was paid for, for example On Account. See [Payment methods](https://docs.sparklayer.io/help/ordering/payment-methods.md).
- On Shopify, you can [customise the order number](https://docs.sparklayer.io/help/platforms/shopify/metafields.md).
- Where you've supplied a tracking number, it shows on the order too. See [Customise My Account](https://docs.sparklayer.io/help/customers/account-and-addresses.md).

### Order statuses

An order's status sums up the status of all the packages in it. For example, if half the items have shipped and half are still processing, the order shows as **Part-shipped**. Customers can open the order to see the status of each package.

| Order status | Shown when the packages are |
| --- | --- |
| **Processing** | `Processing`, or `Processing` and `Cancelled` |
| **Shipped** | `Shipped` |
| **Cancelled** | `Cancelled` |
| **Returned** | `Returned` |
| **Part-returned** | `Returned` and `Processing` |
| **Part-shipped** | `Shipped` and `Processing` |
| **Varied** | Any other mix |

SparkLayer also has its own statuses, which don't match a status in your eCommerce platform:

| Status | What it means |
| --- | --- |
| **Awaiting Approval** | A [limited user](https://docs.sparklayer.io/help/glossary.md#limited-user) has submitted an order, and the main company user needs to approve it. |
| **Awaiting merchant** | The customer has placed the order, but it isn't a completed order in your store yet: usually a Pay on Account or Pay by Invoice order that's still a draft order for you to complete. It has a purchase ID, such as `P#1264`. You see it as **Awaiting merchant** in **Orders** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/activity)), or **SparkLayer Wholesale > Orders** in the Shopify app too. See [Awaiting merchant](https://docs.sparklayer.io/help/glossary.md#awaiting-merchant). |
| **Archived** | The order has been archived. For example, if a user cancels an order before it's approved, it's archived. |

Orders paid on account or by invoice arrive in your store as draft orders, so they show as **Awaiting merchant** until you complete them, and their **Payment** shows **Pending** until they're paid. On Shopify, **Auto-complete draft orders** at **Integrations > Platform > Shopify order actions** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/integrations/platform)), or **SparkLayer Wholesale > Integrations > Platform > Shopify order actions** in the Shopify app turns them into completed orders automatically.

Purchases that exist only in SparkLayer, such as orders waiting for approval and quotes, have an internal ID. By default it starts with `P#`, for example `P#1264`. You can change this prefix, and add a suffix, with **Purchase ID prefix** and **Purchase ID postfix** at **Settings > Configurations > Store** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/settings/general)), or **SparkLayer Wholesale > Settings > Configurations > Store** in the Shopify app.

### Offline and archived orders

You can show orders placed outside SparkLayer, for example over the phone, so customers see their whole order history in one place. Send them with the [SparkLayer API](https://docs.sparklayer.io/developers/api.md). On Shopify, you can also show orders you created in the Shopify admin or imported, with the `b2b` tag and an order metafield: see [Show imported or manual orders in My Account](https://docs.sparklayer.io/help/guides/show-imported-orders.md).

### Invoices

Depending on your setup, customers can view and download invoices from their order history, with **View & download invoice** on the order's **Summary**. See [Credit limits and net terms](https://docs.sparklayer.io/help/ordering/credit-net-terms-and-invoicing.md).

### Export orders

Customers can download their orders as a CSV file, for example to reconcile them with their own systems or analyse what they buy. The customer:

1. Clicks **View all** in **Recent Activity**.
2. Searches or filters the list to export only some orders. The export includes only the orders shown. For example, filtering by **Quote** exports only quotes.
3. Opens the **Download** menu in the top right and chooses an option:

| Option | What the file contains |
| --- | --- |
| **Activity** | One row per order, with order details such as the order number, date, status and total. Best for an overview. |
| **Activity with line items** | One row per product line, with product details, quantities, prices, shipping and tracking. Best for analysing products across orders. |

If you use custom fields or line item attributes, they're added as extra columns in the **Activity with line items** export. Custom field columns start with `custom_`.

## Reorder

Customers can repeat a past order, or order individual products again.

| To reorder | How |
| --- | --- |
| A whole order | On the order's page, open **Actions** in the top right and choose an option (see below). |
| One product | Click **Order again** next to the product in the order's **Order Lines**. |
| Everything bought in a time period | Use [Reports](#reports). |

The **Actions** menu has 2 options:

| Option | What it does |
| --- | --- |
| **Add items to existing cart** | **Adds** the products from the order to what's already in the cart. |
| **Create new cart** | **Replaces** what's in the cart with the products from the order. |

Products that aren't available (for example, out of stock) aren't added, unless you've allowed customers to order unavailable products.

## Shopping lists

Shopping lists let customers reorder products they've saved, such as a range they always buy or a list of favourites. Every list saved from the [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md) appears in the **Shopping Lists** section. See [Shopping lists](https://docs.sparklayer.io/help/ordering/shopping-lists.md).

| Item | Details |
| --- | --- |
| **Name** | The name the customer gave the list when saving it in My Cart. |
| **Last Updated** | When the list was last changed (usually when it was created). |
| **Actions** | **Add items to existing cart** adds the list's products to what's already in the cart. **Create new cart** empties the cart and adds the list's products. **Delete** deletes the list. |

## Reports

The **Reports** section shows customers what they've bought. They can filter by time period and reorder straight from a report.

| Report | Details |
| --- | --- |
| **Purchase history by time period** | Every product the customer has bought over a period, such as by quarter, month or week. They can reorder a whole range of products in a few clicks and go straight to checkout. |

Reports have these limits:

| Limit | Details |
| --- | --- |
| Time periods | Only the **4 most recent periods** of the selected time range are shown. |
| Products | Up to 100 products are shown for a time period. |

## Address book

Customers see their saved addresses in My Account, and can choose any of them at checkout in the [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md). The addresses come from your store admin, or from your backend system through the [SparkLayer API](https://docs.sparklayer.io/developers/api.md).

| Item | Details |
| --- | --- |
| **Default shipping address** | The address used for shipping by default, marked with a label. |
| **Default billing address** | The address used for billing by default, marked with a label. |
| Other addresses | Every other saved address. |

Customers can manage their own address book:

| Task | How |
| --- | --- |
| Add an address | Click **Add new address**. |
| Edit an address | Open **Actions** next to it and choose **Edit address**. |
| Delete an address | Open **Actions** next to it and choose **Delete address**. A default address can't be deleted. |

Address management is on by default. To turn it off, or to stop customers changing their default billing address, see [Allow address editing](https://docs.sparklayer.io/help/customers/account-and-addresses.md#allow-address-editing).

### Address autocomplete

When customers add or edit an address, they can start typing and choose a suggested address to fill in the rest of the form. This saves typing and reduces mistakes, so orders reach the right place first time.

Suggestions favour your store's country, but matches further afield still appear, so international customers can find their address too.

### Local address formats

The address form adapts to the country the customer chooses:

| What changes | Example |
| --- | --- |
| **Field order and labels** | The first name and last name fields swap places where that's the local convention. |
| **Local terms** | Customers in Japan see "Prefecture" instead of "Region". |

These labels are translated into every language SparkLayer supports.

## Account details

The **My Details** section shows the customer's **Email address** and **Name**.

If you use [credit terms](https://docs.sparklayer.io/help/ordering/credit-net-terms-and-invoicing.md), the **Financials** section shows their **Payment terms**, **Unpaid Balance** and **Credit Limit**. A note tells them that payments may take some time to update. This information comes from the customer's record in your store admin, or from your backend system through the [SparkLayer API](https://docs.sparklayer.io/developers/api.md).

You can also add your own fields to **My Details**, such as a website address or sales agent contact details. See [Customise My Account](https://docs.sparklayer.io/help/customers/account-and-addresses.md).

### Hide the Financials section

To stop customers seeing **Financials** while you still use credit terms, hide it. You don't need code:

1. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app and open **My Account**.
2. Turn on **Hide financial figures**. This hides financial figures everywhere, and the Financials section too.
3. Click **Save and publish**.

**Core Script code for your developer**

Your developer can do the same in the `display` section of your [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting) instead:

```javascript title="Core Script"
display: {
  hideFinancials: true,
},
```

## Company users

[Company users](https://docs.sparklayer.io/help/customers/company-users.md) lets a business share one account across a team, with permissions for what each person can do. It's sometimes called company roles or sub-accounts.

When it's on, the **Company Users** section appears in My Account, listing each person's **Name**, **Email** and **Role**. The main user can add people with **Invite new user**, and remove them with **Actions** > **Delete user**.

## Timeline and messages

The [Timeline](https://docs.sparklayer.io/help/customers/timeline.md) shows the messages, notes, events and related email notifications for an order or [quote](https://docs.sparklayer.io/help/ordering/quoting.md). Customers see it on the order's **Timeline** tab. When your team notifies a customer, they get an email and sign in to their account to reply.

## Set up quick links to orders

SparkLayer can take a customer or sales agent straight to an order or quote when they click a link. This helps in these cases:

| Scenario | Example |
| --- | --- |
| [Company users](https://docs.sparklayer.io/help/customers/company-users.md) | A main user opens an order to approve from an email about a limited user's order. |
| [Quoting Engine](https://docs.sparklayer.io/help/ordering/quoting.md) | A customer or sales agent opens a quote from an email. |
| [Orders](https://docs.sparklayer.io/help/dashboard/orders.md) | You open an order from **Orders** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/activity)), or **SparkLayer Wholesale > Orders** in the Shopify app in SparkLayer. |

To turn this on, add a one-line script to your store's code. It must load for every visitor, signed in or not.

If a customer or sales agent is already signed in, they're taken to the order whether or not the script is added.

**Shopify:**

1. In your Shopify admin, go to **Online Store > Themes** ([open in the Shopify admin](https://admin.shopify.com/themes)).
2. Edit the code of your live theme and open `theme.liquid`.
3. Add this line just before the closing `</head>` tag, then save:

   ```html title="theme.liquid"
   <script async src="https://cdn.sparklayer.io/spark-redirect.js"></script>
   ```

**Other platforms:**

Add this line to your website's code, just before the closing `</head>` tag:

```html
<script async src="https://cdn.sparklayer.io/spark-redirect.js"></script>
```

## Reorder or hide sections

You can change the order of the sections in My Account, for example to move **Address Book** higher up. You don't need code.

1. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app and open **My Account**.
2. Under **Account sections, in order**, drag the sections into the order you want. Each one shows whether it's **Visible**.
3. Click **Save and publish**.

See [Storefront options](https://docs.sparklayer.io/help/storefront/storefront-options.md#my-account-sections).

### For developers: reorder or hide sections in the Core Script

Your developer can set the order and hidden sections in the `display` section of your [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting) instead. They use the names in code from the [Sections](#sections) table: list the sections in `order`, and add any to hide to `hide`.

**Core Script code for your developer**

To set the order, list the sections in the order you want:

```javascript title="Core Script"
display: {
  sectionConfiguration: {
    'my-account': {
      order: [
        'recent-activity',
        'shopping-lists',
        'financials',
        'my-details',
        'reports',
        'address-book',
        'company-users',
      ],
      hide: [],
    },
  },
},
```

To hide sections, add them to `hide`. This example hides the reports, address book and company users sections:

```javascript title="Core Script"
display: {
  sectionConfiguration: {
    'my-account': {
      order: [
        'recent-activity',
        'shopping-lists',
        'my-details',
        'reports',
        'address-book',
        'company-users',
      ],
      hide: [
        'reports',
        'address-book',
        'company-users',
      ],
    },
  },
},
```

### Hide sections for some customers

You can show different sections to different customers, for example to hide **Recent Activity** from limited users. This needs a developer: they build the `order` or `hide` list in your platform's template code.

**Shopify:**

Use Liquid to hide sections based on the customer's [company user](https://docs.sparklayer.io/help/customers/company-users.md) role. This example hides **Recent Activity** from limited users:

```javascript title="Core Script"
display: {
  sectionConfiguration: {
    'my-account': {
      hide: [
        {% if customer.metafields.sparklayer.role == 'limited-customer' %}
          'recent-activity',
        {% endif %}
      ],
    },
  },
},
```

The same approach works with customer tags:

```javascript title="Core Script"
display: {
  sectionConfiguration: {
    'my-account': {
      hide: [
        {% if customer.tags contains 'b2b-vip' %}
          'recent-activity', // Hide recent activity if the customer is b2b-vip
        {% endif %}
      ],
    },
  },
},
```

**Other platforms:**

Use your platform's own template logic to output the `hide` (or `order`) list for each customer, in the same format as the examples above.

## Add your own content

With [custom slots](https://docs.sparklayer.io/help/storefront/interfaces/custom-slots.md), you can add your own content at the top of My Account. For example, a welcome message or a promotion customers see as soon as they sign in.

To add it, go to **Storefront > Options > Custom slots** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Custom slots** in the Shopify app and add the `spark-slot-my-account` slot. It then appears as a **Custom Slot** section in the account sections list, where you can drag it into place. If you set the section order in the Core Script, your developer adds `spark-slot-my-account` to the `order` list above to choose where it sits.

For other options, see [Storefront](https://docs.sparklayer.io/help/storefront.md).

## FAQs

**Why can't a customer see an order in My Account?**

By default, My Account lists completed orders and purchases that exist only in SparkLayer, such as quotes. Draft orders in your store aren't shown. Orders placed outside SparkLayer, such as phone orders, only appear if you send them with the [SparkLayer API](https://docs.sparklayer.io/developers/api.md). On Shopify, orders you created in the admin or imported show once they have the `b2b` tag and the order import metafield: see [Show imported or manual orders in My Account](https://docs.sparklayer.io/help/guides/show-imported-orders.md).

**Why weren't all the products added when a customer reordered?**

Products that aren't available, for example because they're out of stock, aren't added unless you've allowed customers to order unavailable products.

**Can I link straight to My Account?**

Yes. Add `#spark-account` to the end of any URL on your store, for example `https://www.yourstore.com/#spark-account`.