Customise My Account

How it works

My Account brings together a customer's My Details, Recent Activity (orders, quotes and their statuses), Shopping Lists, Address Book and, if turned on, Company Users. Its data comes from your eCommerce platform. For example, on Shopify, tracking numbers you add when fulfilling an order appear on the customer's order details.

You change My Account in three ways:

Allow address editing

Address editing is on by default. Customers manage their own address book in My Account: they click Add new address to add one, or use the icons next to an address to edit or delete it.

To change it, edit the customer group's Address management settings at Customers,Groups (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Customers › Groups to do this now, whichever platform you're on. Opens in a new tab.. You can turn off address editing completely. Or you can stop customers adding and changing billing addresses only, and still let them manage other addresses. See Allow customers to edit addresses.

Show order tracking details

Customers see tracking details on an order's details page, including for orders shipped in parts. They see a Track shipment link, the carrier and the tracking number.

Show payment status

Alongside the order status, customers can see a Payment column showing whether each order is Paid or Unpaid. It's on by default. Turn it on or off with Payments visibility at Settings,Configurations,Ordering (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Configurations › Ordering to do this now, whichever platform you're on. Opens in a new tab. ("Show the payment status of orders in the My Account area."). See Payment methods.

Change where customers go after signing in

When a signed-in B2B customer opens your store's own account page (for example /account), SparkLayer sends them to the SparkLayer My Account interface. You can send them somewhere else instead, such as a collection page.

On any platform, including Shopify with legacy (classic) customer accounts, your developer or agency can add an accountRedirect to your Core Script instead.

accountRedirect: {
  urlRegex: /\/account/g,
  goTo: "/index", // page to redirect logged in users to
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    accountRedirect: {
      urlRegex: /\/account/g,
      goTo: "/index", // page to redirect logged in users to
    },
  };
</script>

accountRedirect: {
  urlRegex: /\/account/g,

  {% assign goTo = "/index" %}
  {% for tag in customer.tags %}
    {% if tag == "b2b-group-1" %}
      {% assign goTo = "/collections/wholesale-page" %}
    {% elsif tag == "b2b-group-2" %}
      {% assign goTo = "/collections/another-wholesale-page" %}
    {% endif %}
  {% endfor %}

  goTo: {{ goTo | json }},
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    accountRedirect: {
      urlRegex: /\/account/g,

      {% assign goTo = "/index" %}
      {% for tag in customer.tags %}
        {% if tag == "b2b-group-1" %}
          {% assign goTo = "/collections/wholesale-page" %}
        {% elsif tag == "b2b-group-2" %}
          {% assign goTo = "/collections/another-wholesale-page" %}
        {% endif %}
      {% endfor %}

      goTo: {{ goTo | json }},
    },
  };
</script>

Other My Account features

These features also show in My Account, and have their own guides:

For developers

The settings in this section are made in your SparkLayer Core Script, or with metafields (extra fields on a customer or order record in your store). Your developer or agency usually makes them.

Add custom fields to My Details

The My Details section shows the customer's email address, name, company and financial details, such as their account balance and payment terms. You can add your own fields, such as a website, phone number or account manager's email.

Add a customAccountDetails list to your Core Script. It works like custom checkout fields.

customAccountDetails: [
  {
    title: "Website",
    value: "{{ customer.metafields.global.company_website }}",
    type: "website",
    displayText: "Visit Website",
  },
  {
    title: "Phone",
    value: "01234567890",
    type: "phone",
  },
  {
    title: "Email",
    value: "contact@sparklayer.io",
    type: "email",
    displayText: "Click to email",
  },
  {
    title: "Some normal text",
    value: "This is a normal value with no formatting",
  },
],

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    customAccountDetails: [
      {
        title: "Website",
        value: "{{ customer.metafields.global.company_website }}",
        type: "website",
        displayText: "Visit Website",
      },
      {
        title: "Phone",
        value: "01234567890",
        type: "phone",
      },
      {
        title: "Email",
        value: "contact@sparklayer.io",
        type: "email",
        displayText: "Click to email",
      },
      {
        title: "Some normal text",
        value: "This is a normal value with no formatting",
      },
    ],
  };
</script>

If you use sales agent ordering, fields based on a customer metafield show the sales agent's value, not the customer's, when an agent is signed in as a customer.

Rename order statuses

My Account shows each order's status, such as Processing, Shipped, Part-Shipped, Cancelled or Requires Review. See My Account for what each status means.

To change the names, add translations to your Core Script (see Languages and international):

translations: {
  en: {
    "account.order-status.incoming": "Incoming",
    "account.order-status.returned": "Returned",
    "account.order-status.cancelled": "Cancelled",
    "account.order-status.shipped": "Shipped",
    "account.order-status.part_shipped": "Part-shipped",
    "account.order-status.part_returned": "Part-returned",
    "account.order-status.varied": "Varied",
    "account.order-status.processing": "Processing",
    "account.order-status.awaiting_approval": "Requires approval",
    "account.order-status.awaiting_merchant": "Awaiting merchant",
    "account.order-status.archived": "Archived",
  }
},  

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "account.order-status.incoming": "Incoming",
        "account.order-status.returned": "Returned",
        "account.order-status.cancelled": "Cancelled",
        "account.order-status.shipped": "Shipped",
        "account.order-status.part_shipped": "Part-shipped",
        "account.order-status.part_returned": "Part-returned",
        "account.order-status.varied": "Varied",
        "account.order-status.processing": "Processing",
        "account.order-status.awaiting_approval": "Requires approval",
        "account.order-status.awaiting_merchant": "Awaiting merchant",
        "account.order-status.archived": "Archived",
      }
    },  
  };
</script>

Show the shipping address on orders

To show each order's shipping address under it in the order list, add this to the display object in your Core Script:

display: {
  orderListShowShippingAddress: true,
},

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

Show a custom order ID

You can replace the order number customers see with your own (a "visible ID"), so order numbers match across your systems.

Add custom content with slots

Custom slots (or targets) are places in My Account, such as above Recent Activity, where you can add your own HTML. See Custom slots.

Advanced account settings

Customer metafields give you finer control over account and address data, for example when a backend system such as an ERP needs specific customer IDs. Each one uses the namespace sparklayer with the key below.

To add them on Shopify, go to Settings,Metafields and metaobjects,Customers (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Settings › Metafields and metaobjects › Customers to do this now. Opens in a new tab., as Shopify metafields describes. On other platforms, see Metafields.

FAQs