Keystone Documentation

Appearance

Widget Customization ​

Customize the appearance and behavior of your loyalty rewards widget to match your store's branding.

Overview ​

The Keystone Loyalty Widget is embedded as a Shopify theme app extension. All customization is done through your Shopify theme editor, with changes applied instantly to your storefront.

Accessing Widget Settings ​

  1. Navigate to Online Store > Themes in your Shopify admin
  2. Click Customize on your active theme
  3. Open the theme editor and locate the Keystone Loyalty Widget app embed
  4. Click the app embed to access all customization options

What You Can Customize ​

The widget offers extensive customization options across several categories:

Appearance Settings ​

  • Colors: Header, background, text, buttons, navigation, and UI elements
  • Typography: Font family (15+ options), sizes, and spacing
  • Layout: Widget dimensions, positioning, and border radius
  • Visual Elements: Slider styles and progress bar colors

Custom Icons & Images ​

  • Core Icons: Widget, rewards, and earning icons (7 icons)
  • Earning Rule Images: Custom images for all earning rule types (11 images)
  • Navigation Icons: Custom icons for all navigation tabs (5 icons)

Widget Behavior ​

Responsive Design ​

The widget automatically adapts to different screen sizes:

  • Desktop: Displays as a floating widget with customizable position and dimensions
  • Mobile: Expands to full screen when opened, providing an immersive experience

Dynamic Navigation ​

Navigation tabs automatically adjust based on your program configuration:

  • Earn tab only appears if you have at least one earning rule enabled
  • Referrals tab only appears if you have referral program configured
  • Navigation centers automatically when 4 or fewer tabs are displayed

Internationalization ​

The widget supports 20+ languages and automatically detects the customer's language based on their Shopify store locale:

  • Czech (cs)
  • Danish (da)
  • German (de)
  • English (en)
  • Spanish (es)
  • Finnish (fi)
  • French (fr)
  • Italian (it)
  • Japanese (ja)
  • Korean (ko)
  • Norwegian (nb)
  • Dutch (nl)
  • Polish (pl)
  • Portuguese - Brazil (pt-BR)
  • Portuguese - Portugal (pt-PT)
  • Swedish (sv)
  • Thai (th)
  • Turkish (tr)
  • Chinese - Simplified (zh-CN)
  • Chinese - Traditional (zh-TW)

Preview Mode ​

Enable Show Preview Data in the theme editor to see how the widget looks with mock customer data, rewards, and earning rules. This allows you to test your customizations without logging in as a customer.

INFO

Preview mode is only available in the Shopify theme editor and will not display on your live storefront.

Customization Limits ​

WARNING

Some widget features cannot be customized through the theme editor and are controlled by your loyalty program settings in the app:

  • Widget content (rewards, earning rules, tiers, campaigns, etc.)
  • Customer data and points balances
  • Email notifications
  • Referral program settings
  • Point earning and redemption rules
  • Transaction history and adjustments