Consistent visuals build trust. If the things customers see in your loyalty dashboard don’t match your brand in some way, it is natural for them to question legitimacy. When the styling appears to be generic, with the added sense that this loyalty experience doesn’t feel like any part of your store, it devalues your rewards program.
Your layout settings are the framework that provides this visual consistency. Change every visual element within the WooCommerce Loyalty plugin with your layout settings – these include icon choices, colors, wrappers, and card styling. While these may sound like simple items of style (and in the grand scheme, they are), they provide an opportunity to achieve a branded loyalty experience that feels at home and native to your WooCommerce store.
This post will help configure icons, customization colors, and create a customer dashboard that looks professional and carries your non-verbal brand identity.
Accessing Layout Configuration #
To get started, navigate to the Layout settings tab:
- Log in to your WordPress dashboard and navigate to DevDiggers Plugins → LoyaltyX → Configuration.
- Click the “Layout” tab.
- From here, you will see two main sections: Icons and Color.
- Whatever changes you make will be previewed on the dashboard in real-time.
- Once finished, click on “Save Changes” in the bottom right to save changes.
Section 1: Icon Configuration #
The use of icons can support visual context and present an easy and clear approach for immediate recognition of statistics. The Icons Configuration section is where you control the way icons are displayed, the sizes of the icons, and any custom images that are uploaded for each statistic card.
Show Icons #
Toggle: ON/OFF
Default: Enabled
Purpose: Determines if icons will be shown in the statistics cards or not.
When ENABLED:
- The icons will be shown in the statistics cards as “Total Earned Points”, “Available Points”, “Redeemed Points”, etc.
- Visually, the hierarchy of the icons helps to support the scanning and flow of visually scanning the dashboard.
- Statistics can be easily visually located or identified.
When DISABLED:
- Only text labels and large numbers will be displayed.
- More minimal, text-only appearance.
- Fewer pixels on the page, creating a tighter, compact design.
Recommendation: Keep ENABLED. Icons will provide an exponential improvement to the overall user experience and visual experience.
Show Wrapper #
Toggle: ON/OFF
Default: Enabled
Function: Specify if the colored circular background shows behind the icon.
When ENABLED:
- The icons will show inside a more colorful circular wrapper.
- Adds visual consistency to your statistics.
- The icon inside a colored wrapper will provide better contrast against the various card solid background colors.
- This will create a more polished and contemporary experience.
When DISABLED:
- Icons appear without the circular background
- Flatter and more minimalistic design
- Icons might blend into card backgrounds
Recommendation: Keep ENABLED for a polished experience.
Show Wrapper in Rule Icons #
Switch: ON/OFF
Default: Set to ON
Description: Allows wrappers on earning/redeeming rule icons (“Earn” & “Redeem” tabs)
When ON:
- The rule icons (order completed, referral, birthday, etc) will now display with wrappers
- The wrappers on all rule icons will match the design and feel of the stats cards
When OFF:
- The rule icons will show without a circular background
- The rules icons will no longer match the visual treatment of the main stats
Recommendation: Keep this setting ON for design consistency.
Icon Size #
Choose the visual impact of your icons:
Icon Size: Numeric field (in pixels)
Default: 40 pixels
Recommended Range: 30-60 pixels
Description: This sets the display size of all icons used to represent the statistics cards. Smaller icon sizes (30-35px) yield subtle, minimal designs. Larger icon sizes (50-60px) seem to cause the stats to be more visually impactful and grab more attention.
What to expect:
- All 6 of the statistics card icons will be impacted.
- Both the icon size and circular wrapper size will change appropriately as it will maintain the correct proportions.
- The changes will be seen in real-time on the customer dashboard preview.
- This will NOT impact the rule icons in the Earn/Redeem tabs (separate setting).
Recommendation: Start with the default setting of 40px. The recommendation is to test and adjust it around the layout density of your cards.
Custom Icons Upload Fields #
LoyaltyX has provided 6 positions for icons to be uploaded to create a complete dashboard that looks like your organization.
- Total Earned Points (ICON)
- Displays on: “Total Earned Points” statistics card
- Suggested: upload icon (trophy, star, acknowledgement icon, etc).
- Available Points (ICON)
- Displays on: “Available Points” statistics card
- Suggested: wallet, pile of coins or currency icon.
- Redeemed Points (ICON)
- Displays on: “Redeemed Points” statistics card
- Suggested: shopping cart, gift box, checkmark icon.
- Expired Points (ICON)
- Displays on: “Expired Points” statistics card
- Suggested: clock, hourglass, warning icon.
- Coupon Rewards (ICON)
- Displays on: “Converted Coupons” statistics card.
- Suggested: ticket, coupon, discount tags, etc
- Referrals (ICON)
- Displays on: “Total Referrals” statistics card.
- Suggested: people, handshake, network icon, etc.
Icon Upload Best Practices
- Use overall format style across all 6 icons (action line icons OR solid icons – not both).
- Use similar visual weight and detail level.
- The minimum size of your uploads should be 100×100 px for best results.
- Use transparent backgrounds (PNG/SVG) to maintain a clean look.
- Test icons with different light and dark colour backgrounds at the test stage.
- Keep it simple as the icon designs must be recognizable in smaller sizes.
- Use brand colors in conjunction with custom icons for identity.
Section 2: Color Settings #
LoyaltyX has 11 color settings that allow you to control the appearance and aesthetics of every visual component of your customer dashboard. These color settings allow you to create an experience that matches your brand.
- Details Icon Color
Default: #0256ff (blue)
Where You See: The icon graphic inside the wrappers on the 6 statistics cards - Details Icon Wrapper Background Color
Default: #eef3ff (light blue)
Where You See: The circular backgrounds behind the icons on the statistics cards - Background Color
Default: #fff (white)
Where You See: The statistics cards, the level progress panel and each row of the activity log table - Border Color
Default: #dce6ff (light blue)
When to Use: For labels, descriptions, activity log text and overall body content - Font Color
Default: #000 (black)
When to Use: For point numbers, statistical values and other significant data points - Value Color
Default: #0256ff (blue)
When to Use: For point numbers, statistical values and significant data points. - Level Progress Bar Background Color
Default: #eef3ff (light blue)
When to Use: For the empty and yet to be filled-in portion of the level progression bar - Level Progress Bar Color
Default: #0256ff (blue)
When to Use: When To Use: For the filled-in portion of the progression - Table Header Text Color
Default: #000 (black)
When to Use: For table column headers in the Activity Log as well as in the Expiring Points and History tables. - Background Color for Table Header
Default: #f5f7f9 (light gray)
Applies to: Background for every column header of the table. - Background Color for Rule Icons Wrapper
Default: #f5f7f9 (light gray)
Applies to: Circular background behind the icons in the “Earn” and “Redeem” tabs.
Next Steps #
With a custom layout, the loyalty program dashboard is branded and professional.
Your program will appear more legitimate having a branded, unified design and will appear more like a regular software feature, rather than an extension.
