Appearance Settings

Configure the visual appearance of your loyalty widget including colors, typography, layout, and spacing.

General Settings

Setting	Description	Default
Widget Title	Main heading displayed in the widget	"Loyalty Rewards"
Widget Description	Subtitle text shown below the title	"Track your loyalty points..."
Show Preview Data	Enable to view mock data in the theme editor	Disabled

Layout & Positioning

Setting	Description	Range	Default
Widget Width	Width in pixels	350-600px	400px
Widget Height	Height in pixels	400-800px	600px
Position from Bottom	Distance from bottom of screen	0-200px	20px
Position from Side	Distance from left or right edge	0-200px	20px
Horizontal Position	Choose left, center, or right alignment	-	Right
Show on Mobile	Enable/disable widget on mobile devices	-	Enabled
Minimized Display	Icon + text, icon only, or text only	-	Icon only
Minimized Text	Custom text for minimized state	-	"Rewards"
Show Close Button	Allow customers to close the widget	-	Enabled
Show Minimize Button	Allow customers to minimize the widget	-	Enabled

Colors & Theme

Header

Setting	Description	Default
Header Primary Color	Main header color	#6366f1
Header Secondary Color	Used when gradient is enabled	#8b5cf6
Use Header Gradient	Enable gradient blend of primary and secondary colors	Disabled
Header Text Color	Text color in the header	#ffffff

TIP

Enable the header gradient to create a smooth color transition from primary to secondary color. This can help match your store's design language.

General

Setting	Description	Default
Primary Icon Color	Color applied to all icons throughout the widget	#6366f1
Background Color	Main widget background	#ffffff
Primary Text Color	Main text color	#1f2937
Secondary Text Color	Subtitle and helper text color	#6b7280
Border Color	Color for dividers and borders	#e5e7eb
Points Number Color	Color for points balance display	#6366f1

Navigation

Setting	Description	Default
Active Tab Color	Color for selected navigation tab	#6366f1
Inactive Tab Color	Color for unselected tabs	#9ca3af

Buttons

Setting	Description	Default
Primary Button Background	Background color for main actions	#6366f1
Primary Button Text	Text color for main actions	#ffffff
Primary Button Hover	Hover color for main actions	#4f46e5
Secondary Button Background	Background color for secondary actions	#e5e7eb
Secondary Button Text	Text color for secondary actions	#1f2937
Secondary Button Hover	Hover color for secondary actions	#d1d5db
Button Border Radius	Roundness of button corners	0-50px

Visual Elements

Setting	Description	Default
Slider Color	Color for range sliders (e.g., dynamic discount selection)	#6366f1
Slider Style	Choose default, modern, minimal, or gradient style	Default
Progress Bar Color	Color for reward progress indicators	#6366f1

Slider Styles

• Default: Standard slider with medium thumb (20px)
• Modern: Larger thumb (24px) with enhanced border
• Minimal: Smaller thumb (16px) for subtle appearance
• Gradient: Gradient-colored thumb blending primary and accent colors

Typography & Spacing

Fonts

Setting	Description	Range	Default
Font Family	Choose from 15+ font options	-	System Default
Base Font Size	Default text size	12-18px	14px
Header Font Size	Size for headings	16-28px	20px
Small Font Size	Size for small text	10-14px	12px

Available Fonts:

• System Default: Uses the device's default font
• Google Fonts: Inter, Roboto, Poppins, Montserrat, Open Sans, Lato, Source Code Pro, Raleway, Nunito
• System Fonts: Arial, Helvetica, Times New Roman, Georgia, Verdana

Font Loading

• System fonts load instantly from the user's device
• Google Fonts load dynamically on first widget render
• All fonts include fallback stacks to ensure text displays even if the primary font fails to load

Spacing & Borders

Setting	Description	Range	Default
Spacing Unit	Base spacing value	4-16px	8px
Widget Border Radius	Roundness of widget container	0-30px	16px
Card Border Radius	Roundness of cards within widget	0-20px	8px

Other

Setting	Description	Default
Birthday Date Format	Choose MM/DD or DD/MM format	MM/DD

Best Practices

Color Selection

Contrast Ratios

• Ensure minimum 4.5:1 contrast ratio between text and background colors for accessibility
• Test your color combinations using online contrast checkers
• Verify that points numbers are clearly visible with your chosen color scheme

Brand Consistency

• Use colors from your brand palette for primary elements
• Match button colors with your store's call-to-action buttons
• Consider using your brand's accent color for the points display

Typography

Font Selection

• Choose a font that matches your store's typography
• Use system fonts when possible to improve loading performance
• Limit custom font usage to maintain fast widget loading

Font Sizes

• Use larger font sizes (16px+) for better mobile readability
• Ensure header text is clearly distinguishable from body text
• Keep small text readable (minimum 12px)

Mobile Optimization

Widget Dimensions

• Keep widget width between 350-400px for optimal mobile display
• Test the full-screen mobile experience with your customizations
• Ensure buttons are large enough for touch interaction (minimum 44x44px)

Minimized Display

• Consider using "icon only" mode on mobile to save space
• Test minimized state visibility against your store's background
• Ensure the minimized widget doesn't block important content

Performance

Image Optimization

• Optimize custom images before uploading (recommended: PNG or SVG, max 50KB)
• Use SVG format for icons when possible for better scaling
• Test widget loading speed after adding custom images

Font Loading

• Use system fonts to avoid additional HTTP requests
• Limit Google Font variations (weights) to only what you need
• Test widget performance on slower connections