Product Subscription Widget
Add subscribe-and-save options to product pages with customizable delivery frequencies
The Product Subscription Widget lets customers choose between one-time purchase and subscription options directly on product pages, with configurable delivery frequencies and savings display.
Interactive demo - click to toggle options
What You'll Get
One-Time vs. Subscribe
Toggle between single purchase and recurring subscription
Delivery Frequency
Dropdown or tile selector for delivery intervals
Savings Display
Automatic calculation of subscription discounts
Tiered Pricing
Support for introductory offers (e.g., "Save 20% on first 3 orders")
How It Works
The widget reads your Shopify Selling Plans configured through Subscribfy and displays them as purchase options:
| Selection | Behavior |
|---|---|
| One Time | Standard single purchase at regular price |
| Subscribe | Adds product with selected selling plan, applies subscription discount |
When a customer selects Subscribe, the widget shows available delivery frequencies and calculates the savings automatically.
The widget only appears on products that have Subscribfy selling plans configured. Products without selling plans show no widget.
Adding the Widget
Open Theme Customizer
Go to Online Store > Themes > Customize in your Shopify admin.
Navigate to Product Page
Select a product page template from the page dropdown.
Add the Block
Click Add block and search for "Subscription Widget" or "Selling Plan Widget" under the Subscribfy section.
Position the Widget
Drag the block to your preferred position - typically near the Add to Cart button or below variant selectors.
Configure Settings
Customize labels, default selection, and frequency layout in the block settings.
Frequency Layout Options
Select List Style
A compact dropdown menu for choosing delivery frequency. Best for products with many frequency options.
- Clean, minimal UI
- Shows selected frequency with price
- Expands to show all options on click
Visual Tile Buttons
Horizontal tiles for each frequency option. Best for 2-4 frequency choices.
- All options visible at once
- Easy one-click selection
- Shows pricing per tile
Settings Reference
General Settings
| Setting | Description | Default |
|---|---|---|
| Custom Form ID | Form element ID for the widget. Use [section.id] or [product.id] as placeholders | product-form-[section.id] |
| Start with One-Time Selected | Pre-select one-time purchase instead of subscription | Enabled |
| Display Interval Selector | Show the delivery frequency dropdown/tiles | Enabled |
| Delivery Frequency Layout | Choose between "Dropdown" or "Tiles" | Dropdown |
Text Labels
| Setting | Description | Default |
|---|---|---|
| One Time Label | Text for the one-time purchase option | "One Time" |
| Subscribe & Save Label | Text for subscription savings message | "Subscribe and save" |
| Subscription Benefits Text | Rich text showing subscription perks. Use [delivery_frequency] placeholder | "Pause or cancel anytime..." |
Dynamic Text
Use [delivery_frequency] in your benefits text to automatically insert the selected frequency (e.g., "Delivery every 30 days").
Discount Display
The widget automatically displays savings based on your selling plan configuration:
| Discount Type | Display |
|---|---|
| Percentage off | "Subscribe and save 15%" |
| Fixed amount off | "Subscribe and save $5.00" |
| Tiered (intro offer) | "Save 20% on first 3 payments. Then 10% OFF" |
| Intro only | "Save 20% on first 3 payments. Then regular price" |
The savings badge shows the calculated percentage (e.g., "Save 15%") next to the subscription option.
Subscription-Only Products
For products that require a subscription (no one-time purchase allowed):
- Configure the product as subscription-only in Shopify
- The widget automatically hides the "One Time" option
- Subscription is pre-selected by default
The widget respects the product.requires_selling_plan setting from Shopify.
Variant Handling
When a product has multiple variants, the widget:
- Shows selling plans available for the selected variant
- Updates pricing when variant changes
- Hides plans not available for certain variants
- Maintains selection when switching between variants with same plans
Common Use Cases
Troubleshooting
Related Features
VIP Block
Display membership pricing on product pages
Product Subscriptions
Configure subscription selling plans
Custom CSS
Style the widget to match your theme
Was this page helpful?