How to add custom code to your Affinity customer portal
Use custom code to tailor the customer portal experience to match your brand, extend functionality, and better support your customers’ subscription needs. You can add custom JavaScript, CSS, or HTML to the embedded Recharge Customer Portal by safely hosting and rendering your code within your Shopify theme.
This guide explains how you can add custom code to your customer portal.
- Shopify Checkout Integration
- Migrated Shopify Checkout Integration
Before you start
- This guide only applies if you use the embedded customer portal. Recharge recommends switching to the embedded version in order to apply custom code. If you use the hosted version and switching is not an option, contact Recharge Support.
- This guide does not apply to the Unity customer portal theme, as the Unity portal lives directly inside Shopify.
- Custom coding is not supported by Recharge as per our Recharge design and integration policy.
How it works
For the embedded customer portal, all custom code lives inside your Shopify theme. This ties your changes to a specific theme and allows you to use Shopify’s built-in versioning.
You can either:
Add custom code directly to your live (published) theme, or
Apply it to an unpublished theme while you work on a new version of your storefront
Step 1 - Create a snippet to host your custom code
Create a dedicated Shopify snippet to safely store and manage any custom JavaScript, CSS, or HTML you want to load in the embedded customer portal.
- In your Shopify admin, go to Online Store and select Themes.
- Click on the actions menu (...) and select Edit code to open the code editor.
- In the file tree, locate the Snippets folder and click Add a new snippet.
- Name the snippet:
recharge-custom-code.liquid.
Use this snippet to add any custom JavaScript, CSS, or HTML to the embedded customer portal.
Step 2 - Configure the snippet to only render on customer portal pages
To prevent your custom code from affecting the rest of your storefront, load the snippet only on customer portal pages.
- Open the Layout folder in the code editor and select
theme.liquid. - Locate the opening
<body>tag. - Add the following on the line immediately after the
<body>tag and Save your changes:
{% if request.path contains "/tools/recurring" %}
{% render 'recharge-custom-code' %}
{% endif %}This ensures your changes apply only to the customer portal and do not affect the rest of your storefront.
Step 3 - Add your custom code to the snippet
After creating the snippet, add the custom code you want to load in the embedded customer portal.
In the Snippets folder, open
recharge-custom-code.liquidAdd your custom JavaScript, CSS, or HTML
Save your changes
Any code added to this snippet will load only on customer portal pages when rendered in your theme.
Step 4 - View your changes
Changes to your live theme appear immediately. Log in to your test account and access your customer portal to view these changes.
If you edited an unpublished theme, preview your changes before publishing:
Click Preview on the theme in Shopify
Open the customer portal from the previewed theme
Confirm your changes appear and behave as expected
This lets you verify everything before making the theme live.
