Get in Touch

Shopify Plus Subscriptions: How to use the ReCharge Theme Engine

If you are a merchant on the Shopify Plus platform there is a strong probability that subscriptions are a component of your business. We find that ~40% of the companies we support on Shopify Plus have subscriptions built into their operation and most of them are using the ReCharge app from the Shopify app store. You can find ReCharge in the app store and it is one of a handful of subscription apps: Bold Recurring Orders, Pay Whirl Recurring Payments, Spur IT Recurring Orders to name a few. Ambaum is a certified ReCharge App Partner and a Shopify Plus Partner, we have worked with many of the different subscription options and recommend Recharge to our clients for it’s ease of use, flexibility, APIs and Theme Engine which comes with the ReCharge Pro Plan.

How Recharge Works

When you setup ReCharge with Shopify Plus, you need to think about your sales funnel: home page – collection page – product detail page – cart – checkout and where along that path you give customers the option to subscribe to your products. The most common implementation is integrating subscriptions as a purchase option directly into your product detail page. We provide development support to Bulletproof Coffee and have helped them with their ReCharge implementation, here is an example of how they integrate ReCharge into their product detail page.

You can see that the subscription option is right next to the one time purchase, you may want to A/B test locating subscriptions above the one time purchase as the default option.

Checkout Process

It is important to know that when you use ReCharge and a customer moves from the cart to the checkout page that the transaction will be handled outside Shopify. If you are using Shopify Payments for your store and you sign up with Recharge you will end using another payment processor (most end up using Stripe which is what powers Shopify Payments). Recharge has mirrored the look and feel of the Shopify checkout page so from the customer’s standpoint it will be a seamless experience, but if you look closely at the image below, you can see that the URL has changed to checkout.rechargeapps.com from your primary URL.

Shopify Reunite 2020 just happened and they announced the following: “In working on subscriptions, we’re working on making the checkout process more extensible and customizable, allowing apps to integrate more easily into the checkout workflow.” We expect that in the future the checkout process for subscriptions will be more tightly integrated into Shopify’s overall process, but the launch for this is still TBD.

ReCharge Professional Plan & Theme Engine

ReCharge offers a professional plan for companies that want to fully update the customer portal using ReCharge APIs. When you upgrade to the professional plan you get access to ReCharge Theme Engine so you can make updates to the portal directly in the source code.

The professional plan is $300/month + (1% + $.19) per transaction, here is what you get with Pro:

  • Theme Engine V2
  • One-Time Products(included in Theme Engine)
  • Developer Support in Slack (API & Theme Engine Channels)
  • Custom Domain so you can own the checkout URL
  • Enhanced Analytics
  • Avalara (Pro Integration)
  • Octane AI (Pro Integration)

Here is more information on how to update your ReCharge Customer Portal:

Theme Engine allows you to fully optimize the customer portal to manage accounts and setup one-time product purchases for customers that already have a subscription. If your business is doing close to $100K/month in subscription revenue you should strongly consider upgrading to the Recharge professional plan.

Manage Subscriptions (Standard Portal)

Manage Subscriptions (After Theme Engine Implementation)

You can see from this example that with Theme Engine you can make substantial changes to your ReCharge customer portal, further empower your brand and tailor to the needs of your target audience. For example, this version drastically reduces the number of clicks by allowing your customers to customize every aspect of their subscription in one page, whereas the Standard Portal will take them to different pages to perform certain actions. This is a critical area because small tweaks like this to your customer portal can lead to significant increases in your conversation rates.

Adding a one-time product

Allowing customers to add one-time products is a no brainer to increase your average revenue per user. This is a major benefit of upgrading to the ReCharge professional plan and is one of the primary reasons Ambaum gets involved in these customizations.

Things to Consider Prior to Customizing Theme Engine

This section is going to get into the details of how we approach a theme engine build, read on if you want to get “under the hood” of one of our projects.

  1. Create a test customer account
  2. Create ReCharge subscription products
  3. Enable the one-time products setting

Theme Engine Development Best Practices

When you are editing the ReCharge Theme engine code, here are some best practices that have helped us with our projects:

  1. Do not edit the Base Theme directly. Theme Engine comes with a Base Theme that ReCharge provided with, this theme is considered stable and should be used as a fall back or for reference.
  2. Avoid editing the live them, all work should be done via a development theme. It is best to duplicate the Base Theme and edit it to match your brand and the functionality you require.
  3. Understand that theme engine is not the same ReCharge API, refer to Theme Engine doc to understand what’s doable. ReCharge tech support is also available via Slack and are very responsive.
  4. Preview customer portals using test customer account, by default, customer portal opens a preview using an existing customer account, this makes testing hard.

To preview a specific customer account, follow these steps:

  1. Preview a theme in Theme Engine
  2. Recharge > Customers
  3. Find and select customer (pic 1)
  4. Mouse over the link icon next to customer name on top (pic 2)
  5. Copy the hash in the URL after ?token=, i.e. https://DOMAIN.com/tools/recurring/portal/428203138365f76f0e58e704/subscriptions?token=6a9d96ce8f2b40139f36cea6a9c2bb80
  6. Replace the token value in the preview URL with this value

Version control is highly recommended

  • It is best to have version control to keep track of changes made to the customer portal. Although inconvenient, a theme can be downloaded from the dashboard and push to a repository.
  • Alternatively, you can duplicate and name theme with appropriate work being done.

Maintain brand consistency

Here are list of things of things to keep in mind style wise when customizing the Customer Portal:

  • Typography – color, font size, font family for headings, and texts
  • Form fields like text input, radio button, select, quantity adjust
  • Buttons & CTA
  • Spacing

We hope this post gives you a clear understanding of the benefits of ReCharge and Theme Engine, for growing Shopify Plus brands this is a must!

Posted in All

Leave a Reply

Your email address will not be published. Required fields are marked *