Using the Prima customer portal theme

Prima is the second customer portal theme alongside the Novum theme. Prima is a light, clean theme that allows your customers to easily access and modify all aspects of their subscriptions.

This guide provides an overview of the Prima customer portal theme and steps to adjust the theme's settings to match with your business's brand and needs.

Before you start

• The customer portal themes require custom CSS code to match the font, color, and style of your Shopify theme. Custom CSS is not supported by Recharge Support as per the Recharge design policy. If you require further assistance, visit the Recharge Agency Partner Directory.
• Refer to Customizing the Prima customer portal theme for common questions and customizations.

Prima theme highlights

Home page

The Prima theme provides the customer with a quick summary of their account, including their next upcoming order and most recent order.

Separated Edit order and Edit subscription pages

Two updated pages allow your customers to drill down and modify all details of a specific product of a subscription, or allow them to edit the entire order, affecting all products in it.

Grouping per date

All subscription items set to be delivered on the same date are grouped in the same subscription card if they were purchased together, or in the same column separated by address if they have different shipping addresses.

Order Now button

Give your customers the option to fast-forward their next subscription charge. Recharge immediately processes the charge so customers don't have to wait.

Add-on products

Your customers can add one-time products and subscriptions by clicking Add a Product in the Subscription page of their portal. Customers can review your product list to add recurring or one-time products to their order. View Customer portal controls to edit your portal settings. 

Preview the Prima theme

You can preview the current Prima theme to see what it will look like on your customer portal without making any changes to your live store.

1. Click Storefront in your merchant portal and select Customer Portal.
2. In the Themes section, click Preview theme under Prima.
3. Use the preview URL to confirm what theme you are using. preview_standard_theme= should equal 4 when previewing Prima.

Enable the Prima theme 

After you preview the Prima theme, you can enable 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 Prima. 
4. Scroll to the bottom and click Save.

Customer portal location

Merchants using the Shopify Checkout Integration or the Recharge Checkout on Shopify can choose between two options for where the customer portal will be hosted:

• Hosted by Recharge - The customer portal is hosted by Recharge and will not inherit any styling or style changes from your store theme.
• Embedded in platform storefront - The customer portal is embedded within your Shopify theme and takes on the styling, logo, and menu from your Shopify theme. 

This is important for your store depending on your theme. The CSS from your Shopify theme can conflict with the customer portal code and switching to hosted will resolve this. If you notice an issue with the CSS styling on your portal, switch to Hosted by Recharge momentarily to see if the issue persists.

Hosted customer portal URL

Updating the portal from embedded to hosted will cause the portal URL to change, and rechargeapps.com will be included in the URL. Merchants on the Recharge Pro Plan using the Hosted by Recharge option, can follow our guide for Setting up a custom customer portal domain if you want to customize this.

Adjust styling with the theme CSS

Update the appearance of the theme using CSS

By default, the Prima theme is standard across all stores and will not match the color and styling of your store out-of-the-box. You can edit the theme's CSS styling manually to create a unified, seamless experience between your store and the customer portal. See Customizing the Prima customer portal theme for more information.

1. Click Storefront in your merchant portal and select Customer Portal.
2. Add your custom code to Header HTML/CSS/JS, Footer HTML/CSS/JS, or Credit card page CSS in the Customize styles section.
3. Scroll to the bottom and click Save.

Adjust the theme translations 

Edit the theme translations to change the text labels that appear throughout the customer portal.

Prima customer portal tour

Watch this video to see how your customers can interact with the Prima customer portal

FAQ

Refer to the Customer portal themes FAQ for common customer portal questions.