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.
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 | | Controls the "About subscriptions" info pop-up | Hide the pop-up: |
Purchase options label | | Controls the "Purchase options" text at the top | Adjust the font size: |
Widget | | Controls the entire widget | Adjust the font family: |
Compare at price and regular price | | Controls the compare at price and regular price shown in the widget | Adjust the color: |
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-weight: |
Widget container | | Controls the widget container | Adjust the border: |
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:
/* 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 | | Controls the entire widget | Add a border around the widget: |
Purchase options label | | Controls the "Purchase options" text at the top | Hide the text: |
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: |
Plans dropdown | | Controls the dropdown and the display of the options | Adjust the border of the dropdown: |
Plans label | | Controls the text next to the dropdown | Adjust the font weight and color: |
Plan description | | Controls the plan description | Adjust the line spacing: |
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:
/* 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 assistance, please do not hesitate to reach out to our support team.
Please let us know if you have any questions. We're happy to help!
The PayWhirl Team