Customize the ReCharge Customer Portal. with the Theme Engine

Size: px

Start display at page:

Download "Customize the ReCharge Customer Portal. with the Theme Engine"

Norah Phelps
5 years ago
Views:

1 Customize the ReCharge Customer Portal with the Theme Engine

2 Table of Contents 01. Why Customize the Customer Portal? Theme Engine at a Glance Example Customizations How to Get Started... 15

time, and depending on the settings a merchant selects, customers can: Edit the delivery address Update credit card

3 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

relationship with the merchant, while freeing up

styling of a merchant s site with no extra work,

4 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

5 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: Building a custom solution using the ReCharge API Building a custom solution using the ReCharge Theme Engine 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-inone subscription management page) the ReCharge Theme Engine is an ideal option and should only require the expertise of a frontend developer. 5

Theme Engine at a Glance With the Theme Engine you can quickly tailor the look

You can also customize the presence and presentation of UI controls that a

Making changes to the theme files is handled by the theme editor, which allows

Using Liquid code, HTML, CSS and JavaScript, you can control every aspect of the

6 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.

7 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,

canceling existing subscriptions, as well as options for viewing their order history, updating

The changes you make can be saved and previewed without publishing them to the live site for

Merchants (or agencies on their behalf) can choose to roll out the Customer Portal changes to

8 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

the Customer Portal and settings changes, you can publish the theme and make it live for the merchant s

9 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

10 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

11 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

12 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 nicelybranded, all-in-one summary page for customers to manage their own subscriptions: 12

13 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

14 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

15 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.

August, HPE Propel Microservices & Jumpstart

August, HPE Propel Microservices & Jumpstart August, 2016 HPE Propel s & Jumpstart Jumpstart Value Quickly build modern web applications Single page application Modular microservices architecture app generator Modularity provides better upgradeability