How to Customize the Subscription Widget

Your subscription widget is the single UI element that converts a browser into a subscriber. How it looks, where it sits, and what information it surfaces directly affects subscription opt-in rates. subZwallet gives you full visual control over that widget through the Shopify theme editor, with zero code changes. For a full overview of widget capabilities, see the subscription widget features page (/shopify-subscription-widget).

The widget is built as a Shopify app block using theme app extensions (https://shopify.dev/docs/apps/build/online-store/theme-app-extensions). That means it lives natively inside your theme, inherits your font stack, and can be repositioned by dragging it in the editor. Shopify's subscription UX guidelines recommend visible savings hierarchy and radio buttons for four or fewer options (https://shopify.dev/docs/storefronts/themes/pricing-payments/subscriptions/subscription-ux-guidelines), and the subZwallet widget follows those patterns by default.

Choose your style: 8 built-in designs

Each style changes borders, shadows, spacing, and overall feel. Picking the right one is not just aesthetic: the wrong style creates visual friction with your existing brand, which undercuts trust at the moment of purchase. Use the table below to match your store type to a recommended starting style.

Style decision framework

Neubrutalism: Bold borders, hard shadows, high contrast. Best for brands with a playful, edgy aesthetic. Think streetwear, bold DTC brands, and Gen-Z focused stores.
Minimal: Clean lines, subtle borders, muted colors. Best for premium brands, skincare, wellness, and tech products. Lets the product speak for itself.
Clay: Warm tones, soft rounded shapes, earthy feel. Best for organic products, food brands, home goods, and natural skincare.
Glass: Transparent and frosted effects, light borders, modern feel. Best for tech products, modern brands, and SaaS-adjacent stores.
Neon: Bright accent colors, glowing effects, high energy. Best for fitness, supplements, youth-focused brands, and energy products.
Skeuomorphic: Realistic depth, gradients, tactile feel. Best for luxury brands, premium food, and artisan products.
Neumorphic: Soft shadows, pushed and pulled surfaces, subtle depth. Best for clean beauty, minimalist brands, and wellness.
Classic: Standard bordered widget with a familiar Shopify feel. Best for stores that want something proven and professional. Works everywhere.

If you are unsure, start with Classic or Minimal. Both are intentionally neutral and work across categories. You can switch styles at any time without losing your color or layout settings.

Color scheme

Choose from pre-built color palettes (Indigo, Rose, Emerald, Amber, and more) or set fully custom colors. The palette you select applies to whichever style you have active. Switching palettes updates accent colors, backgrounds, and text tones across the entire widget.

Tip: match your widget accent color to your primary brand color. Subscription opt-in is a high-commitment action and visual consistency with the rest of your page reduces hesitation.

Layout options

Layout controls how the subscription options are arranged inside the widget. You can fine-tune spacing and sizing to match your product page.

Widget layout: Cards, Stacked, Inline, or Dropdown. Each arranges the one-time and subscription options differently. Cards work best when you have 2-3 options. Dropdown is better for 4+ frequencies.
Border thickness: Set the border width in pixels. Use 0 for no border.
Corner roundness: Set the border radius. Use 0 for sharp corners, 8-12px for soft, 20px+ for pill shapes.
Inner padding: Controls the space between the widget content and its edges.
Price position: Right side, Below, or Hidden. Determines where the price appears relative to the option label.
Base font size: Sets the root font size for all text inside the widget. The widget inherits your theme's font family automatically.

Mobile vs. desktop considerations

The widget is responsive by default, but the theme editor lets you preview both viewports before saving. Here is what to check on each.

Desktop: Cards and Inline layouts display side-by-side. Savings badges sit inline with the option label. You have more horizontal space, so wider padding values (16-24px) look balanced.
Mobile (under 480px): Cards and Stacked layouts auto-stack vertically. Touch targets expand to at least 44px to meet accessibility standards. Savings badges wrap below the label if space is tight. Use tighter padding (8-12px) to avoid the widget pushing the Add to Cart button below the fold.
Always check: does the full widget, including the policy text line, remain visible without scrolling on your most common mobile device width? If the widget pushes key content out of view, switch from Cards to Stacked or Dropdown to reduce vertical height.

Savings badge

The savings badge highlights the discount customers get by subscribing. It auto-calculates the percentage from your subscription discount and displays it as a badge (e.g. "SAVE 5%").

Toggle the badge on or off.
Badge style: Outline or Solid.
The percentage is calculated automatically from the discount you set on your subscription plan.

Rewards integration

Show customers what they earn by subscribing versus buying once. The rewards section appears inside the widget and pulls from your rewards configuration.

Show subscription rewards: Toggle the rewards section on or off.
Rewards section title: Customize the heading (e.g. "Subscribe & earn rewards").
Cashback perk text: Describe the cashback benefit. Use [value] as a placeholder for the actual cashback amount.
Rewards perk text: Describe the rewards benefit customers earn with a subscription.
One-time points text: Describe the points a customer earns from a single purchase. Use this to contrast against the subscription benefits.

Policy text

Add a short policy line below the widget to set expectations (e.g. "Auto-renews. Skip or cancel anytime."). You can also add a link to your full subscription terms. This is not optional flair: Shopify's subscription UX guidelines explicitly recommend surfacing cancellation and skip policies at the point of purchase (https://shopify.dev/docs/storefronts/themes/pricing-payments/subscriptions/subscription-ux-guidelines).

Policy text: The line shown below the widget (e.g. "Auto-renews. Skip or cancel anytime.").
Policy link text: The clickable text for your terms link (e.g. "Subscription policy").
Policy link URL: The URL the link points to (e.g. your subscription terms page).

Configuration checklist for launch

Before publishing your customized widget, walk through this checklist. Each item takes under a minute to verify but prevents the most common post-launch complaints.

Style selected: You have chosen a style that matches your store's visual language. If unsure, Classic or Minimal are safe defaults.
Color scheme set: Your widget accent color matches or complements your primary brand color. Text is readable on the background.
Layout tested: You have previewed Cards, Stacked, and Dropdown to confirm which layout fits your product page without pushing the Add to Cart button below the fold.
Savings badge enabled: If you offer a subscription discount, the badge is toggled on and the calculated percentage looks correct.
Rewards section configured: If you use cashback or points, the rewards section is on and the perk text uses [value] placeholders correctly.
Policy text added: A short cancellation/skip policy line is visible below the widget, with a link to your full terms if you have one.
Mobile preview checked: You have toggled to mobile view in the theme editor and confirmed the widget, badge, rewards, and policy text all render correctly without excessive scrolling.
Desktop preview checked: You have confirmed the layout looks balanced at full width.
Saved: You have clicked Save in the theme editor. Changes do not apply until saved.

Step-by-step setup

Go to Online Store > Themes > Customize.
Navigate to any product page using the page selector at the top.
Find the subZwallet widget block in the product section. If it is not there, click Add block and select the subZwallet widget app block.
Click the block to open the customization panel on the left.
Choose your style from the 8 built-in designs.
Pick a color scheme or set custom colors.
Adjust layout options: widget layout, border thickness, corner roundness, padding, price position, and font size.
Toggle the savings badge on or off and choose outline or solid style.
Configure rewards integration if you want to show subscription perks.
Set your policy text and link.
Toggle between desktop and mobile preview to verify both viewports.
Run through the configuration checklist above.
Click Save when you are satisfied with the result.

See Subscription plans for setting up the plans that power the widget, Customer wallet widget for the customer-facing account portal, and Getting started for initial app setup.