for Retail and Restaurant
English Finnish
English Finnish

Creating a Custom Kiosk Product Menu

You can create custom Kiosk layouts in the Designer view of the Back Office, and select products/categories individually to each tab in in the Kiosk screen (regardless of any assortments).

The basic Kiosk layout is defined by the options you select in the layout’s Basic Data:

  • Infinite scroll enabled or not

  • Featured tabs enabled or not

  • Full product images are used or not

  • Vertical menu enabled or not

  • Custom product grid enabled or not

    Basic Data.png
    Layout option switches in Basic data

If Vertical Menu is not enabled in Basic Data, the product tabs will be visible horizontally in the screen.

Horizontal product tabs.png
Configurations for a horizontal product menu
Horizontal product menu.png
Example of a horizontal product menu in Kiosk


If Vertical Menu is enabled in Basic Data, the product tabs are arranged vertically to the screen.

Vertical menu.png
Configurations for a vertical product menu
Vertical product menu.png
Example of a vertical product menu in Kiosk

Creating Tabs

You can add new tabs to the layout by clicking on the Plus icon.

Add new tab.png
Add new tab

Enter/select the following details for the tab.

Tab options.png
Tab Options

Field

Description

Tab name

Enter a name which will be displayed on Kiosk screen.

Grid width

Defines the maximum amount of products per row: Select 2 ,3 or 4 for the tab.

Tab order

Enter the order of the tab.

If the Vertical Menu is in use, you can also add a tab image by either dragging-and-dropping it directly to the Tab picture field, browsing and selecting it, or entering a web address of the image; click the provide web link text for the last two options.


Tab picture.png
Tab picture field



Load image.png
Enter media path or browse for the image to add it to the tab


When you have defined the tab options, click Save layout to save the your changes. Shut down and restart the Kiosk software on the workstation for the changes to take effect.

Infinite Scroll

If Infinite Scroll has been enabled in the Kiosk Layout’s Basic Data, the Kiosk screens will continuously display product images in the Kiosk screens when the customer scrolls through the menu; the products of the next or previous tab will be automatically displayed when the customer reaches the end of the products menu in a single tab. See the video example below.

Infinite Scroll feature in Kiosk Screen

If Featured tabs has been enabled in the Kiosk layout’s Basic data, you can designate one or more tabs as a featured tabs with a separate tab color and text color from the default settings defined in Theme Options of the kiosk layout. In addition you can drag-and-drop, upload, or link an image file to be used as the background image for a tab.

Featured tab example.png
Example of a featured tab

When Featured tabs has been enabled, tab settings contain a Tab feature switch; click it to Active position to define featured tab details.

Tab feature.png
Tab feature settings

Full Product Images

If Full Product Images have been enabled in the Kiosk Layout’s Basic Data, the Kiosk screens will display full (not partially cropped/half-visible) product images in all Kiosk screens.

Full product image 1.png
Full product image in product menu


Full product image 2.png
Full product image in Basket



Adding Products to the Tabs (Custom Product Grid Not in Use)

You can add single products or whole product categories to the tabs.

When the Custom Product Grid has not been enabled, the as a default the product images displayed on Kiosk screen will be the images defined in product details. If the product details do not contain a product image, a placeholder image will be displayed.

  1. Select the tab you want to add products to.

    Tab selected horizontal.png
    Tab selected (horizontal menu)


    Tab selected vertical.png
    Tab selected (vertical menu)


  2. In the Products section, select Single product or Category of products to search.

    Single or category.png
    Single/category selection
  3. Search for products by

    1. Entering search term into the Search products field (if Single product has been selected).

      Vertical Tab.png
      Product search
    2. Selecting a category (if Category has been selected).

      Category selection.png
      Category selection
  4. Select the product(s) or category/categories to add them to the tab.

    Product search for tab.png
    Product selected for the tab
    1. If you wish, you can rearrange the product order in the menu by dragging-and-dropping the product rows and/or changing the Product order in Tile options.

      Rearranging products.png
      Product order in the menu
  5. Enter/select the options for the product tile:

      • Item Name: Enter a name which will be displayed for the tile in Kiosk screen.

        • This name will override the product name defined in the product details

        • Click the Translations icon to enter (English/Finnish/Swedish/Danish) translations for the item name. These will override any translations defined in the product details.

      • Item Picture: Enter the web address of the image used for the item.

      • Text color: Enter of select the text color used for the tile.

      • Font size: Select Small, Medium, Large or Extra Large.

        Tile options new.png
        Tile options, with Translations icon highlighted


  6. Click Save layout to save the your changes. Shut down and restart the Kiosk software on the workstation for the changes to take effect.

Custom Product Grid

If Custom Product Grid has been enabled, you can add tabs (A). as well as product tiles (B. ) to the tabs by clicking the Plus icons. You can freely define the product images which will be visible in the Kiosk screens in the product tile settings.

If you do not define an image in the tile settings, the default image displayed for product on Kiosk screen will be the image defined in product details. If the product details do not contain a product image, a placeholder image will be displayed.

Horizontal menu custom product grid.png
Adding tabs (A.) and product tiles (B.) to the screen (horizontal menu)
Vertical Menu custom product grid.png
Adding tabs (A.) and product tiles (B.) to the screen (vertical menu)

Add Product Tiles to the Custom Product Grid

  1. Select the tab you want to add a product tile into, and click the Plus icon.

    Tab selected custom.png
    Tab selected (horizontal menu)
    Tab selected custom vertical.png
    Tab selected (vertical menu)
  2. Enter/select the options for the product tile:

    • Item Name: Enter a name which will be displayed for the tile in Kiosk screen.

      • Click the Translations icon to enter (English/Finnish/Swedish/Danish) translations for the item name. These will override any translations defined in the product details.

    • Product: Select the product for the tile.

    • Item Picture: Enter the web address of the image used for the item.

    • Text color: Enter of select the text color used for the tile.

    • Font size: Select Small, Medium, Large or Extra Large.

      Tile options for a custom grid.png
      Tile options when using a Custom Product Grid, with Translations icon highlighted


  3. Click Save layout to save the your changes. Shut down and restart the Kiosk software on the workstation for the changes to take effect.

You can create larger product tiles by dragging the tile from its bottom right corner to the wanted size.

Resize.png
Resizing a product tile