Customize the ReCharge Customer Portalwith the Theme Engine

Table of Contents

01. Why Customize the Customer Portal?........

02. Theme Engine at a Glance..........................................

03. Example Customizations...........................................

04. How to Get Started.............................................................

3

6

10

15

Why Customize the Customer Portal?

The ReCharge Customer Portal enables a Shopify

merchant’s subscription customers to sign in to their

account at any time, and depending on the settings a

merchant selects, customers can:

● Edit the delivery address

● Update credit card payment details

● Swap subscription products

● Skip a delivery

● Cancel a subscription

with no intervention on the merchant’s part. The

following Customer Portal settings are available to

merchants by default:

3

The Customer Portal is ideal for empowering a

merchant’s customers to self manage their relationship

with the merchant, while freeing up the Shopify

entrepreneur’s time to focus on growing their business.

The default Customer Portal generally inherits the

styling of a merchant’s site with no extra work, but you

can also customize the look and feel of the Customer

Portal using our styling feature:

4

This option addresses about 90% of the customization

questions we receive from merchants.

However, for Shopify store owners with budget and

a strong need for customizing the default Customer

Portal beyond styling, there are additional options:

Both options require skilled developers and a solid

understanding of the ReCharge data structure, but a

custom API build will require expertise on the frontend

and the backend—as well as some infrastructure.

If a merchant needs to change the structure of the

default Customer Portal pages (e.g., creating an all-in-

one subscription management page) the ReCharge

Theme Engine is an ideal option—and should only

require the expertise of a frontend developer.

Building a custom solution using the ReCharge API

Building a custom solution using the ReCharge Theme Engine

5

Theme Engine at a Glance

With the Theme Engine you can quickly tailor the

look and feel of the Customer Portal to fit any Shopify

store’s style and branding. You can also customize

the presence and presentation of UI controls that a

merchant’s customers are able to access.

Making changes to the theme files is handled by the

theme editor, which allows you to tweak or completely

rebuild the Portal. Using Liquid code, HTML, CSS

and JavaScript, you can control every aspect of the

customer experience.

The theme editor displays the theme files and presents

you with a code window and additional controls,

depending on template file selected:

6

While the code window doesn’t replace a full-featured

IDE, it’s an excellent proxy, especially for someone

who’s familiar with the Shopify code editor.

The code window features:

● Syntax highlighting

● Code folding

● Tag and bracket matching

● Active-line highlighting

● Searching (CTRL+F / CMD+F)

● CTRL+S / CMD+S to save

● Liquid validation on save

With the theme editor, you can manage multiple

themes, quickly switch between them, build your own,

or edit an existing one.

By default, a merchant’s store comes with a pre-built

theme:

7

The default theme includes a standard assortment of

options that will meet most customer needs, including

pre-built pages for reviewing and managing their

subscribed products, adding new or canceling existing

subscriptions, as well as options for viewing their

order history, updating address and payment info, and

changing their order/delivery schedule.

The changes you make can be saved and previewed

without publishing them to the live site for all

customers.

Merchants (or agencies on their behalf) can choose to

roll out the Customer Portal changes to subscription

customers in a controlled manner.

To deploy the custom theme, visit Settings > Customer

portal in the ReCharge admin menu and choose

“Storefront - Theme Editor” as the Customer Portal

location:

8

Upon selecting that option, the Deployment interface

will appear, allowing you to specify what percentage of

the merchant’s new and existing customers will see the

customized Portal:

When you’re completely satisfied with the Customer

Portal and settings changes, you can publish the

theme and make it live for the merchant’s customers:

What follows are some recent examples of Customer

Portal customizations made using the ReCharge

Theme Engine.

9

Example Customizations

The out-of-the-box, unaltered Customer Portal looks

like this:

Subscription Overview

This is where customers can find their subscriptions

details, and in this case, edit their subscription product,

swap products, or cancel their subscription altogether.

10

Delivery Schedule

Customers can see their upcoming deliveries and

choose to skip a specific month.

Billing Information

Customers are able to make changes to their payment

and billing details on this screen.

11

All of the above screens can be branded, modified—

and even combined—using the Theme Engine.

The team at Asset Drop recruited the help of

a ReCharge agency partner to customize the

subscription overview screen. It provides a nicely-

branded, all-in-one summary page for customers to

manage their own subscriptions:

12

LovePop also enlisted the help of a development

agency to brand and modify the subscription overview

screen (aesthetically and functionally) to better suit

their business and their customers:

LOLA sells feminine hygiene products on subscription,

and their agency used the Theme Engine to apply

LOLA’s branding to the default Customer Portal:

13

LOLA’s agency also developed a robust edit

subscription screen for customers, who now have the

ability not only to update their shipping address and

payment details, but also to modify their preferred

delivery frequency and product SKU—all on a single

screen:

14

How to Get Started

It’s simple! From a merchant’s ReCharge admin menu,

go to:

Settings > Theme engine

For additional help, visit our Theme Engine

documentation here.