VIP Product Widget
Display membership pricing and join options on product pages with the drag-and-drop VIP block
The VIP Product Widget displays member vs. non-member pricing on product pages, letting customers toggle between joining your membership or shopping at regular prices.
Interactive demo - click to toggle options
What You'll Get
Member Pricing Display
Show discounted VIP prices alongside regular prices
One-Click Join
Customers can join membership directly from the product page
Smart Detection
Automatically recognizes active members and shows their savings
3 Template Styles
Choose from button, radio, or toggle switch layouts
How It Works
The widget displays different states based on the customer's membership status:
| Customer State | What They See |
|---|---|
| Not a member | "Shop at Member price" with join option, "Shop with Regular Pricing" alternative |
| VIP in cart | Shows they're getting member pricing, membership product in cart |
| Active member | "You're Shopping at Member Price" with savings displayed |
The widget automatically adds the membership product to cart when customers select the "Join" option and complete their purchase.
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 at the top.
Add the Block
Click Add block and search for "VIP Product Widget" under the Subscribfy section.
Position the Widget
Drag the block to your preferred position - typically below the price or above the Add to Cart button.
Configure Settings
Customize the text, colors, and template style in the block settings panel.
Widget Templates
Simple Button Style
A compact design with the join option as a styled button. Best for minimal themes.
- Shows member price prominently
- Join button with savings badge
- Non-member option below
Radio Button Options (Default)
Two clear options with radio buttons for selection. Recommended for most stores.
- "Shop at Member price" option with benefits list
- "Shop with Regular Pricing" option
- Visual indicator for selected option
Toggle Switch Design
Modern toggle switch between member and regular pricing. Best for contemporary themes.
- Sliding toggle between options
- Clean, minimal interface
- Instant visual feedback
Settings Reference
Join Membership Section
| Setting | Description | Default |
|---|---|---|
| Title | Heading for the join option | "Shop at Member price" |
| You Save label | Text before the discount percentage | "Save" |
| Body | Rich text with membership benefits (supports HTML lists) | Benefits list with perks |
Non-Member Section
| Setting | Description | Default |
|---|---|---|
| Title | Heading for regular price option | "Shop with Regular Pricing" |
Active Member Section
| Setting | Description | Default |
|---|---|---|
| Title | Heading shown to active members | "You're Shopping at Member Price" |
| You Save label | Savings message for members | "You Save" |
| Body | Rich text with member benefits | Benefits reminder |
General Settings
| Setting | Description | Default |
|---|---|---|
| Color for member price | Color used for discounted prices | #000000 |
| Set Default to Join Membership | Pre-select the join option | Enabled |
| Choose Widget Template | Select layout style (1, 2, or 3) | Template 2 |
| Always show widget | Display even if product not eligible for discount | Disabled |
Cart Item Property
| Setting | Description | Default |
|---|---|---|
| Title | Label shown in cart under membership product | "JOINING" |
| Text | Benefits text displayed in cart | "First Month Free..." |
Keep Text Accurate
Ensure the benefits text in the widget matches your actual membership perks configured in Subscribfy Admin.
Discount Eligibility
The widget only appears when a product is eligible for VIP discounts. Eligibility is configured in your Subscribfy Admin:
| Discount Type | Description |
|---|---|
| All Products | Widget appears on every product |
| Specific Collections | Widget only on products in selected collections |
| Specific Products | Widget only on hand-picked products |
Excluding Products
Add the tag NO-VIP-DISCOUNT to any product to hide the widget, regardless of collection settings.
Country Restrictions
If your membership is only available in certain countries, the widget automatically hides for visitors from other regions. Configure allowed countries in your Subscribfy membership settings.
Common Use Cases
Troubleshooting
Related Features
Subscription Block
Add subscribe-and-save options to product pages
VIP Perks Extension
Display VIP perks at checkout
Membership Settings
Configure your membership program
Was this page helpful?