The look and feel in the Catalog Kiosk app can be changed using the Branding & Theming in the Device Settings for an individual device or in the Device Group Settings for a group of devices.
Making Changes to a Group of Devices
Click the Devices tab in the top navigation. Click the Settings button in the Device Groups side panel.
See Customizing Your Devices Using Device Groups for more information on how to create and manage Device Groups.
Continue to the Branding and Theming section of this article.
Changing an Individual Device
To access the Device Settings for a specific device, click Devices on the top menu bar and then click the device you want to edit.
Click the Settings button on the left side of the screen.
Branding and Theming
In either the device settings or the device group settings, click the Branding & Theming menu to expand it.
Within the Branding & Theming menu, you can upload your Store Logo, select a Theme Mode, set the Primary Color, set the Send as Text/Email button color, and format the Attractor Screen.
You have the option to upload your store logo that will appear on the upper left side of the Catalog Kiosk app. The store logo will act as a Home button and return you to the attractor screen from any screen in the app.
To upload your store logo, click the Choose an Image button. If a store logo has not been uploaded, the system will use the default Home icon shown below:
See article How to Add Your Logo for more information on adding a logo to your Catalog Kiosk app.
The Theming section allows you to select between a DARK theme and a LIGHT theme. The DARK theme is enabled by default. To switch to the LIGHT theme, click the LIGHT radio button in the Theming section.
- If the DARK theme is selected, changing the Primary Color will update the background color, button color, and the navigation bar color.
- If the LIGHT theme is selected, changing the Primary Color will update all text and buttons/icons to that color.
The Primary Color can be used to customize your Catalog Kiosk appearance. To change the Primary Color, click the Color Picker icon to select a color or enter the HEX code value for the desired color in the text field.
The Primary Color is set as follows in DARK and LIGHT Mode:
- DARK: Overlay color on the Attractor Screen and background in the header bar
- LIGHT: Action text (i.e. Touch-to-Explore) and header bar icons (i.e Menu, Cart)
- Primary Buttons: Background color for primary/action buttons in the App such as Add to Cart, Send as Text/Email, Add All Products, Submit, and Checkout Method.
Example of Primary Color in the Catalog Kiosk App
Send as Text/Email Button Color
The Send as Text/Email Button Color can be used to customize the color of the Send as Text/Email button that displays on the Product and Shopping Cart pages in the Catalog Kiosk app. By default, the Send as Text/Email button uses the primary color.
To set a custom color for the Send as Text/Email button, click the USE CUSTOM COLOR radio button, then enter the HEX code value in the text field or click the Color Picker icon to select the color.
NOTE: If changes are made to the Branding & Theming fields, the Inherited from theme text on the right side of the field updates to a button. Click the Reset to a Theme Default button to remove custom settings and reset to the original values.
Example of Reset to Theme Default Button
Click the Save Changes button in the top right corner to save any changes that have been made.
Example of Catalog Kiosk App with the Primary Color and Send as Text/Email Button Color Settings
Attractor Screen Configuration Options
The Attractor Screen is the first screen your guests will see when they walk up to the Catalog Kiosk app on an in-store device. The Attractor Screen is also shown when the device times out.
Click the Change Configuration button in the Attractor Screen field in the Branding & Theming menu to update the settings.
Follow the steps below to configure the Attractor Screen layout.
1. Category Configuration
Choose a Category Configuration options for the Attractor Screen. Use the Customize the category tiles and layout configuration to customize the appearance of the Attractor Screen by choosing the number of tiles in the layout, the categories assigned to each tiles, and whether to show the "Browse All Categories" tile on the Attractor Screen. Use the Display all top level categories configuration to display all the top-level categories directly on the Attractor Screen. This removes the options to customize the number of tiles, limit tiles to certain categories, and display the "Browse All Categories" tile on the Attractor Screen. Options 2, 3, and 4 below will be grayed out in the Attractor Screen Configuration screen when this configuration is selected.
2. Choose the Category Layout
You can select between 1 and 6 tiles that will be displayed on your Attractor Screen. Each tile can be assigned to a specific category with an option for the last tile to allow your guests to browse all categories. The layout of the tiles is based on the number of tiles that are selected. Click the layout with the desired number of tiles to select it. A blue frame indicates which tile layout is currently selected. By default, the Attractor Screen is set to 4 tiles with the 4th tile assigned to the Browse All Categories option.
2. Assign Tiles to Categories
Assign each tile to a category by typing in the category name. As you type, the system will predict the category based on the available categories in your account. Tap a category tile to navigate directly to the selected category.
4. Show Browse All Categories Tile
Click the box next to Assign last tile to "Browse All Categories" to turn the last tile in the number of selected layout tiles into a general "Browse all categories" tile.
5. Choose a Background Image
Choose a background image for the attractor screen by clicking on the appropriate image. The background image will be displayed with low opacity behind the category tiles.
6. Configure the "Touch-to-explore..." Message
The default call-to-action message on the attractor screen is "Touch to explore...". This message can be changed by clicking the text field and entering a custom message. It is recommended to keep the call-to-action short and simple.
7. Click Apply and Save Changes
Once you click Apply, the Configuration Window closes.
8. Click the Save Changes button in the top right corner to save your changes.
6. Sync the Devices
The Catalog Kiosk app automatically synchronizes product data and device settings to reflect any changes from in the Catalog App Manager (CAM) within 24-hours. Manually synchronize to apply theming and branding changes immediately.
Click the Devices tab in the top navigation. Click the Sync all devices button on the right side of the Devices panel to update the devices immediately. As long as your devices are online during the sync, the changes will become visible to your guests..
Catalog Kiosk App View
The Branding & Theming device group settings are updated within the Catalog Kiosk app. Depending on the Attractor Screen Configuration for the account at the theme or device level, the Attractor Screen may vary in appearance and customization. Review the examples below to see how different settings can be updated to change the way the Catalog Kiosk app displays and the level of customization available to customers.
Example of Default Attractor Screen Layout in Dark Mode with Customize the Category Tiles and Layout Configuration
Example of Default Attractor Screen Layout in Dark Mode with the Display All Top- Level Categories Configuration