Using the Affinity customer portal theme

The Affinity customer portal theme provides a modern, more intuitive, and clean user interface that allows users to manage their subscriptions seamlessly. This guide covers previewing, editing, and publishing the Affinity customer portal theme along with limitations and resources for support. 

Before you start

• Refer to Customizing the Affinity customer portal theme for more information about customizations.
• Affinity is supported on these browsers.
• Affinity supports your internationalization needs with multi-currency and localization functionality.
• Note the following limitations for Affinity customer portal theme:
  • Affinity is currently only available to Shopify stores.
  • Affinity is not available in the Theme Engine.
  • Customers subscribed to regular subscriptions cannot swap to a Bundles subscription.  
  • Bundles subscribers cannot swap their parent bundle product for another parent bundle product but can swap to a regular subscription from a Bundle. 

Affinity theme highlights 

The Affinity customer portal theme allows customers to view and update their subscription orders quickly and efficiently. 

Optimized mobile experience

Affinity performs as well on a mobile device as it does on your desktop making subscriptions more accessible. 

Order management

Order management through the Affinity customer portal theme is based on order centric product management rather than subscription centric. This gives your customers a high level overview of all of their purchases. 

Shorter journeys

Speed up customer tasks by displaying key functionality in a simple order overview. 

Simple customizations

Easily update the look and feel to match your brand using Shopify’s theme editor.

Make edits using Shopify theme editor

Use the Shopify theme editor to customize the look and feel of your customer portal. You can make changes to your branding, pages, image, cards, and shapes. 

• To make edits using the Shopify theme editor, your customer portal location must be set to embedded in platform storefront. Stores using embedded in platform storefront can also use CSS to make customizations. 
• If your store is using the customer portal location Hosted by Recharge, use CSS to make customizations. 
• Stores on both customer portal locations can make advanced customizations. Refer to Customizing the Affinity customer portal theme for more information. 

To make customizations to your customer portal using the Shopify Theme Editor: 

1. In the merchant portal click Storefront, then Customer Portal.
2. Select Affinity under Themes and confirm the Shopify theme and customer account to preview your customer portal theme with. 
3. Click Customize theme and you will be redirected to the Shopify Theme Editor.
   

Preview Affinity

To preview Affinity customer portal theme:

1. In the merchant portal click Storefront, then Customer Portal.
2. Select Affinity under Themes and confirm the Shopify theme and customer account to preview your customer portal theme with. 
3. Click Preview theme.
   

Publish Affinity

After you preview your theme, publish it for your store on the same page. 

1. Click Storefront in your merchant portal and select Customer Portal.
2. In the Customer portal section, select Themes. 
3. Under Themes, select the radio button next to Affinity. 
4. Scroll to the bottom and click Save.

Translations with Affinity

To display the customer portal in multiple languages, stores using the Affinity customer portal theme must manually add customer portal translations to Recharge. 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 Translations. 
2. Click the Customer Portal - Affinity tab.
   
3. Select a language from the Language dropdown.
   
4. Once a language is selected, add translations for each section by clicking the dropdown arrow. 
   
5. Click Save to confirm your changes.