Skip to main content
From their account your customers can manage their subscriptions, view their orders, and update their billing and shipping details.

​
Code

​
Props

Props should be passed as attributes to the component element.
​
boolean
Prevents customers from editing their pick & mix subscription selections from their account. Useful if you manage subscription contents manually.Defaults to false

​
Features

​
Rewards Dashboard

If you have a rewards programme enabled, the account component automatically displays a rewards section where customers can view:
  • Their current reward tier and tier badge
  • Points balance and points history
  • Progress towards the next tier
  • Available perks for their current tier

​
Subscription Upsell

You can display a product grid within the account page encouraging customers to start or upgrade a subscription. Configure the collection, heading, message, and grid layout from your web component settings.

​
Order History

Customers can view their complete order history with order details, tracking information, and the ability to reorder previous purchases.

​
Subscription Management

Customers can manage their active subscriptions including:
  • Viewing upcoming renewal dates
  • Updating payment methods
  • Managing pick & mix selections (unless disabled)
  • Viewing subscription history

​
Styling

The following parts are available to style the account component:
​
The primary action buttons displayed in the account component. This is normally when a “submit” button is used.
​
The cancel button displayed in the account component.
​
The navigation links displayed in the account component.
​
The navigation links displayed in the account component when they are active.
​
The containing div around the login and register forms.
​
The login and register forms
​
The h1 heading.
​
The h2 heading.
​
The label.
​
Links
​
The loading spinner displayed when various actions are loading.
​
The primary action button on the login, register and verify account forms.
​
The styling applied to form input fields, including the <textarea> element.
​
The loading spinner displayed when various actions are loading.
When targeting any of the parts, you must prepend the part name with the component name. For example, to target the loading spinner in the account component, you would use the following CSS: