Understanding the Affinity 2.0 Subscription details page

The Affinity 2.0 Subscription details page is where customers manage an individual subscription. From this page, customers can reschedule an upcoming order, skip a delivery, swap to a different product, change product options, upgrade to prepaid, and cancel the subscription.

In Affinity 2.0, the Subscription details 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 Subscription details page, what conditions control each section, and how the standard and bundle templates differ.

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 Subscription details page customers interact with when managing a single subscription. Customers use this page to:

• Reschedule, skip, or swap an upcoming order
• Change the product options on the subscription
• Upgrade a recurring subscription to prepaid
• Cancel the subscription

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.

Open the Subscription details page in the Page Builder

Use the Page Builder to customize the Subscription details page. There are two templates, one for standard subscription products and one for bundle products.

1. In the Recharge merchant portal, click Storefront and select Customer portal.
2. Locate Affinity 2.0 under Your current theme.
3. Click Customize to open the Page Builder.
4. At the top of the page, click the Overview drop-down. This menu lists the pages you can customize: Overview, Subscriptions, Subscription details, and Account.
5. Hover over Subscription details, then select Standard product or Bundle.

The Page Builder shows a preview of the page you selected, and the page’s sections are listed in the left panel.

Standard and bundle templates

The Subscription details page uses two separate templates:

• Standard product: For standard subscription products.
• Bundle: For bundle products.

Customers see the template that matches the product on the subscription they’re viewing.

Configure each template separately so the layout suits how customers manage that product type. The bundle template includes an improved bundle widget inside the portal.

The templates differ in these ways:

• The standard template has a Product options section with variant selectors, a quantity stepper, a frequency dropdown, and the shipping address.
• The bundle template has a Bundle options section with variant selectors and a frequency dropdown, plus a Choose at least 1 picker for the bundle contents. The picker includes a Fill with best sellers link, collection tabs, and a Filter button.

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. The Product section is locked in place. The other sections can be reordered by dragging them. Only the Swap carousel and Cancel subscription sections can be removed.

Product

The subscription itself, showing the product title, variant, frequency, next order date, and pricing and discounts. This section also holds the Reschedule, Skip, and Swap actions.

The Product section always appears on the page. You can't remove it or change its position.

In the Page Builder, you can configure:

• Product details visibility: Choose In a modal (customers see product details when they tap a link), Inline (details appear directly on the page), or Hidden. Product details are pulled from your product in Shopify.
• Product details link label: The link text, which defaults to "More about this product". It only shows when visibility is set to In a modal.
• From here, customers can: Turn Swap to a different product, Skip, Reschedule, and Cancel on or off.
• Actions button label: The label for the button that groups actions, which defaults to "Manage". The button is used when more than three subscription actions are available.

Customer portal settings also apply. For example, the Reschedule upcoming regular orders and Skip their next order settings control whether those actions are available.

Upgrade to prepaid

An offer promoting the savings a customer gets by switching a recurring subscription to a prepaid plan, for example "Save up to 10% when you upgrade to prepaid!" It shows the prepaid option and an Upgrade to prepaid button.

The offer appears only when the Show prepaid upsell customer portal setting is turned on. The setting allows customers to switch from a regular subscription to a prepaid plan when one is available.

Product options

Lets customers change the details of their subscription. A note at the top tells customers that changes apply to every order, not just the next one. Customers select Save changes to apply their edits.

On the standard template, the section includes:

• Product options: Variant selectors, such as Size and Color. A product with only a default variant still shows a selector.
• Quantity and frequency: A quantity stepper and a frequency dropdown.
• Shipping: The delivery address, with an Edit link.

On the bundle template, the section is called Bundle options and includes variant selectors, a frequency dropdown, and the bundle contents picker.

Swap carousel

Alternative products the customer can swap their current product for. Each product card shows an image, product name, variant, price, and a Swap button. Customers use arrows to scroll through the products.

In the Page Builder, you can configure:

• Title: The heading above the carousel. The default is "Fancy a change? Swap to a different product:".
• Show browse all button: Shows a Browse all button that lets customers see a searchable list of all cross-sell products.

The carousel is hidden when customers aren't allowed to swap products in the customer portal settings.

Cancel subscription

The Cancel subscription section adds a cancel link at the bottom of the page. Customers also see a cancel action in the Product section when Cancel is turned on there.

The cancellation options your customers see, such as the cancellation flow, follow your customer portal settings in the merchant portal.

Custom sections

Merchant-defined content added with custom extensions. Visibility is determined by the extension's own logic. See Using custom extensions in the Affinity Page Builder.

Add content blocks

Content blocks are extra pieces of content you add to the page, such as text, images, or video, alongside the standard sections. Select Add a section to add one or more of the following content blocks:

• Custom HTML
• Video
• Callout
• Columns
• Text and image
• Announcement
• Credits balance
• Referral link

Image requirements: Images must be square and no larger than 60 x 60 pixels.

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

Customize text and styling

Select Customize standard text to edit the standard text for the Subscription details page. Changes to generic text apply throughout your customer portal, not only to the page you're editing. Apply Global styles so the page matches the rest of your portal. Preview the page on both desktop and mobile before you publish. For the full set of styling and text options, see Customizing the Affinity 2.0 customer portal.