Customizing the Affinity 2.0 customer portal

Affinity 2.0 gives you full control over your customer portal, without code. Design a branded experience that surfaces key actions, reduces friction, and aligns with your retention strategy using a visual page builder.

This guide covers customization options for the Affinity 2.0 customer portal, including those available through the Page Builder and beyond.

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

Affinity 2.0 offers customization options through the Page Builder and beyond. Start with built-in Page Builder controls whenever possible as they're responsive, supported by Recharge, and designed to stay compatible as Affinity evolves.

Use the table below to identify the right tool for what you want to achieve:

Customize the portal appearance

Use the Affinity Page Builder to configure, reorder, and customize sections in a safe environment:

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.

Four Affinity 2.0 pages are currently available to customize in the Page Builder:

• Overview (Next order): Customize the experience customers use to review and manage their next order. The page is divided into the Header, Main column, and Right column, so you can create a different layout in each area.
• Accounts: Customize the page customers use to manage their personal details, shipping addresses, and payment methods.
• Subscriptions: Customize the page customers use to view their subscriptions and one-time products.
• Subscription details: Customize the page customers use to manage an individual subscription, including rescheduling, skipping, swapping, and cancelling. Separate templates are available for standard subscription products and bundle products. 

1. Click the Overview drop-down at the top of the page to choose the page you want to customize:
   • On the Overview page, choose a page area: Header, Main column, or Right column.
   • On the Subscriptions, Accounts, or Subscription details page, you can either edit existing sections or click Add section to add more sections.

Preview your changes

Affinity provides two ways to preview your work before publishing. Use both before considering a customization complete.

Preview in the Page Builder

The Page Builder canvas updates as you change Global styles, section order, section settings, language, or device preview. Use the desktop and mobile controls at the top of the builder to check how the page responds at each size.

The canvas is a mock of the customer experience, not the final result. It uses representative sample data instead of real customer data, which makes it useful for evaluating:

• The order and placement of sections
• Desktop and mobile layouts
• Configured colors, spacing, and card treatments
• Section content and configurable labels
• The selected language

The mock can't represent every subscription state, conditional section, error, or customer-specific value. Custom sections also appear as placeholders rather than loading the complete extension. The Page Builder also doesn't render Affinity inside your storefront theme, so fonts and other inherited styles can look different in the live portal than they do in the canvas.

Preview in your store with customer data

Use Preview in your store to see your Affinity configuration in its real storefront context with live customer data. This is the best way to verify conditional content, real product and subscription data, custom sections, inherited storefront styles, and the end-to-end customer experience.

1. Click Preview in your store in the information banner.
2. Select a customer to use for the preview. Choose a test customer whose data represents the state you want to review.
3. Click Save & preview.

The Page Builder saves your current configuration and opens the portal in a new browser tab using the selected customer's data.

Save, publish, and iterate 

Whether saved changes affect customers depends on the page's publication status.

Before publishing

You can save, preview, and refine an unpublished page without changing what customers see. You're given the option to publish unpublished pages in two situations:

• When switching to Affinity 2.0: Click Switch to this theme, complete the customization flow in the Page Builder, and save your work. Recharge then asks whether you want to publish Affinity 2.0. The initial switch doesn't provide per-page publishing controls; all Affinity 2.0 pages available to your store are published together. Customers remain on Affinity 1.0 until you publish.
• When a new Affinity 2.0 page becomes available: If Affinity 2.0 is already active, Recharge prompts you to customize the newly available page. After you save, Recharge lets you publish the new page. Customers can continue using the existing Affinity 2.0 experience until you publish the new one.

After a page is published

Once a page is published, any further changes take effect immediately upon saving. There's no separate draft or publication step for subsequent edits. Preview changes carefully before saving a published page. You can manually reverse a change in the Page Builder, or switch the entire customer portal back to Affinity 1.0 if needed.

Match the portal to your brand with Global styles

Open Global styles to control Affinity 2.0's shared visual language. Changing a Global style (such as the brand color) updates every component that uses it throughout the experience, making Global styles the best place to establish a consistent brand foundation before customizing individual pages.

You can customize the following in Global styles:

• Logo and logo width (used exclusively for the hosted portal and some emails).
• Heading and body fonts.
• Brand, text, link, background, card, and border colors.
• Corner roundness.
• Product image aspect ratio.
• Maximum page and content widths.
• Page vertical padding.
• Custom CSS.

Build your layout with sections

Affinity pages in the Page Builder are assembled from sections. You can add, remove, and reorder sections to create the layout and customer journey that best suits your store. On the Overview page, sections are organized within the Header, Main column, or Right column. The Subscriptions, Accounts, and Subscription details pages are each edited as a single page.

Add a section

1. Choose the page and, on Overview, the page area where the content should appear.
2. Click Add a section.
3. Select an available Recharge section or one of your custom sections.
4. Open the new section and configure its settings.

Reorder sections

Drag sections into the order you want customers to encounter them. Because sections can be reordered, you can prioritize the most important action, group related information, and create a different content hierarchy for each page or page area.

Remove a section

Remove sections that aren’t needed for your layout. Removing a section removes it from the page being edited. It doesn’t delete the section from the Add a section menu or disable the underlying Recharge feature. You can add the section again later if needed.

Customize section content and behavior

Select a section to open its settings. Depending on the section, you may be able to change headings, supporting text, button labels, images, product sources, display options, or which optional customer actions are available.

After making a change, review the section in both desktop and mobile previews before saving.

How Customer Portal settings interact with section settings

Enabling an option in a section doesn't override your store's Customer Portal settings. The Page Builder controls how a feature is presented in that section, while Customer Portal settings control whether the underlying customer action is available at all. What a customer sees depends on four layers — all of which must be satisfied:

For example, enabling Allow customers to swap products from here in the Next order detail section is only one part of making Swap available. Customers see the action only when all four conditions are met: Customers can swap between products is enabled in Customer Portal settings, the Next order detail section is included on the page, the section setting is enabled, and the product and upcoming order are eligible for a swap.

When an expected action doesn't appear, check the Customer Portal setting, page layout, section setting, and the customer's data rather than only the Page Builder toggle. The same pattern applies to actions such as Skip, Reschedule, Cancel, and Add product.

Limitations of built-in sections

Built-in sections can only be customized through the settings Recharge provides, and supported cosmetic changes can be made with custom CSS. The Page Builder doesn't let you change a built-in section's internal layout, rearrange its elements, insert new controls, or replace its underlying behavior.

This boundary keeps built-in sections responsive, accessible, and compatible with future Affinity updates. If the available settings and supported CSS can't produce the experience you need, create a custom section with a custom extension instead. See Using custom extensions for Affinity 2.0 for more information.

Create a custom section with a custom extension

Custom extensions are an advanced customization option for when you need a section with content, structure, or functionality that a built-in Recharge section doesn't provide. The extension is built as a Web Component and registered in the Page Builder. Once registered, it appears in the Custom extensions tab and can be added, removed, and reordered like any other section.

Use a custom extension when you need to:

• Present content in a structure that built-in sections don't support
• Connect to an external service or load custom data
• Provide a new interactive customer workflow
• Fully control the elements and styling inside the section

Custom extensions can be used on Affinity pages, including the Overview (Next order) page, the Subscriptions page, the Accounts page, and the Subscription details page, as well as landing pages built with the Site Builder for Cancellation Prevention, Win Backs, and Upcoming Order Email flows.

You can upload the compiled JavaScript file for the extension or provide an HTTPS URL to a hosted file. For implementation requirements and registration steps, see Using custom extensions for Affinity 2.0.

See the Affinity extensions repository for multiple reference implementations and Affinity Framework resources you can use when building custom sections.

Refine the appearance with custom CSS

Custom CSS is available under Global styles and is intended for visual refinements not covered by the standard controls. Because it's part of Global styles, its scope is broader than the Affinity page currently open in the builder; it applies to Affinity 2.0 and other customer-facing experiences, such as cancellation prevention, win-back, and upcoming-order pages.

Use custom CSS for cosmetic adjustments, such as colors, backgrounds, borders, and font sizes. Don't use it to rearrange the portal, restructure the inside of built-in sections, or replace the responsive layout Affinity provides. When the desired result requires structural changes, create a custom section instead.

Custom CSS best practices

• Use Global styles and section settings before adding CSS 
• Target only supported classes whose names begin with .recharge-
• Don't target classes that look generated or random; their names can change without notice
• Avoid raw element selectors such as button or div, and avoid deeply nested selectors that depend on the current DOM structure
• Keep selectors narrowly scoped so a rule affects only the intended component or section
• Avoid changing element order, positioning major layout regions, or depending on Affinity's internal page structure
• Check Affinity and any active cancellation prevention, win-back, or upcoming-order pages on desktop and mobile after every change

Customize customer-facing text

Affinity provides two ways to change customer-facing copy, depending on who owns the text.

Change text that belongs to one section

Use a section's settings for content that belongs to that section on the page, for example, a callout heading, descriptive copy, banner text, or a configurable button label. Changing this text affects only that section on the page and in the language being edited.

Change Recharge's standard text

Use Customize standard text for Recharge-provided interface copy, such as common action labels, status messages, errors, and order terminology. The editor shows Recharge's default text and lets you provide edited text for a selected language. Use the language selector in the dialog to choose the translation you want to edit.

Market-specific content by language

You can show different content to customers in different markets using the language selector when customizing Affinity 2.0.

All changes you make in the builder are scoped to the selected locale, not just translated copy. This lets you fully customize the layout, sections, and content of a page for each language.

For example, you could:

• Display a promotional banner only for customers viewing the page in French
• Show different messaging and sections to customers viewing the page in Spanish
• Customize calls to action based on market needs

Languages available in the drop-down are based on the languages you've configured in Shopify. Recharge pulls these languages from your Shopify settings and ensures customers see the correct version based on their Shopify locale. If Recharge can't read your shop locales, you'll be prompted to update your Shopify permissions to enable language-related features.

Customize Affinity beyond the Page Builder with events

Some customizations are implemented in code that runs on the customer portal page rather than configured in the Page Builder.

Respond to customer actions with events

Affinity 2.0 broadcasts browser events as customers navigate the portal and interact with actions such as Skip, Order now, Reschedule, or Reactivate. Custom code can listen for these events to measure customer behavior or replace a standard Affinity flow with a custom experience.

See Personalizing the user journey in Affinity in the Recharge DevDocs for more information.

Customize reschedule options

Use a configuration script to customize the quick delay options and calendar dates customers see when rescheduling an order, including limiting how far into the future a customer can reschedule.

See Customizing reschedule options in Affinity 2.0 in the Recharge DevDocs for more information.

Considerations

Consider the following when using Affinity 2.0: