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

​
Code

<marzipan-account>
  <div slot="stripe-card-element" id="stripe-card-element"></div>
</marzipan-account>

​
Props

Props should be passed as attributes to the component element.
​
disable-pick-mix-subscription-edit
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:
​
--button
The primary action buttons displayed in the account component. This is normally when a “submit” button is used.
​
--cancel-button
The cancel button displayed in the account component.
​
--nav-link
The navigation links displayed in the account component.
​
--active-nav-link
The navigation links displayed in the account component when they are active.
​
--form-container
The containing div around the login and register forms.
​
--form
The login and register forms
​
--h1
The h1 heading.
​
--h2
The h2 heading.
​
--label
The label.
​
--link
Links
​
--loading-spinner
The loading spinner displayed when various actions are loading.
​
--login-button
The primary action button on the login, register and verify account forms.
​
--input
The styling applied to form input fields, including the <textarea> element.
​
--marzipan-spinner
The loading spinner displayed when various actions are loading.
When targetting 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:
marzipan-account::part(--loading-spinner) {
    @apply bg-green-500;
}