Customizing the Affinity customer portal theme

Customize and update the Affinity customer portal to match your brand. This guide explains how to customize your theme's content and appearance, and provides advanced configuration options available with Affinity.

Before you start

• Some Affinity customizations require custom code, which Recharge does not support per its design and integration policy. Recharge recommends working with a certified Recharge partner if you require developer assistance.
• This guide explains how to make basic customization changes to the Affinity customer portal. For information on advanced customizations, see using advanced customizations in Affinity.
• Customization instructions do not apply if you use the Affinity Home Page Builder.

Customizing the Affinity portal

Recharge provides an intuitive no-code tool for simple style customizations within Affinity. Adjusting your customer portal settings aligns your portal with your brand. Recharge has also created best practices for more sophisticated style modifications, allowing you to use custom CSS to achieve your goals. 

There are a range of settings for easy, no-to-low-code customizations when it comes to updating content and enhancing functionality. There are also dedicated extension points that allow you to seamlessly integrate your UI elements into the portal. These elements range from straightforward announcements and callouts to intricate widgets, enabling you to incorporate unique functionalities within the portal.

Recharge is committed to improving the Affinity portal's functionality based on merchant feedback. To prevent you from locking into a specific version, Recharge does not expose the source code; instead, it provides safe patterns to achieve your desired customizations.

Recharge designed the Affinity customer portal to give you control over the content your customers see. If you are working with a developer, you can make many advanced customizations to the portal to accomplish your goals. See using advanced customizations in Affinity documentation for available options, or have your developer refer to the Recharge Dev Docs for advanced implementation instructions.

Customize the theme appearance

Customize and update the Affinity portal to match your brand:

• If your customer portal is embedded in your storefront, you can make customizations directly in the Shopify Theme Editor or use CSS

Shopify's theme editor

Transform the look and feel of your customer portal by adjusting your settings. Watch the video below for a walk-through on customizing the Affinity customer portal.

You can access the Shopify Theme Editor directly in your Recharge merchant portal: 

1. Click Storefront in the merchant portal and select Customer portal.
2. Select the Theme to customize from the Shopify theme drop-down menu. 
3. Select your test customer account from the Customer account drop-down menu. 
   • Recharge recommends using a test customer to safely preview your portal without impacting real customer accounts.
4. Click Get started to open the Shopify theme editor.

Update the “More about this product” pop-up text

In the Affinity customer portal, the More about this product link in the Manage Subscriptions section opens a pop-up that displays the product description from Shopify.

To update the text shown in this pop-up:

1. In your Shopify admin, navigate to the product page for the item you want to update.
2. In the Description field, enter or edit the text you want to display in the pop-up.
3. Save your changes.

The updated text will appear in the More about this product pop-up the next time a customer views it in the Affinity portal.

Custom CSS

Most styles in Affinity are stored using CSS variables. You can overwrite any default values by targeting the .recharge-theme class and customizing default variables.

See Using custom CSS in the Affinity customer portal in the Recharge Developer Docs for detailed instructions on implementing custom CSS within the portal.

Affinity translations

Text content in Affinity is fully customizable via the Translations section of your merchant portal. Recharge also enables manual addition of translations for businesses catering to diverse markets. Recharge does not automatically sync translations with Shopify settings.

Before manually adding translations to Recharge, it is important to note what determines the default language of your customer portal. The default language shown on the customer portal differs depending on the customer portal location of your store: 

Refer to the following steps to add translations to your customer portal: 

1. In the Recharge merchant portal, click Storefront, then Copy & translations. 
2. Click the Customer Portal - Affinity tab.
3. Select a language from the Language dropdown.
4. After selecting a language, click the dropdown arrow to add translations for each section.
5. Click Save to confirm your changes. 

Product cross-sell carousel

See How to enable the product cross-sell carousel on your Affinity customer portal for instructions on cross-selling in your customer portal.

Testing customizations before going live

Test all customizations safely before they reach your customers.

Copy updates done through the translations section are scoped to Affinity, ensuring you can update all your copy and manually add translations for other languages without affecting your live portal.

To make simple style changes using the theme editor, click Customize next to the Affinity theme. This lets you choose a theme and preview your customizations in real time. It's safe to select your live theme, since any changes made in the theme editor are specific to the Affinity theme and won't affect your main portal or other storefront pages.

If you have more advanced customizations using custom code, see Affinity developer workflow for best practices for hosting your code, and instructions on testing and deploying your changes.

Advanced customizations

Use advanced customizations to elevate the Affinity portal and align it with your business offering. See using advance Affinity documentation for available options, or have your developer refer to the Recharge Dev Docs for advanced implementation instructions.

Subscription swap options

Enable the Customers can swap between products option under Cross-sells and swaps in your customer portal settings to allow customers to swap their subscription products. The displayed swappable products are based on the settings you choose for available-for-purchase products.

You can even customize the swappable products displayed by product or variant. See the Dev Docs for instructions on using Affinity's advanced configuration options to offer specific products as swap options.

Reschedule options

Enable the Reschedule upcoming regular orders in your customer portal settings to let customers update the next order date for a product or group of products. Once enabled, customers can easily reschedule their orders, using the quick delay frequency options and calendar presented to them.

See reschedule options in the Recharge Dev Docs for advanced instructions on customizing the quick delay frequency options, and the available dates that show on the calendar.

Frequency limits

The frequency options available in Affinity when a customer adds or edits a subscription are determined by the Edit subscription frequencies setting under Customer portal functionality in the customer portal settings.

Quantity limits

Enable Edit product quantities in your customer portal settings so customers can update their product quantities when adding or adjusting a subscription or one-time product.

See quantity limits in the Recharge Dev Docs for instructions on limiting the product quantity to a specific range.

Quick action availability

You can configure the global availability of the options for ordering now, skipping, or rescheduling using your store settings. However, you may need to override these settings for specific contexts, such as the next order view or for certain products.

Use contextual feature controls in Affinity to limit or modify features in specific contexts, ensuring your customers have the best possible experience. For example, while the reschedule option is available for most products in your catalog, you can make it unavailable for a specific product.

See contextual feature control in the Recharge Dev Docs for set-up instructions.

Date customization

Customize how dates are displayed in the Affinity portal. See date customization in the Recharge Dev Docs for set-up instructions.