Understanding how Affinity highlights the customer's next order

Recharge designed the Affinity customer portal to streamline the customer experience, and focus on customers' orders.

This guide explains how each component works on the Affinity portal's entry page, and outlines any settings you must enable to maximize the customer experience.

Before you start

• Affinity is a no-to-low code solution designed for merchants to seamlessly configure. See Customizing the Affinity customer portal for customization steps.
• Some Affinity customizations require custom code, which is not supported by Recharge as per the design and integration policy. See using advanced customizations in Affinity with Affinity for information on advanced customizations. Visit working with third-party developers if you require developer assistance.
• For some settings to appear in the customer portal, they must be enabled in the merchant portal. 
• This document reflects the updated Affinity customer portal. If you are using an earlier version of the Affinity portal, some elements, layouts, and available features may differ slightly from what is described in this guide.

How it works

Often, the primary goal for a customer logging in to their portal is to manage their upcoming order, including:

• Rescheduling their upcoming order
• Adding additional products to their upcoming order
• Changing the product they're subscribed to

Affinity prioritizes the customer's next order, placing it at the forefront of the customer experience and making it easy for customers to execute common tasks and understand upcoming order details. 

When a customer logs in to the Affinity customer portal, they're immediately shown the Affinity entry page, which adapts its content based on the customer's context.

For example, customers facing outstanding issues with existing orders are given tips and tools to troubleshoot and resolve those issues, while the page shifts focus if a customer is considered inactive, making it easy for customers to reactivate a cancelled subscription or start a new one.

Active subscriber view

The active subscriber view is the typical view for active subscribers without order errors.

The active subscriber view is made up of two types of components:

• Base components: Standard page components available to all active subscribers
• Dynamic components: Dynamic elements presented based on specific customer criteria

Base components

Next order quick actions

The next order quick actions make it easy for customers to take date-related actions on their upcoming order. Customers can choose from the following buttons if settings are configured in the merchant portal:

• Send Now to expedite the order and have their next order processed in that moment
• Reschedule to postpone the order to a later date
• Skip to skip the delivery until the next cycle
• Unskip to restore a previously skipped charge

The skip functionality changes slightly for orders containing one-time products. Customers cannot skip their one-time products, so the product is permanently moved to the next available date.

Orders on the same charge, with the same date and address, are listed on this page. Any actions performed in this section will impact that charge.

Available actions

There are three main actions available to customers, the option to send now, the option to reschedule, or the option to skip their upcoming order. Several factors determine what buttons are available to customers:

• Customer portal settings: Ensure that the following customer portal settings are configured to allow customers to update their orders:
  • Edit upcoming order date: The options to reschedule or order the product immediately are only available if this setting is enabled
  • Skip shipment: The ability to skip the next shipment is only available if this setting is enabled
• Prepaid products: Recharge does not show any of the three buttons for prepaid products. Customers cannot order the prepaid product immediately, or reschedule their order. They can skip an order containing prepaids. This option is displayed inside the order summary component. You must have the customer portal setting Allow skip shipments on prepaids enabled for this option to work.
• Contextual feature control: You can work with your developer to employ contextual feature controls, and enable or disable certain actions based on context. For example, you could enable the skip option on the subscription details page, but disable it on the next order page. See Contextual feature control for more information.

Date display

The date displayed under "Your next order" lets the customer know when Recharge will process their next order, and when they can expect to be charged again. You can only display the next order charge date, not the delivery date.

See date customization in the Recharge Dev Docs for customization options.

Savings display

The savings displayed under "Your next order" lets the customer quickly understand how much they are saving on their upcoming order. This includes all applied discounts, such as subscription discounts, tiered pricing, promo codes, and other promotional offers

In your order display

Give customers insights into the products included on their upcoming order, the option to edit, edit bundle contents, swap, add a product, or cancel. 

Individual order summaries are displayed if a customer has multiple orders scheduled for the same date.

The prices shown in this section reflect any plan or tiered discounts. All other discounts, such as flow, member, automatic discounts or promo codes will display on the Order summary. If applicable, the full price shown reflects the Shopify "compare at" price. 

Order summary

The Order summary provides a complete view of how the final order total is calculated, including all discounts, estimated taxes, and shipping.

Customers can interact with this section to apply a discount to their order. The discount is associated with the orders and applies to current and future orders according to the discount rules you set. You must enable this setting so that customers can add a discount code to their orders. Make sure to enable the Remove discount from customer addresses after discount limit has been reached discount setting to ensure the discount is removed after it reaches its usage limit.

Recharge does not display information about the order total, or the options to add a discount code or edit the payment method for prepaid shipment orders.

Shipping and payment

In the Shipping and payment section, customers can edit their address or payment method.

• Edit address: Customers can edit their address in the order summary section and have that address apply to all future orders. Ensure that the customer portal settings are configured to allow customers to edit their shipping address.
• Edit payment method: There are two options available to merchants using the Shopify Checkout Integration to allow customers to update their payment method:
  • Send edit link: This sends the customer a link to permanently update the payment record on file. 
  • Use a saved payment method: Allow customers to select an existing payment method saved to their account. This new method is used to process all future orders. 

Cross-sell carousel

Use the cross-sell carousel as a unique opportunity to highlight new products to customers that they can quickly add to their upcoming order.

The carousel is only visible when you have the option to Add products to subscriptions enabled in your customer portal settings. 

Products available for purchase through the carousel are determined by the products available for purchase customer portal setting. Recharge features the first 12 products from this catalog in the carousel by default. Use Affinity's advanced configuration options for additional control over the featured products.

Credits

Recharge displays a credit section to customers in the Affinity customer portal if you have Credits enabled.

Customers can view their available balance and have the option to apply these credits to their upcoming orders.

Offers

If applicable, Recharge displays a strip above the products list showing special offers the customer can claim. This appears when the charge is queued, not a prepaid order, and at least one offer is configured.

Available offers include:

• Free gift - A gift product automatically added to the order. No customer action needed.
• Claimable gift  - A gift the customer can choose to claim, sometimes with a variant selection (e.g. color or size). It will disappear once claimed.
• Prepaid upsell - An offer to switch from a recurring subscription to a prepaid plan (e.g. "Save 10% by prepaying for 6 months")

Tiered discount

If applicable, Recharge displays a progress bar showing how close the customer is to unlocking a larger discount by adding more items to their order. This may include an Add products link if the discount targets a specific collection.

Dynamic components 

Recent order

A recent order component displays in the portal if Recharge has processed an order for the customer within the last 75 hours. This component is available above the next order quick actions section.

Other active subscriptions

Affinity displays any active subscriptions not part of an upcoming order on the active subscriber view so that customers can easily consolidate and manage their subscriptions.

Customers see a specific card highlighting products missing from the next upcoming order. Customers can click Manage to add the product to their next upcoming order.

Alternate states

Recharge displays alternative page components depending on where the customer is in their journey.

Order in progress

Recharge displays the order in progress component after a customer clicks Send Now for a brief period while recalculating the next order information.

Charge errors

When there's a problem processing an order, linked subscriptions are put on hold until the error is resolved. Customer actions may be limited depending on what caused the charge error.

Affinity prioritizes these issues for customers by highlighting them in the portal and providing customers with resolution steps.

Error type	Description	Example
Payment method errors	If the charge error stems from an issue with the customer's payment method, Affinity prompts users to update their payment method on file. Affinity also displays a Retry button so customers can try the charge again once they've updated their information.
Inventory errors	Inventory errors may arise for customers depending on your inventory settings. Affinity displays messaging to customers highlighting the affected product, allowing customers to skip the order, or swap to an available product.
Other errors	Charge errors may occur that are outside of the customer's control. In these instances, Affinity presents a message to customers advising them to contact the store for assistance, ensuring that the issue is addressed.

Inactive subscriber

Affinity encourages customers without active subscriptions to rejoin by either reactivating a previous subscription or creating a new one.

Reactive a subscription

Customers can click on the Reactivate link and reactivate their subscription with one click. The customer's previous subscription is restarted with the same options, and Recharge uses the previous delivery cycle to calculate the next order date.

You must enable the option to allow subscribers to reactivate subscriptions in their customer portal in your customer portal settings for this feature to work.

Start a new subscription

Inactive subscribers see the cross-sell carousel component, if you have it enabled, offering customers the opportunity to begin a new subscription with the recommended products.

The next order date for the customer is the current date if a customer reactivates their subscription by purchasing it through the carousel.

Understanding pricing and discounts

This section explains how prices and discounts are displayed in the Affinity customer portal and where each type of adjustment appears.

Pricing in the customer portal is shown across two main areas:

• Product-level pricing (in the product details on the Subscription page)
• Order-level pricing (in the Order summary)

Each area includes different types of discounts.

Product-level pricing

Prices shown next to individual products reflect:

• Product discounts
• Plan discounts
• Tiered discounts

These discounts are already applied to the price shown for each item. If available, the full price reflects the product's Shopify "compare at" price. 

Order-level pricing

The Order summary shows the full breakdown of the order total including:

• Subtotal, before any discount
• All discounts, such as:
  • Subscriber discounts
  • Product discounts
  • Tiered discounts
  • Member discounts
  • Automatic discounts
  • Promo codes
  • Flow discounts
    • Each flow discount will show on its own (eg., Cancellation Offer, Reward Discount, Add-on offer)
• Shipping costs
• Estimated taxes

Savings display

The savings amount shown in the customer portal includes all applied discounts, across both:

• Product-level discounts (plan or tiered)
• Order-level discounts (promo codes, automatic discounts, etc)