How to Customize the Subscription Widget

The subZwallet subscription widget lives inside your Shopify theme's product page. You customize it entirely through the Shopify theme editor (the Customize button in your theme settings). No code is needed. Every change previews live so you can see exactly how it looks before saving.

Widget styles: 8 built-in designs

The widget ships with eight visual styles. Each one changes borders, shadows, spacing, and overall feel. Pick the one that matches your brand.

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.

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.

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.
Border thickness: Set the border width in pixels. Use 0 for no border.
Corner roundness: Set the border radius. Use 0 for sharp corners.
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.

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.

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).

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.
Preview your changes live in the editor.
Click Save when you are happy with the result.

See Subscription plans for setting up the plans that power the widget, Rewards for configuring milestone rewards, and Cashback wallet for the cashback program shown in the rewards section.