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

The account opens on the tab that has something to say: a live subscription, failing that the customer’s orders, failing that the invitation to start a subscription. A URL that names a tab wins over that, so you can link straight to #orders or to a subscription at #subscriptions/123. The tabs are Subscriptions, Orders and Profile, with Rewards added when your rewards programme is on. On a phone they scroll sideways rather than collapsing into a dropdown.

​
Subscriptions

Each live subscription is a card carrying its status, when the next shipment is due and what can be done about it. Past subscriptions are listed beneath. Opening one gives the customer:
  • Skip - hold back one or several shipments, up to the allowance the package sets, with the date everything resumes. Undo skip replaces it while a skip is in effect. Skipping asks why, optionally, and the answer appears on the subscription’s activity trail
  • Move a delivery - push the next one back a week, a fortnight, or to a date of their own, counted from the day it is currently due. A delivery cannot be moved past the one after it, and only that shipment moves: the payment and the shipments after it keep their dates
  • Send now - charge and send the next shipment immediately, offered once it is within a fortnight and there is something scheduled
  • Change frequency - where the package sells at more than one billing frequency, using your own wording for it
  • Extras - add items to the next shipment, or to every shipment. Extras close while a shipment is being prepared
  • Pick & mix selections - unless disabled with the prop below
  • Payment and delivery details - the card on file and where the shipments go
  • Cancel - always available, after asking why and offering whatever answers it
Packages with dated shipments also show what is coming up, and a shipment further out can be skipped from there. Which of skip, move and send now appear is set per package. See What subscribers can do.
“Shipment” is the default word throughout. Set your own, singular and plural, under Labels, and the account follows.

​
Gift Subscriptions

A gifted subscription carries a box of its own under the header with the giver’s message, who it came from and how many deliveries are left of the term, and is marked as a gift in the list. While the giver is still paying, the recipient sees neither the price nor the payment card, and cannot add extras. Where a gift hands over at the end of its term, the recipient is told before the day, since it needs a card of their own to carry on. See Gift subscriptions.

​
Orders

Customers can view their order history with order details, tracking information, and the ability to reorder. An order that owes money is flagged on the list with Add payment, and is paid from the order itself. A declined payment says so, with the provider’s reason where there is one.

​
Rewards

If you have a rewards programme enabled, a Rewards tab appears where customers can view:
  • Their current reward tier and tier badge
  • Points balance and what it is worth
  • Progress towards the next tier
  • The tiers on offer and the perks of each
A summary also sits at the top of the account, beside the greeting.

​
Subscription Upsell

You can display a product grid within the account page encouraging customers to start a subscription. It shows whenever the customer has nothing running, and sits inside the subscriptions list so past subscriptions stay reachable. Configure the collection, heading, message, and grid layout from your web component settings.

​
Your Own Wording

Most of the copy in the account is yours to write: the sign in, register, verification and password reset messages, the empty states on every tab, and the explanations shown while managing a subscription. Anything left blank keeps Marzipan’s wording. See Account copy.

​
Status Messages

Saving, skipping, cancelling and the rest confirm with a toast that takes the position and the dark or light style you set for the add-to-cart notification, so the storefront and the account agree. A failure takes your error colour.

​
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.
​
Checkboxes, such as “set as default” on the address form.
​
The loading spinner displayed when various actions are loading.
​
The panel at the top of a subscription, and subscription-title for its heading.
​
The panel at the top of an order, and order-title for its heading.
​
The panel at the top of the profile tab.
​
The points panel on the rewards tab.
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: