English
Back to website

Advice and answers from the Keficommerce Team

  1. Categories
  2. Loyalty Program, VIP Tier
  3. On-site Content
  4. Customizing the Loyalty Widget

Customizing the Loyalty Widget

Shivam Tiwari
Written by Shivam Tiwari

The Loyalty Widget is a highly customizable "floating" hub that stays accessible as customers browse your store. It is divided into two main configuration areas: General (how it looks) and Content (what it says).

1. General Settings: Visual Branding

In the General tab, you can align the widget’s aesthetics with your brand’s unique identity to ensure a seamless shopping experience.

  • Brand Colors:

  1. Primary Color: This color automatically cascades to action buttons, icons, and the widget header to maintain visual consistency.

  2. Secondary Color: Primarily used for text elements within the widget to ensure readability.

  • Header Background:

  1. Background Type: You can choose between solid colors or a Gradient for a more modern look.

  2. Gradient Controls: Define specific start and end colors to match your store’s theme exactly.

  • Button Styles: Customize the Button Color and Button Text Color independently to make call-to-action buttons (like "Claim Rewards") pop.

  • Icon Color: While icons typically inherit your primary brand color, you can manually adjust them to stand out or blend in as needed.

2. Content Customization: Brand Voice

The Content tab allows you to edit every text string within the widget, ensuring the language matches your brand’s tone for different customer states.

A. Guest (Logged Out) State

Focus on conversion by highlighting the benefits of joining your program.

  • Guest Banner: Customize the introductory text (e.g., "Welcome to {store_name}").

  • Join Card Title & Subtitle: Use compelling headlines like "Join Our VIP Rewards" and explain the value, such as "Earn points on every purchase".

  • Primary CTA: Edit the text on the signup button (e.g., "Start Earning").

B. Member (Logged In) State

Focus on engagement and showing the customer their current value.

  • Header/Hero: Customize the title shown above their points balance (e.g., "Hello, [Name]! Your Balance:").

  • Rewards Available: Use the {n} variable to dynamically show how many prizes they can claim right now (e.g., "You have {n} rewards waiting!").

  • Claim Button: Customize the text that leads them to their available discounts (e.g., "See My Prizes").

C. Section Labels & Navigation

  • Ways to Earn/Redeem: Rename these core headings to fit your niche (e.g., "How to Score" or "Trade Your Credits").

  • History & Discounts: Customize the labels for the activity log and the section where customers find their previously claimed codes.

3. Real-Time Preview & Management

Before going live, use the Preview Pane on the right side of the screen.

  • Device Toggle: Switch between Desktop and Mobile views to ensure the widget doesn't block critical site elements on smaller screens.

  • Widget Status: Use the Disable Widget or Preview Widget buttons at the top to control whether the widget is visible to your live customers during your design process.

Launcher Settings: Visibility & Design

The Launcher is the most frequent point of interaction for your customers. Setting it up correctly ensures your rewards program is easily accessible without getting in the way of the shopping journey.

1. Visibility & Device Targeting

You have full control over where the Launcher appears based on the user's device:

  • Mobile Only: Keep the desktop clean and only show the rewards button to smartphone users.

  • Desktop Only: Visible on computers but hidden for mobile shoppers.

  • Both (Recommended): This ensures maximum engagement, making your loyalty program reachable regardless of how customers access your store.

2. Strategic Positioning

Placement is key to a good user experience. Using the Screen Position dropdown, you can anchor the Launcher to specific corners of the screen:

  • Bottom Right / Bottom Left: These are the most common positions, as they are within the "thumb zone" for mobile users.

  • Avoid Overlap: Ensure your chosen position doesn't block other critical site elements, such as a "Back to Top" button or a third-party Live Chat bubble.

3. Appearance & Branding

Customize the button to grab attention while maintaining a professional, on-brand look:

  1. Launcher Title: This is the call-to-action text on the button itself. Short, punchy words like "Rewards," "VIP," or "Club" work best.

  2. Icon Selection: Choose from a library of symbols that represent your program’s theme. Popular options include:

  • Gift Box: Suggests receiving a physical reward.

  • Trophy: Gamifies the experience, perfect for points-heavy programs.

  • Heart: Great for building an emotional community or a "brand favorites" vibe.

  • Percentage / Tag: Clearly communicates savings and discounts.

Pro-Tip: The "Mobile First" Test

Since most e-commerce traffic is mobile, always check your Launcher Settings in the mobile preview mode. Make sure the button isn't so large that it covers the "Add to Cart" button or makes it difficult for customers to navigate your product pages.

Need Help?

Our support team is here to help you succeed with Kefi:

Categories:

Did this article help you in any way?