How to Customize the Customer Wallet Widget
Your customers need a single place to check their cashback balance, browse ways to earn, redeem rewards, and manage subscriptions. The customer wallet widget puts all of that into one branded block on your storefront, configured entirely through the Shopify theme editor.
This guide covers placement, design theme selection, color configuration, and section toggles. Setup takes under five minutes and requires no code.
How the wallet widget works
The customer wallet widget is a Shopify theme app extension. It renders as an app block inside your theme, which means it inherits your store layout and can be repositioned through the theme editor like any other block. Under the hood, Shopify customer account extensions handle authentication and session context so the widget can pull live data for each logged-in shopper (https://shopify.dev/docs/apps/build/customer-accounts).
The widget loads asynchronously. It does not block your page render or affect Core Web Vitals scores. It works with any Online Store 2.0 theme that supports app blocks (https://shopify.dev/docs/apps/build/online-store/theme-app-extensions).
What the wallet widget shows
The wallet widget has six toggleable sections. Turn on only what your program uses, or show everything for a full self-service hub.
- Cashback balance: Available store credit from cashback rewards. Customers see exactly how much they can spend at checkout.
- Loyalty points: Current points balance and tier status when customer tiers are enabled.
- Active rewards: Earned but unredeemed rewards, including milestone discounts and referral bonuses.
- Ways to earn: Actions the customer can take to earn more points or cashback, such as placing an order, referring a friend, or reaching a spending milestone.
- Ways to redeem: Available redemption options like discounts, free shipping, or free products the customer can claim with their points.
- Manage subscriptions: Active subscription details with options to skip, pause, resume, swap products, or update payment and shipping information.
Choosing a design theme
The widget ships with seven visual themes that match the subscribe widget styles. Pick the theme closest to your store aesthetic, then fine-tune with custom colors.
- Neubrutalism: Bold borders, hard shadows, high contrast. Fits streetwear, DTC, and Gen-Z brands.
- Neumorphic: Soft shadows, subtle depth, pushed and pulled surfaces. Suits clean beauty, wellness, and minimalist brands.
- Minimal: Clean lines, subtle borders, muted palette. Works for premium skincare, wellness, and tech products.
- Glass: Transparent and frosted effects, modern feel. Strong choice for tech and contemporary brands.
- Skeuomorphic: Realistic depth, gradients, tactile elements. Complements luxury, premium food, and artisan products.
- Neon: Bright accents, glowing effects, high energy. Matches fitness, supplements, and youth-focused brands.
- Rose: Warm pink tones, soft edges, elegant feel. Designed for beauty, fashion, and lifestyle brands.
If you also use the subscribe widget, pick the same theme for both so your storefront feels consistent across subscription signup and account management.
Color customization
After choosing a design theme, you can override colors with your own palette or pick from pre-built color schemes. Four color channels are available: accent (buttons, highlights), background, text, and border. Changes apply across every section of the wallet widget, keeping the look consistent without per-section tweaking.
Step-by-step setup
- Go to Online Store > Themes > Customize.
- Use the page selector at the top to navigate to the customer account page (or any template where you want the wallet).
- Click Add block (inside an existing section) or Add section and select the subZwallet Customer Wallet app block.
- Click the block to open the settings panel on the left.
- Choose your design theme from the 7 built-in styles.
- Pick a color palette or set custom colors for accent, background, text, and borders.
- Toggle sections on or off: cashback balance, points, rewards, ways to earn, ways to redeem, manage subscriptions.
- Preview your changes live in the editor, then click Save.
Where to place the wallet widget
The most common placement is the customer account page. Customers log in and immediately see their balances, rewards, and subscription controls. Other effective placements include a dedicated rewards or loyalty page linked from your navigation, or a post-purchase landing page that reminds customers of their earnings.
You can add the widget to multiple pages. It will display the same live data everywhere, so there is no risk of conflicting information.
How customers interact with the wallet
Logged-in customers can browse their balances, claim rewards, and manage subscriptions directly from the widget. All actions happen inline without a page redirect. If a customer is not logged in, the widget shows a sign-in prompt. After authentication, it loads their personalized data automatically.
Next steps
For a full overview of customer wallet capabilities, see the customer wallet feature page (/shopify-customer-wallet). To customize the subscribe widget with the same design theme, see Widget customization. To configure the cashback program that feeds the wallet balance, see Cashback wallet. For milestone and referral rewards, see Rewards. For loyalty points setup, see Points program.