Understanding the Affinity 2.0 Accounts page

The Affinity 2.0 Accounts page is where customers manage their personal information, shipping addresses, and payment methods. 

In Affinity 2.0, the Accounts page is fully supported in the Page Builder, so you can customize its layout and sections instead of using a fixed layout.

This guide explains what sections make up the Accounts page and what conditions control each section.

Before you start

• This guide covers Affinity 2.0. To confirm which version of Affinity you're using, check your theme settings in the merchant portal. If you're new to Affinity 2.0, see Getting started with Affinity 2.0.
• Some customizations require custom code, which Recharge does not support. See Working with third-party developers for more information.
• Custom extensions and event-based customizations require development work. See Using custom extensions for Affinity 2.0 for more information about building custom extensions.
• Customer Portal settings control which actions are available to customers. Enabling a Page Builder option doesn't override a disabled Customer Portal setting.

How it works

Use the Page Builder to customize the Accounts page customers interact with when managing their account. Customers use the Account page to manage their:

• Payment details and methods
• Contact information, such as their name, email, and phone number
• Shipping address

As on other Affinity 2.0 pages, you can include a section in the page layout, but it still won't appear for a customer if its conditions aren't met. Any feature can be gated by up to four layers, all of which must be satisfied: store settings, page layout, section settings, and customer data.  See How Customer Portal settings interact with section settings in Customizing the Affinity 2.0 customer portal.

Section catalog

Each section below includes what the customer sees, the conditions that control its visibility, and the options you can configure in the Page Builder. All five built-in sections can be removed and reordered.

Payment issue

An alert about a payment method problem, such as an expired card. The alert shows the affected order date and the payment method affected by the issue, and customers can select either Update your payment details or Retry payment. The section only appears to customers who have a problem with their payment method.

Configurable options:

• The card style (Display inside a card).

Your details

The customer's name, email, and phone number, with an Edit your details link when editing is enabled.

Configurable options:

• Section title
• Allow customers to edit their details from here toggle
• Edit details modal title and save button label
• Card style (Display inside a card)

Addresses

A list of the customer's addresses. Each address shows an Edit address link and a subscriptions link (for example, "Used for 2 subscriptions") that opens a list of the subscriptions delivering to that address. Customers can also add a new address.

Configurable options:

• Section title and optional description
• Subscription list link label and modal title (support the {count} and {address} variables)
• Add an address button label, form title, form button label, and success message
• Card style (Display inside a card)

Customers can also delete an address, but only if it has no active subscriptions associated with it. Until then, the delete option is disabled with a tooltip prompting them to move or cancel those subscriptions first. See Removing customer details.

Payment methods

A list of the customer's payment methods. Each payment method shows a subscription link that opens a list of the subscriptions charged to that method. Customers can also add a new payment method.

Configurable options:

• Section title and optional description
• Subscription list link label and modal title (support the {count} and {payment_method} variables)
• Add a payment method button label, form title, form button label, and success message
• Card style (Display inside a card)

On the Shopify Checkout Integration, payment methods are managed by Shopify, so customers can't delete a payment method from the portal - deleting a card happens in their Shopify account. From the portal, customers can send themselves a Shopify email to update the card on file or, when frictionless payment updates are enabled for the store, add or update a payment method directly. See Updating payment methods for a customer.

Credits balance

The customer's credit balance, with an info pop-up customers can open from the icon next to the balance. Shown only to customers who have rewards credits. 

Configurable options:

• Card heading (supports the {available_balance} variable)
• Auto-apply toggle label
• Info pop-up heading, body text, and button labels
• Card style (Display inside a card)

Custom sections

Merchant-defined content added with custom extensions. Visibility is determined by the extension's own logic. See Customizing the Affinity 2.0 customer portal.

Add content blocks

Select Add a section to add one or more of the following content blocks to the page:

• Custom HTML
• Video
• Callout
• Text and image
• Image
• Columns
• Announcement
• Punch Card
• Referrals

Custom extensions can be added from the Custom extensions tab of the same dialog.