---
title: Customer Console
description: The account area (orders, addresses, subscriptions, wishlist) as a separate, tree-shakeable entry point.
---

The Customer Console (account area — orders, addresses, subscriptions, wishlist, etc.) ships as a **separate entry point** so you only pay for it if you import it:

```js
import { createConsole, mountConsole, CustomerConsole, OrderTracking } from 'bolder-storefront/console'
```

This is a separate bundle (`dist/console.js` / `dist/console.umd.cjs`) — tree-shaking can't reach it from the main `bolder-storefront` import.

## createConsole()

`createConsole(authAjax)` builds the loaders and updaters the `CustomerConsole` component reads its data from, using `storefront.authAjax` (the credentialed request client) so requests carry the customer's session.

```js
import { createStorefront } from 'bolder-storefront'
import { createConsole } from 'bolder-storefront/console'

createStorefront({ shop: 'acme' }).then(function(storefront) {
  var api = createConsole(storefront.authAjax)

  // api.loaders — functions that fetch data sections
  // api.updaters — functions that mutate data
})
```

**Loaders** (`api.loaders`) — each is `(cb, filters?)` → `cb(err, data)`:

| Key | Endpoint | Returns |
|-----|----------|---------|
| `profile` | `GET /user.json` | User profile object |
| `orders` | `GET /customer/orders.json` | `{ orders: [] }` (accepts `{ page, per_page }` filters) |
| `tracking` | `GET /customer/orders/:id/tracking.json` | Tracking data for one order |
| `subscriptions` | `GET /customer/subscriptions.json` | Array of subscriptions |
| `card_tokens` | `GET /customer/card_tokens.json` | Array of saved cards |
| `payment_methods` | `GET /customer/payment_methods.json` | Array of payment methods |
| `addresses` | `GET /customer/addresses.json` | Array of addresses |
| `wishlist` | `GET /customer/favorites.json` | Array of products |
| `recent_products` | `GET /customer/purchased.json` | Array of recently purchased products |
| `buyer_points` | `GET /customer/points.json` | Array of loyalty-point transactions |
| `countries` | `GET /delivery/shipping_countries.json` | Raw `(code, body)` passthrough |
| `regions` | `GET /delivery/shipping_regions.json` | Raw `(code, body)` passthrough (accepts params) |

**Updaters** (`api.updaters`) — each is `(body, cb)` → `cb(err, data)`:

| Key | Action |
|-----|--------|
| `logout` | `GET /customer/logout` |
| `update_user` | `PUT /customer/profile` |
| `update_subscription` | `PUT /customer/subscriptions/:id` |
| `pause_subscription` | `POST /customer/subscriptions/:id/pause` |
| `unpause_subscription` | `POST /customer/subscriptions/:id/unpause` |
| `cancel_subscription` | `DELETE /customer/subscriptions/:id` |
| `reenable_subscription` | `POST /customer/subscriptions/:id/reenable` |
| `add_address` | `POST /customer/addresses` |
| `edit_address` | `PUT /customer/addresses/:id` |
| `delete_address` | `DELETE /customer/addresses/:id` |
| `toggle_favorite` | `POST /user/toggle_favorite.json?product_id=…` |
| `remove_card_token` | `DELETE /console/card_tokens/:id.json` |
| `add_order_document` | `PUT /console/add_order_document/:id.json` |

## mountConsole()

`mountConsole(storefront, target, data, opts)` is the recommended way to mount the Customer Console. It wires `CustomerConsole` with `OrderTracking` as a sub-component (so order-tracking modals work) and calls `createConsole()` internally — no need to call it yourself.

```js
import { createStorefront } from 'bolder-storefront'
import { mountConsole } from 'bolder-storefront/console'

createStorefront({ shop: 'acme' }).then(function(storefront) {
  var handle = mountConsole(storefront, '#console-container', { options: {} })
  // handle.update(data), handle.unmount()
})
```

Use `storefront.mount(CustomerConsole, …)` directly only if you need to wire sub-components yourself or pass a custom `loaders`/`updaters` set.