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 is not supported by Recharge as per the design and integration policy. Visit working with third-party developers if you require developer assistance.
• This guide explains how to make basic customization changes to the Affinity customer portal. See using advanced customizations in Affinity with Affinity for information on advanced customizations.

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 a set of best practices for more sophisticated style modifications, allowing you to implement 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 allowing you to integrate your UI elements within the portal seamlessly. These elements vary from straightforward announcements, callouts, and intricate widgets, all the way to enabling you to incorporate unique functionalities within the portal.

Recharge is committed to improving the functionality of the Affinity portal based on merchant feedback. To prevent you from locking into a specific version, Recharge does not expose the source code and instead 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, there are many advanced customizations you can make to the portal to accomplish your goals. See using advanced customizations in Affinity to understand the 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
• If Recharge hosts your customer portal, you must make customizations by adding CSS in your Recharge customer portal settings

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.

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 upsell carousel

Use the product upsell carousel to showcase recommended products in a rotating carousel format, and encourage customers to add more items to their subscription.

Enable the option to add products to a subscription in your customer portal settings under Customer portal controls to add the product carousel to your store. Products displayed in the carousel depend on your settings. You can showcase all Recharge products, or highlight a specific collection through the product carousel.

By default, Affinity displays the first twelve items from your catalog in the product upsell carousel. 

Select a different Recharge collection to power this section and gain more control over the products available to customers. Highlight new, seasonal, or top-performing add-ons to subscriptions with advanced settings, providing a tailored customer experience. See customizing the product carousel in the Recharge Developer Docs for advanced instructions.

Offering one-time products through the carousel

If you are using Product Subscription Plans, you can offer one-time products through the product carousel:

1. Set the product to available as a one-time purchase in the Recharge merchant portal.
2. Create a collection in your Recharge merchant portal containing the products you wish to display on the product carousel. Add your one-time product to this collection.
3. Navigate to your customer portal settings and update the products available for purchase to Recharge collection.
4. Select the collection you created earlier. 
5. Save your changes. 

After saving your changes, the product upsell carousel will only display products that you added to the collection.

Testing customizations before going live

Safely test all customizations 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 allows you to choose a theme and preview your customizations in real-time. It's safe to select your live theme, since any changes made through the theme editor are specific to the Affinity theme, and won't impact 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 take the Affinity portal to the next level and match your business offering. See using advanced customizations in Affinity to understand the available options, or have your developer refer to the Recharge Dev Docs for advanced implementation instructions.

Susbscription swap options

Enable the Swap product option under Customer portal controls in your customer portal settings to allow customers to swap their subscription products. The swappable products displayed are based on the settings you choose for products available for purchase.

You can even customize the swappable products displayed by product or variant. See using advanced configuration options with Affinity in the Recharge Dev Docs for advanced instructions on offering specific products as swap options.

Reschedule options

Enable the Edit upcoming date 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

Frequency options available in Affinity when a customer adds or edits a subscription are dictated by the Customer-facing frequency options setting under Customer Portal controls.

Stores using this setting can choose to limit the frequency options available by a specific range. For example, you can only allow customers to select frequencies within a 1 - 4 week range. See frequency limits in the Recharge Dev Docs for instructions.

Quantity limits

Enable the Edit upcoming quantity in your customer portal settings to let customers update their product quantity 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 available for most products in your catalog, you can ensure the reschedule option is unavailable for a specific product.

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

Date customization

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