Custom Icons & Images

The Custom Icons & Images settings allow merchants to fully personalize the visual identity of the Keystone Loyalty Widget. By uploading custom images, stores can replace all default icons inside the widget to better match their branding. If no custom image is uploaded, the system automatically displays the default icon set.

What Can Be Customized

Merchants can replace icons across three major categories:

1. Core Icons
   Icons used throughout the widget interface, such as:

   • Main widget icon

   • Coupon, gift card, custom reward, and points icons

   • Icons for earning actions and referrals

2. Earning Rule Images
   Custom images can be assigned to each earning rule type, including:

   • Order points, signup, newsletter, birthday, social media follows, etc.

3. Navigation Tab Icons
   Icons for the main navigation tabs:

   • Home, Profile, Earn, Rewards, Referrals

Image Requirements

• Formats: PNG, SVG, JPG, WEBP

• Recommended size: Max 50KB

• Best dimensions: Square (64×64px – 128×128px)

• For icons: transparent PNG/SVG recommended

Where to Upload Icons

All customization is performed in the Shopify Theme Editor:

1. Go to Online Store → Themes

2. Click Customize

3. Open the Keystone Loyalty Widget app embed

4. Scroll to Custom Icons & Images

5. Upload and save

Best Practices

• Brand Consistency: Use your brand colors and maintain one icon style (outline, filled, duotone, etc.)

• Accessibility: Simple icons, strong contrast, easy recognition

• Performance: Compress images under 50KB (PNG/SVG preferred)

• Testing: Preview icons in desktop/mobile, minimized & expanded states, different browsers

Removing Custom Icons

If you remove an uploaded image in the theme editor, the widget will automatically revert to the default icon.

Example Use Cases

• Minimal Setup: Replace only the main widget icon + navigation icons

• Full Branding: Replace every core icon and all earning rule images

• Social Media Focus: Upload official platform logos for social earning rules

• 
  

You can view the full documentation here: https://key-stone.app/docs/loyalties/widget-customization/icons-images.html