Appearance
Custom Icons & Images
Upload custom images to replace default icons and create a personalized widget experience that matches your brand.
Overview
The widget allows you to upload custom images for icons throughout the interface. When you upload a custom image, it replaces the default icon. If no custom image is uploaded, the widget displays the default icon.
Image Requirements
- Format: PNG, SVG, JPG, or WEBP
- Size: Maximum 50KB per image (recommended)
- Dimensions: Square dimensions work best (e.g., 64x64px, 128x128px)
- Transparency: PNG or SVG with transparent backgrounds recommended for icons
Core Icons
These icons appear throughout the widget interface:
| Icon | Usage | Default |
|---|---|---|
| Main Widget Icon | Displayed in the minimized state and header | Gift box icon |
| Coupon Icon | Shown next to coupon rewards | Ticket icon |
| Gift Card Icon | Shown next to gift card rewards | Card icon |
| Custom Reward Icon | Shown next to custom rewards | Star icon |
| Points Icon | Displayed next to points balances | Coin icon |
| Earn Icon | Used in earning opportunities sections | Plus icon |
| Referral Icon | Displayed in referral program section | Users icon |
Earning Rule Images
Customize icons for each earning rule type to make them more recognizable:
| Image | Earning Rule Type | Default |
|---|---|---|
| Order Earning Image | Points earned from purchases | Shopping cart icon |
| Signup Earning Image | Account creation points | User plus icon |
| Newsletter Earning Image | Newsletter subscription points | Mail icon |
| Instagram Follow Image | Instagram follow points | Instagram logo |
| Facebook Like Image | Facebook like points | Facebook logo |
| Twitter Follow Image | Twitter/X follow points | Twitter/X logo |
| TikTok Follow Image | TikTok follow points | TikTok logo |
| YouTube Subscribe Image | YouTube subscribe points | YouTube logo |
| Pinterest Follow Image | Pinterest follow points | Pinterest logo |
| Birthday Earning Image | Birthday bonus points | Birthday cake icon |
| Shop Anniversary Image | Shop anniversary points | Calendar icon |
Navigation Tab Icons
Customize icons for navigation tabs at the top of the widget:
| Icon | Tab | Default |
|---|---|---|
| Home Tab Icon | Home/Dashboard page | Gift icon |
| Profile Tab Icon | Customer profile page | Award icon |
| Earn Tab Icon | Earning opportunities page | Lightning icon |
| Rewards Tab Icon | Rewards catalog page | Star icon |
| Referrals Tab Icon | Referral program page | Users icon |
Uploading Custom Images
Via Theme Editor
- Navigate to Online Store > Themes in Shopify admin
- Click Customize on your active theme
- Open the Keystone Loyalty Widget app embed settings
- Scroll to the Custom Icons & Images section
- Click on the image picker for the icon you want to customize
- Upload your custom image or select from your Shopify files
- Save your theme to apply changes
Image Upload Tips
For Icons
- Use square dimensions (64x64px, 128x128px, or 256x256px)
- Save with transparent backgrounds (PNG or SVG format)
- Use simple, recognizable designs
- Ensure icons are visible at small sizes
For Earning Rule Images
- Can be rectangular or square
- Use vibrant colors to attract attention
- Consider using illustrations or photos related to the earning action
- Test visibility against the widget background color
For Brand Logos
- Use your official brand assets for social media earning rules
- Maintain consistent sizing across similar icons
- Ensure logos meet minimum size guidelines for the platform (e.g., Instagram, Facebook)
Best Practices
Brand Consistency
Use Your Brand Assets
- Upload your brand's custom icons when available
- Maintain consistent style across all custom images
- Use your brand colors in custom icons
Icon Style
- Choose between outline, filled, or duotone styles consistently
- Match the icon style with your store's design language
- Ensure all custom icons have similar visual weight
Accessibility
Clarity and Recognition
- Use simple, recognizable icons that clearly represent their function
- Test icons at different sizes to ensure they remain clear
- Avoid overly detailed or complex designs
Color and Contrast
- Ensure icons are visible against the widget background
- Don't rely on color alone to convey meaning
- Test icons in both light and dark themes if applicable
Performance
Optimize Images
- Compress images before uploading (tools: TinyPNG, ImageOptim)
- Use SVG format for icons when possible (scalable and small file size)
- Keep individual file sizes under 50KB
Selective Customization
- Only upload custom images where they add brand value
- Default icons are optimized and load quickly
- Too many custom images can slow down widget loading
Testing
Visual Testing
- Preview your custom icons in the theme editor using preview mode
- Test on both desktop and mobile devices
- Verify icons are clear in both minimized and expanded states
Cross-Browser Testing
- Test in Chrome, Safari, Firefox, and Edge
- Verify SVG icons render correctly across browsers
- Check that transparent backgrounds work as expected
Removing Custom Images
To revert to default icons:
- Open the theme editor and locate the app embed settings
- Navigate to the Custom Icons & Images section
- Click the X or remove button on the image picker
- Save your theme to apply changes
The widget will automatically display the default icon when no custom image is set.
Examples
Minimal Icon Set
For a clean, professional look, consider customizing only:
- Main widget icon (your logo or brand mark)
- Navigation tab icons (if they match your site's navigation style)
Full Customization
For maximum brand consistency, upload custom images for:
- All core icons using your brand's icon set
- Custom earning rule images with branded illustrations
- Navigation icons that match your store's design system
Social Media Focus
If social media earning rules are important to your program:
- Use official brand logos for social media platforms
- Upload high-quality, recognizable social media icons
- Ensure social icons are distinct and easy to identify