My Account

Try the interactive demo (opens in a new tab) 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, Set up quick links to orders and Reorder or hide sections.

How it works

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.

Sections

My Account is made up of these sections, shown in this order by default. You can reorder or hide them.

How customers open My Account

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

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.

Order history

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

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), 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.

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:

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.

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.

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

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Integrations › Platform › Shopify order actions to do this now, whichever platform you're on. Opens in a new tab. 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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Configurations › Store to do this now, whichever platform you're on. Opens in a new tab..

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. 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.

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.

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:

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.

The Actions menu has 2 options:

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 appears in the Shopping Lists section. See Shopping lists.

Reports

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

Reports have these limits:

Address book

Customers see their saved addresses in My Account, and can choose any of them at checkout in the My Cart. The addresses come from your store admin, or from your backend system through the SparkLayer API.

Customers can manage their own address book:

Address management is on by default. To turn it off, or to stop customers changing their default billing address, see 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:

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, 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.

You can also add your own fields to My Details, such as a website address or sales agent contact details. See Customise My Account.

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options to do this now, whichever platform you're on. Opens in a new tab. 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.

display: {
  hideFinancials: true,
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      hideFinancials: true,
    },
  };
</script>

Company users

Company users 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 shows the messages, notes, events and related email notifications for an order or quote. 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:

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.

<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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options to do this now, whichever platform you're on. Opens in a new tab. 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.

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 instead. They use the names in code from the Sections table: list the sections in order, and add any to hide to hide.

display: {
  sectionConfiguration: {
    'my-account': {
      order: [
        'recent-activity',
        'shopping-lists',
        'financials',
        'my-details',
        'reports',
        'address-book',
        'company-users',
      ],
      hide: [],
    },
  },
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      sectionConfiguration: {
        'my-account': {
          order: [
            'recent-activity',
            'shopping-lists',
            'financials',
            'my-details',
            'reports',
            'address-book',
            'company-users',
          ],
          hide: [],
        },
      },
    },
  };
</script>

display: {
  sectionConfiguration: {
    'my-account': {
      order: [
        'recent-activity',
        'shopping-lists',
        'my-details',
        'reports',
        'address-book',
        'company-users',
      ],
      hide: [
        'reports',
        'address-book',
        'company-users',
      ],
    },
  },
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      sectionConfiguration: {
        'my-account': {
          order: [
            'recent-activity',
            'shopping-lists',
            'my-details',
            'reports',
            'address-book',
            'company-users',
          ],
          hide: [
            'reports',
            'address-book',
            'company-users',
          ],
        },
      },
    },
  };
</script>

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.

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

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      sectionConfiguration: {
        'my-account': {
          hide: [
            {% if customer.metafields.sparklayer.role == 'limited-customer' %}
              'recent-activity',
            {% endif %}
          ],
        },
      },
    },
  };
</script>

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

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
      sectionConfiguration: {
        'my-account': {
          hide: [
            {% if customer.tags contains 'b2b-vip' %}
              'recent-activity', // Hide recent activity if the customer is b2b-vip
            {% endif %}
          ],
        },
      },
    },
  };
</script>

Add your own content

With custom slots, 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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Custom slots to do this now, whichever platform you're on. Opens in a new tab. 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.

FAQs