How to Customize Themes on SmartKiosk

Overview 

The SmartKiosk Theme Management system empowers merchants to create and update customized themes, defining primary and secondary colors, as well as text styles for various kiosk and SmartWeb interface elements. This centralized system, accessible through eCMS, ensures consistent theming across all instances of the self-order kiosk application.

Functional Specification:

• eCMS Backend -> Firebase <- Kiosk/SW Application:

  • eCMS backend controls theme configurations, syncing them to Firebase.

  • The kiosk app listens for real-time updates from Firebase, applying the latest theme configurations to the interface.

  • Firebase serves as an intermediate storage and synchronization platform for seamless, real-time updates.

How to Enable:

Step 1: Login as Brand

Step 2: Navigate to Settings -> Firestore Theme -> New Theme

Step 3: Choose App Type:

• Select either "Kiosk" from the dropdown.
  

Step 4: Choose Device Type:

• For Kiosk, a dropdown for device type (Android or iOS) will appear.
  

Step 5: Set Primary Color:

• Choose the brand's primary color using the color picker or by entering the value manually.

Step 6: Save:

• Click on the "Save" button to apply the theme configuration.
  

Edit or Delete Added Theme:

As a user, you have complete control over your saved themes. Here's how you can modify or delete them:

• List Theme Section:

  • When you save the theme, an entry called "New Theme" is automatically created under the List Theme section (e.g., Kiosk-Android or SW).

• Edit or Delete:

  • Click on the three dots next to the theme entry.
    

  • Choose either "Edit" or "Delete" to modify or remove the theme.

• Edit Theme:

  • Clicking "Edit" will redirect you to the New Theme tab, where you can make adjustments.

Customize your SmartKiosk themes effortlessly, ensuring a visually cohesive and brand-aligned experience across all instances of the self-order kiosk application.

Note:

• When using our system, you can currently choose only the primary color value for your brand.

• Other color options, text, background, and buttons are automatically generated by our backend algorithm.

• For modifications beyond the primary color, please request assistance from the eCMS tech team until advanced user controls are developed.