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