The PayWhirl Plan Selector app block controls how customers choose between a one-time purchase and your subscription options on a Shopify product page. PayWhirl includes seven named styles: Classic, Modern, Sleek, Elevated, Compact, Defined, and Feature.
Changing the style changes the selector’s presentation. It does not change the selling plans, prices, discounts, or billing rules you configured. Your Shopify theme and the block’s font, color, price, and icon settings also affect the finished result.
Note: The images below are representative. Preview each style on your own product template because fonts, colors, plan names, descriptions, and the number of delivery frequencies vary by store.
Choose a style at a glance
Style | Layout | Choose it when |
Classic | Radio-list rows with less emphasis than the card styles | You want the selector to sit quietly inside an existing product page |
Modern | Purchase cards with icons; frequencies listed under the selected option | You want a card layout and can spare the vertical space |
Sleek | Rounded purchase cards with icons and a distinct selected state | You want Modern’s structure with a more finished selected state |
Elevated | Purchase choices and frequency choices on separate raised surfaces | You want the two decisions visually separated rather than stacked |
Compact | Stacked radio-style rows designed for a small vertical footprint | Product-page space is limited, or you offer several frequencies |
Defined | Divided, button-like choices with clearly separated option areas | You want every purchase option to have a strong, defined boundary |
Feature | Large purchase cards above a prominent frequency grid | The subscription offer is the main event on the product page |
Compare the styles
Classic
Classic is the lowest-emphasis style. Because the choices are plain rows rather than cards, the selector reads as part of the product page instead of a separate module. This can work well when the page is already crowded.
Modern
Modern is the entry point to the card layouts. Icons label the one-time and subscription choices, and the delivery frequencies appear below the subscription option once it is selected. Expect it to take more vertical space than Classic or Compact.
Sleek
Sleek keeps the same card-and-icon structure as Modern, with rounded cards and a more distinct selected state.
Elevated
Elevated puts the purchase choices and delivery frequencies on separate raised surfaces. That split makes the selector read as two steps—choose a purchase option, then choose a frequency—which can help when customers need extra clarity at the frequency choice.
Compact
Compact trades card framing for height. Try it when the selector needs to fit above the fold or when a long list of frequencies would otherwise push the add-to-cart button down the page.
Defined
Defined gives each choice a visible border and clearly separates the available options. Use it when you want the selector to feel structured and make the selected and unselected states easy to distinguish.
Feature
Feature is the largest layout, with full-size purchase cards above a prominent delivery-frequency grid. It claims a significant share of the product page, so use it when the subscription is the main offer rather than one option beside a one-time purchase.
Change the Plan Selector style
In Shopify, go to Online Store → Themes.
Select Customize for the theme you want to edit.
Open a product template used by a product with an active subscription plan.
Select the PayWhirl Plan Selector app block.
Under Style, choose the option you want to preview.
Review the font, price, color, icon, and style-specific settings. Confirm that the selector still reads clearly beside the product title and add-to-cart button.
Select Save when you are satisfied with the preview.
Settings to review after changing styles
Font scale: Plan names should not compete with the product title. If the selector’s text looks larger or smaller than the rest of the page, adjust the scale in the Plan Selector settings rather than in the theme.
Prices: Per-delivery prices can make a subscription easier to compare with the one-time price, while hiding them shortens the selector. Choose one approach and apply it consistently across your products.
Purchase-option order: Display selling plans first controls whether subscription choices appear before the one-time purchase option. It does not reorder individual selling plans.
Colors: Try a preset first. If you set the background, primary, secondary, label, icon, text, and badge colors individually, check both selected and unselected states so an unselected option does not appear disabled.
Icons: Card styles show the one-time and subscription icons more prominently than row styles. Recheck your icon choice whenever you switch between the two.
Descriptions and badges: Long plan names, savings text, and badges are common causes of layout problems. Test your longest plan name rather than a typical one.
Styles differ in how much they inherit from the Shopify theme and how much they take from the Plan Selector block’s settings. If the preview does not match what you selected, change one setting at a time and watch the preview. If nothing changes, that value may be coming from the Shopify theme.
Preview and test your changes
Before publishing your theme, preview the selector on a product with an active subscription plan. Confirm that:
The product and its variants are included in the correct selling plan.
The product uses the template you edited.
The PayWhirl Plan Selector app block appears on the template.
The one-time purchase and subscription options display the correct prices.
Each delivery frequency displays the expected price.
A subscription added to the cart shows the correct delivery frequency.
The selector is easy to read and use on both desktop and mobile.
We recommend testing these changes in an unpublished theme before making them visible to customers.
Troubleshoot display issues
If the selector is missing or your changes do not appear, first confirm that you are previewing the correct product, product template, and theme. Also make sure the PayWhirl Plan Selector app block is included on that template.
If the selector appears but its spacing or alignment looks incorrect, the product-page layout inherited from your Shopify theme may be affecting it. Try another built-in style or adjust the Plan Selector block’s settings one at a time.
Modern Shopify themes should use the PayWhirl app block. Do not add or replace Liquid snippets unless PayWhirl Support has confirmed that your store requires the legacy installation method.
If you are having trouble getting the look or style you want, please reach out to our team for a theme specialist to review.
Team PayWhirl