All Collections
Shopify Subscription App
Customizing PayWhirl on Shopify
How to use custom CSS with the new customer portal on Shopify
How to use custom CSS with the new customer portal on Shopify

If you've modified your CSS and want to use our new customer portal features, this guide will walk you through the process of migrating.

Ryan P. avatar
Written by Ryan P.
Updated over a week ago

If you're reading this article, it means that you've most likely customized your CSS on PayWhirl, and want to use the latest customer portal features. Not to worry, you can still upgrade, but you'll lose any style customizations made unless you re-apply the customizations.

The new subscription portal for customers uses Shopify's App Embeds, which are located in your theme customization options. We automatically include the necessary theme code, so you don't have to modify your theme with custom CSS.

Instead, you can add custom CSS in the PayWhirl settings directly. You can also select basic colors without the need for custom CSS.

Custom CSS on older versions of PayWhirl for Shopify

If you have an older version of PayWhirl for Shopify, or a theme that doesn't support app embeds, you will likely have extra files prefixed with paywhirl- in your theme. If this is the case and you want to use custom CSS, you'll have to follow the steps below and add your CSS to the snippet file in your theme called paywhirl-customer-portal.css?v=xxx...

You'll need to migrate your custom CSS to the new theme files to upgrade your customer portal. The help of a developer may be required, but you can also reach out to our team for assistance if you'd rather not edit your CSS. We'll do our best to assist with migrating your custom styles.

Migrating your custom CSS to customer portal files

To migrate your custom CSS you'll need to locate your old SCSS file in your theme. The old SCSS file is called paywhirl-customer-portal-theme.scss.css

Once you've located your customized CSS or SCSS within the file, you'll need to copy it to the new CSS snippet file in your theme called paywhirl-customer-portal.css?v=xxx... and make sure it's still applicable. It may need to be modified depending on the customizations you made.

Next, you'll need to update your paywhirl.customer-portal-frame.liquid file in your theme to use the new CSS style sheet after it's been updated with your custom CSS.

Locate the following code in your customer portal frame file:

{% unless stylesheet %}
{% assign stylesheet = "paywhirl-customer-portal-theme.scss.css" %}
{% endunless %}

Modify the code so it looks like this:

{% assign stylesheet = "paywhirl-customer-portal-theme.css" %}

Next, locate the following line towards the bottom of the portal frame file:

return "/a/paywhirl" + page + "?{{ pw_params }}&link_signature={{ pw_signature }}&stylesheet={{ stylesheet }}&domain={{ domain }}&locale={{ locale }}"

Add the URL parameter &use_built_in_stylesheets=1 to the end of the line so it looks like this:

return "/a/paywhirl" + page + "?{{ pw_params }}&link_signature={{ pw_signature }}&stylesheet={{ stylesheet }}&domain={{ domain }}&locale={{ locale }}&use_built_in_stylesheets=1"

New Snippet File Example

Please let us know if you have any questions or need assistance making these changes. We're here to help!

Team PayWhirl

Did this answer your question?