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

.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

.paywhirl-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:

/* 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

.paywhirl-plan-selector-group

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:

/* 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

Did this answer your question?