What
This
guide helps you efficiently upgrade your webshop from Version 1 to
Version 2 while ensuring an appealing and functional online presence.
Where
Admin: Webshop & App > Webshop settings.
(Previously under: Store > Webshop settings). |
This guide is for you if you want to configure your webshop efficiently. It provides step-by-step instructions for upgrading from webshop version 1 to version 2, ensuring that your online presence is both visually appealing and functional.
Login
1. Log in to your admin area.
2. Go to "Webshop & App" and then "Webshop settings".
Webshop version 2
3. Change the settings from "Webshop version 1" to "Webshop version 2".
Basic settings
4. Under "Webshop title", enter the name of your restaurant. This will be the name of the browser tab when someone opens your webshop.
Also, select a "Default language" in which your webshop should be displayed.
5. Here is your "Webshop title".
6. In the "Webshop description" field, you can enter a description for your webshop. This will also be used by various search engines to suggest your webshop.
7. Under "Logo link", you can add a link behind your logo in the webshop if you want users to be redirected to a specific page when they click on your logo.
A link to a website can also be added here under "Link to the website".
Color settings
8. Now open the color settings.
9. Under "Color for links", you can set a color of your choice for links in your online store.
The "Rounding corners" setting applies to the buttons in the online store. The higher the rounding value, the rounder the buttons will be.
10. Example: The "Back" button in this case is a link, and you can see the rounded corners on the buttons.
11. Now, under "Color for background", choose a background color and three "main colors". We recommend using your logo as a guide.
12. Here is an example of the first and second color.
13. An example of the third color.
14. The background color refers to the color behind the tiles, boxes, and shopping cart.
Color settings advanced settings
15. Open the "Advanced settings".
16. These "Content colors" contrast with the three main colors you have chosen. This usually refers to the font color.
17. Examples of content colors.
Unfortunately, there is no example for the third color/content color.
18. The "Shadow color" is for the 3D effect.
The following image shows an example.
19. Example of shadow color.
20. The "Surface color" applies to all tiles, and the corresponding contrasting color is used for, for example, icons within the tiles.
An example is shown in the next image.
21. Examples of surface color and contrast color.
22. The color for "Surface variant" is, for example, for fields where the customer can enter something.
23. Example of the surface variant and contrast surface variant.
Fonts
24. Under "Fonts", select a "Default font" and an "Additional font" (this will only be used if you assign it).
If you would like to use your own font, please send it to us in both "bold" and "regular" versions.
25. For all "Heading" sizes, you can choose whether to use the "Default font" or a "Secondary font", and whether it should be "bold" or "regular".
Here you also select which of your previously set colors (first, second, or third) should be used.
26. Examples of headings.
27. You can also select the "Font size", "Font type", and "Font color" for the "Buttons".
28. Example of the buttons.
29. The settings must be configured and adjusted separately under "Font sizes - Mobile" for the "Mobile version".
Customization of navigation and item display
Now, here are some important insights into customizing your webshop's mobile and desktop interfaces to improve user experience and engagement. This covers changes to the header and footer, menu organization, and item display options to create a personalized shopping experience. Furthermore, the integration of social media and tracking tools is highlighted to increase visibility and analytics.
30. Under "Header bar & banner", you can customize the header. You can display your header in two different colors using the "Split header" option (1), hide the "delivery and pickup times" (2), and label the "Back arrow" (3).
The "Side menu" option applies only to the mobile webshop, i.e., the version of your webshop specifically optimized for mobile devices such as smartphones and tablets.
31. Example of a split header.
Navigation
32. To display the commodity groups one below the other in the side menu, the box "Display commodity groups in one column" should be checked under "Navigation".
33. Example: Commodity groups in one column.
34. If the box for one-column commodity groups is not activated, they will be displayed side by side in the side menu.
35. For your side menu, you can define your own labels and uses under "Additional side menu entries". To do this, enter a "Name" in the corresponding field and then select the appropriate use under "Internal link".
36. If you click on "more entries", you can add and configure additional items for your side menu (max. 12).
Mobile bottom bar
37. For the "mobile view", the "bottom bar" (lower navigation bar) is adjusted here. You can choose the different icons, functions, and their order yourself. There are a total of four icons and free spaces.
38. Example of the bottom bar in a mobile webshop.
39. Here, in the footer (bottom section), you can add links to the Terms and Conditions, Privacy Policy, etc. This applies to both the browser and mobile webshop.
You can also add links to other websites.
40. Example of the footer.
Start page
41. Under "Start page", you can upload images to be displayed on the start page. Please note that a different format is required for the mobile webshop.
You can also configure what is displayed as the start page when a customer visits your webshop (e.g., start page with content in a tile layout, commodity groups preview, item preview, etc.).
42. In our example, the tile view is activated. With this, you can, for example, promote items or the bonus system.
43. The settings under "Store finder and store list" are designed to simplify address entry for the end customer. For example, to prevent the customer from having to enter their address or postal code when picking up an order, this can be simplified by pre-filling store addresses via a drop-down menu (selection list).
44. Example of a drop-down selection list.
Item view
45. If you have many commodity groups, you can activate an additional commodity group button here using the "Show commodtiy group overview page" button. This will list all commodity groups side-by-side and one below the other. You can also enter the description for the commodity group overview here.
If you do not want customers to be able to leave comments for each item, deactivate this function by checking the box at "Deactivate comment field for items".
46. In our example, the commodity group overview is called "Overview".
47. There are three options under "Item display" for how your items can be shown (3 tiles side by side, list view, and 1 large, 2 small tiles). A different view can be set for the mobile webshop, if desired.
Images can also be displayed in the list view if the corresponding checkbox is selected. To indicate which items are already in the shopping cart or which are sold out, activate the appropriate buttons.
48. Example of item view: 3 tiles side by side + indication of the items already in the shopping cart.
49. Example of item view: List view + activation of images for the list view + marking of existing articles in the shopping cart.
50. Example of item view: 1 large, 2 small tiles + indication of the items already in the shopping cart.
51. Under "Topping display", you can choose to display your toppings in various ways, including with images, side-by-side, etc. If you have added images to your toppings, they will be displayed, but you can disable them by checking the appropriate box.
The following images show you the different options.
52. Example topping display: Show elements of the topping groups side by side.
53. Example of topping display: Show item name in the header of the topping + use a toggle button for removables (deselectable items) + show selection of the number of items in the footer of the topping.
54. The "Shopping cart" is displayed to the side of the items. If you do not want this, check the box at "Shopping cart collapsed to the side". It will then only be visible when the shopping cart icon in the header is clicked. You can also choose to display the images of the items in the shopping cart.
55. Shopping cart: side view + item images in the shopping cart.
56. Shopping cart: side view + shopping cart collapsed on the side.
57. You can enlarge the shopping cart icon and hide the data entry fields during checkout if, in your opinion, they are not necessary.
Search & filter
58. If you have tagged your items with item tags (item filters), customers can use the "Filters" to, for example, display only vegetarian items (provided the item settings are correct). The filter function can also be hidden. To do this, set the position of the filter icon in the drop-down menu to "Hide filter icon".
You can see the different representations in the following images.
59. Example filter: left - before the commodity groups + select filter with checkbox.
60. Filter: left - before the commodity groups + show filter options as dialog.
61. To allow customers to search for items in your webshop, activate the function by checking the "Search function for items" box. The search function will then appear at the top of the header.
62. Example of a search function for items.
Profile
63. Under "Profile", you can configure your webshop to allow users to register and log in. You can also allow logged-in users to view images of their recently ordered items, hide addresses, or disable access to their order history.
The "Hide subscription" option must be enabled, and if you do not have a Self-Ordering Terminal (SOT) with us, the "SOT Login" option must also be disabled.
64. To achieve greater reach, you can link your social media pages in the footer. Enter the URL of your pages in the corresponding field.
65. Example of marketing and social media links in the footer.
66. If you have an app included in your package, you can add the links to the Google Play Store and App Store here so they are also displayed in the footer.
To suggest installing the app when someone visits your webshop, check the "Suggest app installation" box.
Tracking
67. To track webshop usage, you can enter the various tag IDs here. Note that to use Google tags, you must activate the checkbox for consent to the use of Google Analytics.
68. Please familiarize yourself with the cookie settings, as you are responsible for them.