Wygląd menu zamówień online — style kategorii i produktów

W konfiguratorze wyglądu ustawisz, jak klienci widzą menu na stronie zamówień online: jak wyglądają kategorie, czy produkty są listą czy kafelkami i jaki mają styl. Wszystkie style dopasowują się do telefonu i korzystają z kolorów, które wybierzesz.

Gdzie to ustawić

1. Wejdź w Strona internetowa → Konfigurator i ustawienia.
2. Na karcie strony kliknij Personalizuj wygląd. Konfigurator otworzy się w nowej karcie.
3. W podglądzie strony kliknij w menu przycisk Zamów online.
4. Po lewej pojawi się panel Konfiguracja menu.
5. Wybierz ustawienia i kliknij Opublikuj.

Podgląd po prawej zmienia się od razu. Ikoną telefonu u góry sprawdzisz, jak menu wygląda na smartfonie.

Styl kategorii

• Z produktami – każda kategoria to rozwijana sekcja ze zdjęciem, nazwą, liczbą pozycji i opisem, a produkty są pod nią. Gdy masz więcej niż 3 kategorie i więcej niż 15 produktów, sekcje są na start zwinięte.
• Bez tła – pasek zakładek nad produktami. Aktywna kategoria jest pogrubiona i podkreślona kolorem przycisku, obok nazwy widać liczbę produktów.
• Kafelki – kategorie jako zaokrąglone przyciski, aktywna w kolorze przycisku.
• Z ikoną – jak kafelki, ale z ikoną albo zdjęciem kategorii. Kategoria bez zdjęcia dostaje neutralną ikonę.

W stylach z paskiem (Bez tła, Kafelki, Z ikoną) pasek przykleja się pod górnym menu strony podczas przewijania. Kliknięcie kategorii pokazuje tylko jej produkty, a ponowne kliknięcie znowu pokazuje wszystkie.

Układ produktów

• Lista – jeden produkt w wierszu.
• Kafelki – siatka kart. Na telefonie karty układają się w jedną lub dwie kolumny, zależnie od stylu.

Styl produktów

Każdy styl działa w obu układach.

Lekki

Zdjęcie po lewej, pod nazwą krótki opis, na dole cena i okrągły przycisk +. To domyślny styl nowych stron.

Klasyczny

Bez ramki karty: duże zdjęcie, nazwa, opis, cena i przycisk Dodaj do koszyka na całą szerokość. Gdy produkt jest już w koszyku, przycisk pokazuje liczbę sztuk.

Nowoczesny

Okrągłe zdjęcie na tle w odcieniu koloru przycisku, a na dole karty pasek Dodaj do koszyka. W liście przycisk dodawania jest kolorową kolumną po prawej.

Duży obraz

Zdjęcie gra główną rolę. Cena i przycisk + są na zdjęciu, pod nim nazwa i opis. Najlepiej wygląda, gdy masz dobre zdjęcia wszystkich dań.

Bez obrazu

Dla lokali bez zdjęć produktów. Lista wygląda jak karta w restauracji: nazwa, kropki i cena w jednej linii, a pod spodem opis. Kafelki to karty bez zdjęć z paskiem w kolorze przycisku u góry.

Kolory

• Tło – tło całej strony z menu.
• Tło produktu – tło kart produktów.
• Nazwa produktu – kolor tekstu. Z niego liczone są też szarości opisów i delikatne obramowania.
• Nazwa kategorii i Tło kategorii – kolory rozwijanych sekcji w stylu Z produktami.
• Przycisk główny – kolor tła i czcionki przycisków, aktywnej kategorii, etykiet i ceny promocyjnej.

Jeśli strona powstała z gotowego szablonu, karty przejmują też jego zaokrąglenia i czcionkę nagłówków.

Co klient widzi na karcie produktu

• Opis – pole Krótki opis z produktu, maksymalnie dwie linie.
• Etykiety produktu (np. „Wege”, „Ostre”) – małe plakietki na karcie albo na zdjęciu.
• Promocja – stara cena przekreślona, nowa w kolorze przycisku.
• Warianty (np. rozmiary) – lista do wyboru. Wybór wariantu otwiera okno produktu z tym wariantem. W kafelkach przy cenie widać „od” i najniższą cenę.
• Wyprzedane – karta jest wyszarzona, ma plakietkę Wyprzedane i nie da się jej dodać do koszyka.
• W koszyku – przy przycisku dodawania pojawia się liczba sztuk tego produktu w koszyku.

Kliknięcie w dowolne miejsce karty działa tak samo jak przycisk dodawania: otwiera okno produktu, w którym klient wybiera dodatki i dodaje go do koszyka.