Your loyalty widget is the most visible part of your rewards program. It sits on every page of your store, greeting returning customers with their XP progress and available rewards. If it clashes with your brand, it looks like an afterthought. If it blends seamlessly, it looks like a premium feature you built yourself.
Brand consistency drives trust, and trust drives conversions. Stores with strong brand personalization see up to 23% higher conversion rates. Your loyalty widget is not exempt from this principle -- it needs to look and feel like part of your store, not a third-party bolt-on.
LevelUp Loyalty ships with 8 carefully designed color themes, each crafted to complement a different storefront aesthetic. In this guide, we will walk through every theme, show you which store types each one works best for, and explain how to choose the right one -- or let AI choose for you.
Why Widget Design Matters More Than You Think
Before we dive into the themes, let us talk about why this matters commercially. A loyalty widget is not just a UI element. It is a conversion touchpoint that your customers interact with on every visit.
The LevelUp Loyalty widget includes:
- Floating Action Button (FAB): A persistent button in the corner of your storefront with an XP badge showing the customer's current points
- Popup panel: An expandable panel with a progress bar, level indicator, and three tabs
- Activity tab: Recent XP transactions and events
- Rewards tab: Available discount codes and perks for the current level
- Roadmap tab: Visual progression showing upcoming levels and their rewards
Every one of these elements uses your chosen color theme. When the colors match your store, the widget feels native. When they do not, it creates visual friction that undermines the premium feel you have worked to build.
The 8 Themes: A Complete Guide
Each theme below has been tested across dozens of Shopify store designs. We will cover the color palette, the mood it creates, and the store types it works best with.
1. Purple
| Primary tone | Rich violet with warm undertones |
| Mood | Premium, creative, luxurious |
| Best for | Beauty brands, luxury goods, wellness, creative products |
Purple has long been associated with luxury and creativity. This theme works particularly well for skincare and beauty stores that use purple, lavender, or plum in their branding. It also suits wellness brands, crystal shops, and artisan product stores.
If your store features warm, rich photography with gold or cream accents, the Purple theme will complement it naturally. It is the default theme for good reason -- it works with a wide range of store aesthetics.
2. Ocean
| Primary tone | Deep blue with aqua highlights |
| Mood | Trustworthy, calm, professional |
| Best for | Health supplements, tech accessories, outdoor gear, marine products |
Blue is the most universally trusted color in commerce. The Ocean theme channels that trust into a clean, professional widget that feels at home on health supplement stores, technology shops, and outdoor brands.
Stores with blue, navy, or teal branding should consider Ocean as their first choice. It also works well for stores with a clean, minimal white-and-blue aesthetic -- think supplement brands, surf shops, or electronics retailers.
3. Emerald
| Primary tone | Deep green with natural warmth |
| Mood | Natural, organic, growth-oriented |
| Best for | Organic products, pet supplies, garden stores, eco-friendly brands, food and beverage |
Green screams "natural" and "growth" -- perfect for brands that emphasize sustainability, organic ingredients, or the outdoors. The Emerald theme is the go-to for pet supply stores, organic food brands, plant shops, and eco-friendly product lines.
If your store uses earth tones, natural textures, or green branding elements, Emerald will feel like it was custom-designed for you. It is also a strong choice for CBD brands, herbal supplement stores, and garden centers.
4. Rose
| Primary tone | Soft pink with warm highlights |
| Mood | Feminine, warm, approachable |
| Best for | Fashion boutiques, jewelry, cosmetics, baby products, florists |
The Rose theme brings warmth and approachability to your loyalty widget. It is designed for stores with feminine branding, pink or coral color palettes, and soft aesthetics.
Fashion boutiques targeting a female audience, jewelry stores, cosmetics brands, baby product shops, and florists will find Rose particularly effective. It pairs beautifully with gold accents, cream backgrounds, and soft photography.
5. Amber
| Primary tone | Warm golden-orange |
| Mood | Energetic, warm, inviting |
| Best for | Food and beverage, coffee brands, bakeries, artisan goods, home decor |
Amber radiates warmth and energy. It is the theme that makes you think of fresh-baked goods, artisan coffee, and handcrafted products. The golden-orange tones create an inviting atmosphere that encourages browsing and engagement.
Coffee brands, bakeries, spice shops, honey producers, and artisan food stores will find Amber to be a natural fit. It also works for home decor stores with warm, rustic aesthetics and for any brand that uses earthy warm tones.
6. Slate
| Primary tone | Cool gray with subtle blue undertones |
| Mood | Modern, minimal, sophisticated |
| Best for | Streetwear, electronics, modern furniture, automotive, monochrome brands |
Slate is the theme for stores that let their products do the talking. Dark, minimal, and sophisticated -- it disappears into dark-themed storefronts while still maintaining visual presence through subtle contrast.
Streetwear labels, electronics stores, modern furniture brands, and automotive accessory shops should reach for Slate. If your store uses a dark background, monochrome palette, or industrial aesthetic, this is your theme. It also works exceptionally well for photography stores and high-end menswear.
7. Indigo
| Primary tone | Deep blue-violet |
| Mood | Bold, authoritative, creative |
| Best for | SaaS-adjacent brands, digital products, premium services, fitness brands, gaming |
Indigo sits between Purple and Ocean, offering a bold, slightly techy aesthetic. It communicates authority and innovation -- making it ideal for fitness brands, gaming accessory stores, digital product sellers, and premium subscription boxes.
If your store has a blue-leaning purple brand color, or if you sell products in the tech, gaming, or fitness space, Indigo will give your loyalty widget a distinctive, premium feel. It stands out without being flashy.
8. Teal
| Primary tone | Blue-green with fresh brightness |
| Mood | Fresh, modern, balanced |
| Best for | Swimwear, travel goods, skincare, modern lifestyle, kids' products |
Teal combines the trustworthiness of blue with the freshness of green. It is a versatile theme that works across a wide range of store types -- from swimwear brands and travel gear to modern skincare lines and kids' product stores.
If your brand uses teal, turquoise, or aqua colors, this theme is a direct match. It also works well as a neutral-but-interesting choice for stores that do not strongly lean toward any single color. Teal is the "safe but not boring" option.
Beyond Color: Widget Customization Options
Color themes are just one dimension of widget customization. LevelUp Loyalty also lets you personalize:
FAB Icon Choices
The Floating Action Button displays an icon that represents your loyalty program. You can choose from 10 icon options:
- Trophy -- Classic achievement symbol (default)
- Star -- Universal reward icon
- Diamond -- Premium, luxury feel
- Crown -- VIP and royalty vibes
- Gem -- Valuable, treasure-like
- Medal -- Athletic, achievement-oriented
- Flame -- Energetic, streak-based
- Zap -- Fast, tech-forward
- Heart -- Community, love-your-brand
- Coins -- Traditional reward imagery
The icon appears on the floating button and within the popup header. Choose one that matches your brand personality: a fitness brand might use Medal or Flame, while a jewelry store might prefer Diamond or Gem.
Widget Position
Place the floating button on the bottom-left or bottom-right of your storefront. Most stores use bottom-right (matching the convention for chat widgets), but if you already have a chat widget on the right, bottom-left avoids overlap.
Mobile Responsiveness
Every theme and configuration is fully responsive. The widget automatically adapts to mobile screen sizes, with touch-optimized tap targets and a popup that scales to the viewport. With mobile commerce accounting for over 50% of US retail ecommerce, your loyalty widget needs to work flawlessly on phones -- and it does.
How AI Auto-Selects Your Theme
Not sure which theme to choose? LevelUp Loyalty's AI onboarding system can pick for you.
When you install the app, the AI analyzes your store's visual branding -- your storefront colors, logo, and overall aesthetic. It then calculates the color distance between your brand colors and each of the 8 themes using RGB Euclidean distance.
Here is how the matching works:
- If your brand colors closely match an existing theme (color distance below the threshold), that theme is automatically selected
- If your colors are unique and do not closely match any preset, the AI generates a custom color theme using your exact brand colors as primary and secondary values
Either way, you get a widget that looks like it was designed for your store. And you can always change it later in the settings panel.
Theme Selection Guide: Quick Reference
Use this table to quickly identify the best theme for your store type:
| Store Type | Recommended Theme | Recommended Icon |
|---|---|---|
| Beauty / Skincare | Purple or Rose | Diamond, Gem |
| Fashion (Women's) | Rose or Purple | Star, Crown |
| Fashion (Men's / Streetwear) | Slate or Indigo | Flame, Zap |
| Pet Supplies | Emerald or Teal | Heart, Star |
| Food / Coffee / Bakery | Amber or Emerald | Star, Trophy |
| Health / Supplements | Ocean or Indigo | Medal, Zap |
| Electronics / Tech | Slate or Ocean | Zap, Star |
| Jewelry / Luxury | Purple or Amber | Diamond, Crown |
| Kids / Baby Products | Teal or Rose | Star, Heart |
| Outdoor / Adventure | Emerald or Ocean | Trophy, Medal |
| Fitness / Activewear | Indigo or Slate | Flame, Medal |
| Home Decor / Artisan | Amber or Emerald | Gem, Star |
Accessibility Considerations
Good design is accessible design. Every LevelUp Loyalty theme has been built with accessibility in mind:
- Color contrast: All text-on-background combinations meet WCAG 2.1 AA contrast ratios. White text on colored backgrounds, dark text on light backgrounds -- every combination is readable
- Not color-dependent: Progress bars, level indicators, and status information use text labels and icons in addition to color, so they remain meaningful for users with color vision deficiencies
- Keyboard navigation: The widget popup is fully navigable via keyboard (Tab, Enter, Escape), supporting users who do not use a mouse
- Screen reader friendly: All interactive elements include appropriate ARIA labels and roles
Accessibility is not optional -- it affects roughly 15% of the global population. A loyalty widget that excludes any segment of your customer base is a loyalty widget that is leaving money on the table.
The Widget Experience: What Your Customers See
Here is the full customer journey through the widget, colored by your chosen theme:
- FAB Button: A floating circular button appears in the corner of your store. It shows your chosen icon and a badge with the customer's current XP count. The button uses your theme's primary color
- Click to Open: Tapping the FAB opens the popup panel. The header displays the customer's name, current level, and a progress bar showing how close they are to the next tier. A real-time SSE connection keeps this data current
- Activity Tab: A chronological feed of XP transactions -- purchases, signup bonuses, and any clawbacks from refunds. Each entry shows the date, action, and XP amount
- Rewards Tab: Available discount codes for the customer's current level. Each reward shows the discount type, value, code, and expiry date. Customers can copy codes directly from the widget
- Roadmap Tab: A visual tier progression showing all levels, their XP requirements, and the rewards waiting at each one. Completed levels are filled in with your theme color; future levels are shown as outlines
- Level-Up Celebration: When a customer reaches a new level, a celebration animation plays -- confetti, a congratulatory message, and immediate access to their new rewards. This uses your theme's accent colors for the animation
Every pixel of this experience is colored by your theme. That is why choosing the right one -- or letting AI choose it -- matters so much.
Changing Your Theme: It Takes 10 Seconds
Worried about committing to the wrong theme? Do not be. Changing your widget theme takes three clicks:
- Open your LevelUp Loyalty dashboard
- Navigate to Settings and then Widget
- Select a new theme from the visual picker
The change takes effect immediately on your storefront. No code editing, no developer needed, no waiting for a deploy. You can preview different themes during quiet hours and settle on the one that looks best with your actual products and storefront layout.
Choose Your Theme and Launch
Your loyalty widget is a permanent fixture on your storefront. It deserves the same design attention as your logo, your product photography, and your email templates. With 8 pre-built themes, 10 icon options, and AI-powered auto-selection, LevelUp Loyalty makes it easy to get the design right without hiring a designer.
If you are still exploring which loyalty app to use, our setup guide walks through the full configuration process. And if you want to understand how the widget delivers real-time XP updates, our real-time notifications guide covers the technology behind instant updates.
Preview all 8 themes today. Install LevelUp Loyalty free from the Shopify App Store and match your brand in one click.