My Account Interface
When SparkLayer is installed on your website, it automatically replaces your website's existing my account area and allows your B2B customers to keep track of key information about their account, track orders and view their order history, manage their address book, quickly re-order, and more!
You can try our interactive demo by clicking the video below!
The My Account Interface replaces your existing website's my account area with a specially-optimised layout. It works as an "overlay" and can be accessed on any page by any of the following ways:
- By clicking the account link, typically in the website's header providing this points to the URL /account
- By adding #spark-account to the end of a URL, e.g. https://www.yourstore.com/#spark-account
Each time a customer places an order on your website via SparkLayer, this is then saved within their order history. By default, orders are listed by the most recent first and each gives a full record of their order activity. It's also possible to 'filter' by different order types such as completed orders, or orders that require approval (learn more).
All orders will display in the order history, with SparkLayer giving the customer visibility on their specific status (see below). Whether the customer has paid by net payment terms or via online payment, the customer can easily then click the order to see the full details.
Updating the names of order statuses If you'd like to update the names of the order statuses shown, see our guide here
From within the My Account, customers can click "View all" within Recent Activity to see all orders they've placed.
It's possible to filter orders by search times as well as time periods, giving an easy way to track orders.
Filter | Details |
|---|---|
Search | Customers can search by:
|
Date | Customers can filter orders by:
|
Please note By default, SparkLayer will only show completed orders within the My Account. Orders that are in draft (or pending) status will not show in the list.
When a customer views the details of an order, they'll be able to see the following details:
Item | Details |
|---|---|
Order Number | An order reference ID that will match that stored in your backend systems |
Order Date | The date the order was placed |
Status | The order status, e.g. Processing, Shipped, Cancelled based on order status details sent from your website admin or backend system |
Payment method | The payment method used to pay for the order, e.g. Pay on Account |
Address | The address the order is being shipped to |
Products | A summary of all products ordered, organised by order status |
Totals | The order totals including tax and shipping |
Shipping tracking | If supplied, the shipping tracking number for the order. Learn more. |
It's possible to display offline orders within SparkLayer. For example, customers may place orders via your website or over the phone and you want them to be able to view a centralised overview of their entire order history. Please refer to the SparkLayer API for more details.
Depending on your setup, you can also allow customers to view and download invoices from the order history. Learn more in our guide here.
Each order has a "status" that represents the overall status of all the packages included in that order. For example, you may have an order where half the items are shipped and half are still processing. This will show as Part-shipped.
You can click on an order to see a list of the packages that are a part of that order and you'll be able to see that status of each individual package. You can find a list of the order statuses below and the circumstances when they show.
Order Status | Package statuses |
|---|---|
Processing | Processing or Processing + Cancelled |
Shipped | Shipped |
Cancelled | Cancelled |
Returned | Returned |
Part-returned | Returned + Processing |
Part-shipped | Shipped + Processing |
Varied | All other configurations of packages |
SparkLayer also supports a range of special order statuses that are "SparkLayer-specific". These will not correspond to the order statuses within your eCommerce platform.
Order Status | Description |
|---|---|
Awaiting Approval | A limited customer has submitted an order for approval. The main company user has to approve this order. |
Awaiting Merchant | The order has been placed and is in a "draft" status, waiting for the merchant to accept the order by turning it into a completed order. It's also possible to do this automatically via the SparkLayer Dashboard When a purchase is internal to SparkLayer, it will use an internal ID. This is the case for purchases that are not in Shopify, e.g. orders for approval, and quotes. You can customise this ID to have a prefix and/or postfix. By default, the prefix is #P. This can be modified here |
Archived | The order has been archived. For example, if a user cancels an order-for-approval before it is approved, it will become archived. |
The re-ordering feature on SparkLayer is a powerful feature that lets customers quickly "duplicate" their previous orders or products ordered. On any order detail page, the re-ordering button can be accessed on the top right giving the customer two options:
Option | Details |
|---|---|
Add items as new order | This will replace and remove the existing Quick Order contents with the products in the order |
Add items to existing order | This will update the existing Quick Order contents with the products in the order |
Customers can also individually re-order specific products by clicking the "Order again" button. It's also possible to add products from an entire time period in our reports feature.
Please note If products aren't available (e.g. out of stock), these products will not be automatically added unless rules have been configured to allow the ordering of unavailable items.
The saved shopping lists feature in SparkLayer is a great way for customers to be able to quickly re-order items they've previously saved.
For example, they may have a specific range of products they always order from you or they want to create a 'favourites' list to come back to. Each time a shopping list is saved from the My Cart Interface, these will appear in the main My Account area. The interface includes the following items:
Item | Details |
|---|---|
Name | This is the name the customer gives the shopping list from the My Cart Interface |
Updated date | The last time the saved shopping list was updated (typically when it was created) |
Actions | There are two options to choose from:
|
The My Account Interface includes a variety of built in report tools that give your B2B customers visibility on key activities within their account. From within the reports, customers can filter by time period and perform actions such as quickly re-ordering to rapidly place new orders.
Available reports currently include the following:
Report | Details |
|---|---|
Purchase history by time period | This report gives customers a breakdown of all products they've purchased over a period of time (e.g. by quarter, by month, by week). In a matter of clicks, they can re-order an entire range of products and then proceed through the checkout to complete their order. It's a great way to allow your customers to more rapidly repeat-order and easily see products they've purchased from your store. |
Please note the following limitations for the available reports:
Limitation | Details |
|---|---|
Time period | It is currently only possible to show the most recent 4 periods for a selected time range |
Products | It is currently only possible to show a maximum of 100 products for a time period |
SparkLayer is able to display available customer addresses both within the My Account Interface and the My Cart Interface. These addresses are either fed through directly from your website admin or from your backend system (via the SparkLayer API).
The address book interface includes:
Item | Details |
|---|---|
Default Billing | The default billing address used for orders |
Default Shipping | The default shipping address used for orders |
Other Addresses | A list of all other available addresses which haven't been set as 'Default' |
Any available address can then be selected during the checkout process in the My Cart Interface.
SparkLayer also supports full address editing and adding, allowing customers to manage their online address book. Within the My Account interface, customers can simply click the icons next to each address to edit, delete an address, or add a new one.
Customising addresses Address management is enabled by default. To see available configurations for addresses, please refer to our guide here.
The My Account Interface can also display a summary of the customer's information such as their email address, name, company name, and financial details (such as credit terms).
This information is taken directly from the customer's details within your website admin or directly from your backend system (via the SparkLayer API).
If you have credit terms set up but you'd prefer to hide the "Financials" section, you can do this by adding the following setting within your SparkLayer Core Script.
Adding custom fields You can also add custom fields to the My Details screen (such as website address, sales agent contact, etc). Learn more about this our guide here.
Company Users is a powerful feature of SparkLayer that allows companies to create "teams" of users that can share specific actions within their account. Sometimes referred to as "company roles" or "sub accounts", this feature is designed to optimise company B2B purchasing and account management. Learn more in our guide here.
SparkLayer has built-in functionality that can optionally 'auto-redirect' a customer or sales agent directly to their order or quote details, simply by clicking a link. This is useful in the following scenarios:
Item | Details |
|---|---|
Company Users | You're using the Company Users "Limited User" functionality that allows the main user to view and approve an order via an email |
Quoting Engine | You're using the SparkLayer Quoting Engine and your customers and/or sales agents are accessing a quote via an email |
Sales Activity | You're accessing SparkLayer Dashboard Sales Activity area and want to view the details of the order or quote. |
To enable this feature, you'll need to add a special script to your website.
Within your Shopify store, go to Online Store, click Themes and edit the code of your live store. Within the closing </head> tag, add the following JavaScript.
Please note the following
- This should code should be added and available to all users of your store (whether they are signed in or not)
- If a customer or sales agent is already logged into your store, they will automatically be directed to their order (regardless of whether this script is added).
If you'd prefer to change the order or hide sections within the My Account area, you can customise this using special code that's added to your SparkLayer Core Script. For example, you may want the customer's "Addresses" to be higher up on the page, or want to move the "My Details" section further down.
To get started, you'll need to add the following code to the display section of the SparkLayer Core Script.
Name | Details |
|---|---|
spark-slot-my-account | If you're using custom slots, you can reference this in your ordering. |
recent-activity | The customer's order history |
shopping-lists | The customer's shopping lists |
my-details | The customer's detail summary |
reports | The customer's purchasing history reports |
address-book | The customer's address book |
company-user | Company Users within the account (if enabled) |
In addition to this, you can also hide sections you don't want to show by updating the below code. In this example, the reports, address book, and company users sections are hidden.
Custom Slots (or "Targets") allow you to enhance the SparkLayer My Account interface by adding your own custom code in predefined areas.
You can learn more in our custom slots guide here.
When a logged in customer accesses your website's existing my account area (e.g. /account), it will redirect them to the SparkLayer My Account interface instead. If you'd prefer, you can change the default handling and set a custom URL to redirect B2B customers to once they log in. You can do this by updating the SparkLayer Core Script on your website. Learn more
SparkLayer supports a wide range of configurations you can apply to the Frontend Interfaces. Please see our full guide here on what's possible!