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:
- In the merchant portal click Storefront, then Customer Portal.
- Select Affinity under Themes and confirm the Shopify theme and customer account to preview your customer portal theme with.
- Click Customize theme and you will be redirected to the Shopify Theme Editor.
Preview Affinity
To preview Affinity customer portal theme:
- In the merchant portal click Storefront, then Customer Portal.
- Select Affinity under Themes and confirm the Shopify theme and customer account to preview your customer portal theme with.
- Click Preview theme.
Publish Affinity
After you preview your theme, publish it for your store on the same page.
- Click Storefront in your merchant portal and select Customer Portal.
- In the Customer portal section, select Themes.
- Under Themes, select the radio button next to Affinity.
- 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:
Customer portal location |
Default language behavior |
Example |
Hosted by Recharge | The default language displayed to your customers is based on their browser language. | The customer portal will display in French if a customer visits your storefront from a browser set to display translations in French. |
Embedded in platform storefront | The default language displayed is based on the Shopify storefront settings, meaning the language displayed on the Shopify storefront is the language displayed by default in the customer portal. |
If a customer is viewing your storefront and Shopify determines they should be viewing it in French, they will see French displayed in the customer portal as long as manual translations have been added to Recharge. |
Refer to the following steps to add translations to your customer portal:
- In the Recharge merchant portal, click Storefront then Translations.
- Click the Customer Portal - Affinity tab.
- Select a language from the Language dropdown.
- Once a language is selected, add translations for each section by clicking the dropdown arrow.
- Click Save to confirm your changes.