If you're familiar with CSS you can customize the style of your widgets directly from your theme in Shopify. Below are some examples of how you can customize specific parts of the widget to fit your needs. We're here to help if you have any questions or need assistance!
App Blocks (the latest version of our widget):
If you're using a theme that supports app blocks (Shopify 2.0 themes or newer) you can use the following selectors to adjust your styling as needed.
Name | Class | Description | Example |
About subscriptions | .paywhirl-info-popup
| Controls the "About subscriptions" info pop-up | Hide the pop-up: display: none !important;
|
Purchase options label | .paywhirl-plan-selector .paywhirl-plan-selector-header | Controls the "Purchase options" text at the top | Adjust the font size: font-size: 30px !important;
|
Widget | .paywhirl-plan-selector
| Controls the entire widget | Adjust the font family: font-family: cursive !important;
|
Compare at price and regular price | .paywhirl-compare-at-price
| Controls the compare at price and regular price shown in the widget | Adjust the color: color: red !important;
|
One time purchase option and selling plan group text | .paywhirl-label
| Controls the text for the one-time purchase option and selling plan group(s) text | Adjust the font-weight: font-weight: bold !important;
|
Widget container | .paywhirl-plan-selector-group-container
| Controls the widget container | Adjust the border: border: none !important;
|
In order to implement CSS changes in your theme, find the base.css, main.css, or theme.css file in your theme code editor.
Example: modern theme icons
To customize the individual subscription plan group icon(s), please upload your image using Shopify admin -> Content -> Files section (make sure the image dimensions are manageable). After uploading the image you can find a link to the file on the files listing page.
To find the individual plan selector group ID, using developer tools web inspector on the product page, search for .paywhirl-plan-selector-group div. After tracking the right one, copy its ID. It will be in the format of #paywhirl-plan-selector-group-<ID>.
/* PayWhirl Custom Styling */
#paywhirl-plan-selector-group-<replace with your ID> .paywhirl-plan-selector-icon svg {
display: none
}
#paywhirl-plan-selector-group-<replace with your ID> .paywhirl-plan-selector-icon {
background: url(<Replace with URL to your image>) center no-repeat;
}
/* PayWhirl Custom Styling */
Example: classic theme formatting
/* PayWhirl Custom Styling */
.paywhirl-info-popup {
display: none !important;
}
.paywhirl-plan-selector .paywhirl-plan-selector-header {
font-size: 30px !important;
}
.paywhirl-plan-selector {
font-family: cursive !important;
}
.paywhirl-price {
color: red !important;
}
.paywhirl-label {
font-weight: bold !important;
}
.paywhirl-plan-selector-group-container {
border: none !important;
}
/* PayWhirl Custom Styling */
Result:
If you'd like to hide the PayWhirl logo/branding, you can add the following CSS code to your theme to remove it from the about subscriptions popup.
.paywhirl-info-popup-powered-by { display: none; }
Legacy Theme Snippets:
If you're using an older theme that does NOT support app blocks you can use the following selectors to adjust your styling as needed.
Name | Class | Description | Example |
Widget container | .paywhirl-plan-selector | Controls the entire widget | Add a border around the widget: border: 0.5px solid black !important;
|
Purchase options label | .paywhirl-plan-selector>legend | Controls the "Purchase options" text at the top | Hide the text: display: none !important;
|
One time purchase option and selling plan group text |
| Controls the text for the one-time purchase option and selling plan group(s) text | Adjust the font family: font-family: cursive !important;
|
Plans dropdown | .paywhirl-plan-selector-plan>select | Controls the dropdown and the display of the options | Adjust the border of the dropdown: border: 2px solid red !important;
|
Plans label | .paywhirl-plan-selector-plan>label | Controls the text next to the dropdown | Adjust the font weight and color: font-weight: bold !important; color: purple !important;
|
Plan description | .paywhirl-plan-selector-description | Controls the plan description | Adjust the line spacing: line-height: 3em !important; |
In order to implement CSS changes in your theme, find the base.css, main.css, or theme.css file in your theme code editor.
Example: legacy theme formatting
/* PayWhirl Custom Styling */
.paywhirl-plan-selector {
border: 0.5px solid black !important;
}
.paywhirl-plan-selector>legend {
display: none !important;
}
.paywhirl-plan-selector-group {
font-family: cursive !important;
}
.paywhirl-plan-selector-plan>select {
border: 2px solid red !important;
}
.paywhirl-plan-selector-plan>label {
font-weight: bold !important;
color: purple;
}
.paywhirl-plan-selector-description {
line-height: 3em !important;
}
/* PayWhirl Custom Styling */
Result:
These are just some basic examples of the changes that can be made to our widgets. If you need any help, please do not hesitate to contact our support team.
Please let us know if you have any questions. We're happy to help!
The PayWhirl Team