How do I customize the appearance and branding of the points system?

Customizing how points are displayed on your store creates a cohesive brand experience.

Customization Options:

1. Points Name/Terminology

Navigate to AI Copilot → Settings → Display → Points Name

Default: “Points”

Custom Examples:

• Rewards Points
• Store Credits
• Loyalty Coins
• [Your Brand] Bucks
• VIP Tokens
• Star Points
• Gems, Crowns, Diamonds

Singular vs Plural:

• Singular: “Point” or “Coin”
• Plural: “Points” or “Coins”

2. Points Display Locations

Control where points appear on your site:

Product Pages:

• ☑ Show points earned for this product
• ☑ Display above/below price
• ☑ Show as badge or text
• Example: “Earn 50 points with this purchase”

Cart Page:

• ☑ Show available balance
• ☑ Points to be earned from cart
• ☑ Redemption widget
• Example: “You have 500 points. Use them for $5 off!”

Checkout Page:

• ☑ Points balance reminder
• ☑ Apply points option
• ☑ Points earning preview

Account Page:

• ☑ Points dashboard widget
• ☑ Transaction history
• ☑ Available rewards
• ☑ Tier progress bar

Header/Top Bar:

• ☑ Persistent points balance
• ☑ Link to rewards page
• Example: “Your Balance: 1,250 points”

3. Visual Styling

Colors:

• Primary color (buttons, badges)
• Text color
• Background color
• Border color
• Hover states

Icons:

• Upload custom points icon
• Choose from icon library
• Set icon size and position
• Common choices: ⭐ 💎 🎁 🏆 👑 💰

Typography:

• Font family (match your theme)
• Font size
• Font weight (bold, normal)
• Text transform (uppercase, capitalized)

4. Message Templates

Customize messages shown to customers:

Points Earned Message:

• Default: “You earned {points} points!”
• Custom: “Woohoo! +{points} {points_name} added to your account! 🎉”

Redemption Message:

• Default: “Apply {points} points for {discount} off”
• Custom: “Use your {points} {points_name} to save {discount} right now!”

Insufficient Points Message:

• Default: “You need {required} points. You have {balance} points.”
• Custom: “You’re {needed} {points_name} away from this reward! Keep shopping! 🛍️”

CSS Customization (Advanced):

Navigate to AI Copilot → Settings → Display → Custom CSS

/* Custom points badge styling */
.wupsales-points-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 5px 15px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Points balance in header */
.wupsales-points-header {
  font-size: 14px;
  color: #667eea;
}

/* Redemption widget styling */
.wupsales-redemption-widget {
  border: 2px solid #667eea;
  border-radius: 10px;
  padding: 20px;
  background: #f8f9ff;
}

Mobile Responsiveness:

• Ensure points displays work on mobile
• Test tap targets for redemption buttons
• Consider collapsible widgets for small screens
• Use responsive font sizes

Translation & Multilingual:

For multi-language stores:

• Use WPML or Polylang for translations
• Translate all custom messages
• Consider culturally appropriate icons
• Test number formatting (1,000 vs 1.000)

Best Practices:

1. Clarity Over Cleverness: Make sure customers understand points value
2. Consistency: Use same terminology everywhere
3. Prominence: Don’t hide points – they’re a selling feature!
4. Mobile-First: Most customers shop on mobile
5. Performance: Don’t overload pages with too many dynamic elements

Pro Tip: Use A/B testing to determine which points display locations drive the most engagement and redemptions!