How to customize the PayWhirl subscription plan selector in Shopify

The PayWhirl Plan Selector lets customers choose between one-time purchase and subscription options on your Shopify product pages.
​

You can customize the Plan Selector directly in the Shopify theme editor using the PayWhirl app block. This makes it easy to match the selector to your brand and improve the customer experience without editing code.
​

With the latest version of the Plan Selector, you can now choose from multiple built-in styles and adjust settings like font size, pricing display, button colors, text colors, and icons.

You can customize the Plan Selector in several ways:

Some styles may automatically inherit parts of your Shopify theme, while others give you more direct control over colors and presentation.

The Plan Selector now includes multiple built-in styles, including:

Each style offers a different layout and visual treatment, so you can choose the one that best fits your storefront design.
​

To customize the Plan Selector:

If you do not see the PayWhirl Plan Selector block, make sure the PayWhirl app block has been added to the product template first.

The Style dropdown controls the overall appearance of the Plan Selector.

This is the fastest way to change the look of the widget. Each style uses a different layout and visual treatment, while most of the remaining settings continue to work across styles.
​

Use this setting when you want to quickly switch between a more classic, modern, compact, or more visually prominent design.

The Font scale setting increases or decreases the size of text inside the Plan Selector.

This is helpful if:

Increase the font scale for readability and emphasis, or reduce it for a tighter layout.

The Show prices setting controls when pricing appears in the Plan Selector.

Options typically include:

This is useful if you want to simplify the selector visually or make pricing more prominent.

The Show per delivery prices setting controls whether the Plan Selector displays the recurring price on a per-delivery basis.
​

For example, this can clarify subscription plan pricing by showing the recurring charge for each delivery.
​

Options typically include:

Use this if you want customers to clearly understand the recurring charge for each shipment or order interval.

When Display selling plans first is enabled, subscription options appear before the one-time purchase option.
​

This can be useful if:

If this setting is off, the one-time purchase option may appear first, depending on the style and configuration.

The new Plan Selector styles support more visual customization, including colors for buttons, labels, icons, and text.
​

The Preset setting controls the overall color preset. You can choose a predefined color combination or select Custom to manually configure individual colors.
​

Use Custom if you want full control over the widget’s appearance.

The Background setting controls the background color of the Plan Selector.

This can be used to:

The Primary button color controls the background styling for the selected or primary action area, depending on the style.
​

This is typically the most visually emphasized button treatment in the widget.

The Primary button label setting controls the text color used inside the primary button area.
​

For best results, choose a color with strong contrast against the primary button background.

The Primary button icon setting controls the color of the icon in the primary button area.
​

If your selected style prominently uses icons, it helps keep them visually aligned with your branding.

The Secondary button color controls the styling for non-primary or alternate option areas.
​

This is useful for distinguishing unselected states from selected states.

The Secondary button label setting controls the text color used in secondary button areas.
​

Use this to improve readability and create a clear contrast between selected and unselected options.

The Secondary button icon setting controls the color of the icon for secondary or alternate option areas.
​

This helps keep icon styling consistent across all purchase options.

The Text setting controls the default text color used throughout the Plan Selector.

This may affect labels, descriptions, pricing text, and supporting copy depending on the selected style.
​

Choose a color that is easy to read against your selected background.

You can also customize the icons used in the Plan Selector.
​

This setting controls the icon shown for the one-time purchase option.
​

Use it to make the non-subscription option more visually clear.

This setting controls the icon shown for the subscription option.
​

Use it to reinforce the recurring nature of the offer and make the subscription choice easier to identify.

If you are unsure, start with a style that best matches your theme, then fine-tune the colors and font scale.

As you make updates in the Shopify theme editor, preview the product page to confirm the selector looks the way you want.
​

When finished:

If your theme is unpublished, you can preview the changes before publishing them live. To see how the updated PayWhirl subscription plan selector widget looks on your product page, click the Preview button in the top-right corner of the customization page. This will open a new window for viewing your product page with the updated widget.

If you want to go beyond the built-in settings, you can further customize the Plan Selector with CSS.
​

For example, advanced customization can be useful if you want to:

If you need help, contact PayWhirl Support, and we can help guide you.

Make sure the PayWhirl app block has been added to a product template, and that you are viewing a product template where the widget is active.
​

Make sure the preview product has active subscription plans configured in PayWhirl.
​

Some styles may use color settings a little differently depending on their layout and emphasis. If needed, try a different style or use custom colors for better control.
​

Be sure to click Save in the Shopify theme editor, and confirm you edited the published theme (or publish the updated theme when ready).

If you need help choosing a style or fine-tuning the Plan Selector design, contact PayWhirl Support. We’re happy to help.

Sincerely,

The PayWhirl Team