Dolny pasek nawigacyjny na telefon

Poradnik Pro Navigation 8 min czytania

Pasek pozostaje na ekranie podczas przewijania, jak pasek kart w aplikacji mobilnej, i daje dostęp jednym dotknięciem do strony głównej, menu, koszyka, wyszukiwania, czatu lub połączenia telefonicznego. Element może też otwierać małe podmenu, np. element Więcej z linkami do konta, kontaktu i FAQ.

Edytor dolnego paska: karty ustawień (1) i podgląd na żywo (2). Urządzenie podglądu przełączysz przyciskami w lewym dolnym rogu podglądu.

Karty ustawień to Elementy menu, Ogólne, Typografia, Kolory, Pozycja, Zaawansowane i Historia wersji.

Tworzenie dolnego paska

1. Utwórz pasek

   Na Stronie głównej aplikacji kliknij Dodaj dolną nawigację — albo w Menedżerze menu kliknij Utwórz menu i wybierz Dolny pasek mobilny.

   

   Strona główna: (1) szybkie akcje do tworzenia lub importowania menu, (2) przycisk włączający osadzenie aplikacji

2. Skonfiguruj elementy

   W karcie Elementy menu edytuj domyślne elementy i dodaj własne. Zobacz Dodawanie i edytowanie elementów.

   

   Edytor dolnego paska: karty ustawień (1) i podgląd na żywo (2). Urządzenie podglądu przełączysz przyciskami w lewym dolnym rogu podglądu.

3. Nadaj wygląd paskowi

   Dostosuj karty Ogólne, Typografia i Kolory. Zobacz Wygląd paska.

   

   Ustawienia ogólne, w tym pozycja i styl otwierania podmenu.

4. Wybierz, gdzie się pojawia

   W karcie Pozycja wybierz urządzenia i położenie na ekranie. Zobacz Wybór miejsca wyświetlania paska.

   

   Włącz pasek na telefonie (1) i komputerze (2), a potem wybierz pozycję.

5. Zapisz i opublikuj

   Kliknij Zapisz, a potem Opublikuj w prawym górnym rogu. Zobacz Publikowanie paska.

Dodawanie i edytowanie elementów

1. Pokaż działania elementu

   W karcie Elementy menu najedź kursorem na element, aby zobaczyć Edytuj, Duplikuj i Usuń. Przeciągnij element za uchwyt, aby zmienić jego kolejność.

   

   Najedź kursorem na element, aby go edytować, zduplikować lub usunąć.

2. Dodaj elementy i podmenu

   Kliknij Dodaj element, aby dodać element na danym poziomie, lub Dodaj podmenu przy elemencie, aby zagnieździć pod nim elementy. Zagnieżdżone elementy otwierają się jako podmenu, do trzech poziomów.

3. Ustaw ikonę, tytuł i link

   Kliknij Edytuj, aby otworzyć panel Edytuj element menu. Wybierz Ikonę (kliknij Zmień), wpisz Tytuł, a potem kliknij pole Link.

   

   Kliknij pole Link, aby wybrać akcję elementu.

4. Wybierz akcję

   W oknie Wybierz link kliknij Wybierz obok akcji (1). Pole Link (2) dostanie początek linku, np. /collections/ dla Produkty według kolekcji. Uzupełnij go zgodnie z kolumną Składnia, np. /collections/summer-sale, i kliknij Aktualizuj (3).

   

   Kliknij Wybierz (1), uzupełnij link (2), a potem kliknij Aktualizuj (3).

Ustawienia elementu

Ikona

Kliknij Zmień, aby wybrać ikonę lub przesłać obraz.

Tytuł

Tekst pod ikoną.

Link

Co się dzieje po dotknięciu. Kliknij, aby otworzyć okno Wybierz link (zobacz Akcje elementów).

Otwórz w nowej karcie

Otwiera link w nowej karcie przeglądarki.

Opis

Opcjonalny krótki tekst wyświetlany z elementem.

Rozmiar ikony

Rozmiar ikony w px.

Ramka > Promień obramowania

Zaokrągla rogi ramki elementu, od 0 do 100 px.

Ramka > Wypełnienie ramki

Odstęp wewnątrz ramki elementu, od 0 do 100 px.

Ramka > Pozycja

Przesuwa element w lewo (wartości ujemne) lub w prawo (dodatnie), od -100 do 100 px.

Kolor

Kolory tekstu, ikony, tła ikony i tła tylko dla tego elementu, każdy z kolorem po najechaniu. Wyczyść ustawienia przywraca kolory paska.

Plakietka

Mała etykieta na elemencie, z polami Tytuł, Kolor tekstu plakietki i Kolor tła plakietki.

Widoczność

Ukrywa element na niektórych urządzeniach lub dla niektórych klientów albo pokazuje go tylko między dwiema datami. Zobacz Reguły wyświetlania.

Zaawansowane

Dodatkowa nazwa klasy dodaje klasę CSS dla niestandardowego CSS. Divide (separator) dodaje linię oddzielającą obok elementu.

Akcje elementów

Okno Wybierz link grupuje akcje w osiem sekcji. Kliknij ikonę informacji obok akcji, aby zobaczyć przykład.

1. Link do wewnętrznych stron Twojego sklepu

Dokładny krótki adres URL /[your-url], strona główna /, wszystkie produkty /collections/all, produkty według kolekcji /collections/[collection-handle], strona produktu /products/[your-product-shorturl], wszystkie posty na blogu /blogs/news, strona posta /blogs/news/[your-blog-shorturl], strona /pages/[your-page-shorturl], strona koszyka /cart, strona wyszukiwania /search, formularz kontaktowy /pages/contact.

2. Otwórz panele (zgodne z popularnymi motywami)

Otwórz menu (mobilne) gm-open:MobileMenu, Otwórz koszyk gm-open:Cart, Otwórz wyszukiwanie gm-open:Search.

3. Otwórz inne aplikacje (np. Shopify Inbox...)

Otwórz Chatbox gm-open:Inbox otwiera czat Shopify Inbox.

4. Przewiń stronę

Przewiń na górę gm-scroll:Top, przewiń na dół gm-scroll:Bottom, przewiń do elementu na stronie gm-scroll:OnPage(htmlElement).

5. Wywołanie funkcji JavaScript

gm-javascript:Function uruchamia funkcję JavaScript w Twojej witrynie.

6. Narzędzia wsparcia

Połączenie telefoniczne tel:, wysłanie SMS-a sms:, wysłanie e-maila mailto:, czat przez Messenger, WhatsApp, Telegram, Line lub Zalo.

7. Udostępnianie

Kopiuj bieżący adres URL gm-share:CopyUrl, Udostępnij na Facebooku gm-share:Facebook, Udostępnij na X (Twitter) gm-share:X.

8. Linki do zewnętrznych witryn

Pełny adres URL (dowolny pełny adres internetowy), Nie przekierowuj #.

Sekcje od 2 do 4: otwieranie paneli, inne aplikacje i przewijanie.

Sekcje 5 i 6: JavaScript i narzędzia wsparcia.

Sekcje 7 i 8: udostępnianie i linki zewnętrzne.

Przykłady:

• gm-scroll:Top(150) — przewija na górę, zostawiając margines 150 px.
• gm-scroll:OnPage(#page-title) — przewija do elementu o ID page-title.
• tel:+0123456789 — dzwoni pod ten numer.
• sms:+012345678?body=I need help — otwiera SMS z wpisanym tekstem.
• https://wa.me/0123456789 — otwiera czat WhatsApp. Użyj numeru kierunkowego kraju bez +.

Wygląd paska

Ustawienia ogólne, w tym pozycja i styl otwierania podmenu.

Ogólne

Menu główne (poziom 1)

Zaokrąglenie menu

Promień narożników paska, od 0 do 50 px.

Odstęp między elementami

Odstęp między elementami, od 0 do 50 px.

Wypełnienie w poziomie · Wypełnienie w pionie

Poziomy i pionowy odstęp wewnątrz każdego elementu, od 0 do 100 px.

Użyj cienia

Dodaje cień wokół paska.

Podmenu (poziomy 2 i 3)

Pozycja podmenu

Do lewej, Do prawej, Do środka lub Pełna szerokość.

Styl otwierania podmenu

Rozwijane lub Wysuwane.

Szerokość podmenu

Od 100 do 900 px.

Wypełnienie w poziomie · Wypełnienie w pionie

Poziomy i pionowy odstęp wewnątrz każdego elementu podmenu, od 0 do 100 px.

Ikona i tekst

Rozmiar ikony · Rozmiar ikony podmenu

Rozmiary ikon na pasku i w podmenu, od 0 do 100 px.

Odstęp w menu głównym: tekst - ikona · Odstęp w podmenu: tekst - ikona

Odstęp między ikoną a tekstem, od 0 do 50 px.

Zaawansowane

Ukryj tekst menu

Na pasku tylko ikony.

Ukryj tekst podmenu

W podmenu tylko ikony.

Ukryj opis podmenu

Ukrywa opisy elementów w podmenu.

Typografia

Ustaw Rodzinę czcionek, Font weight (grubość czcionki) i Rozmiar czcionki dla grup Menu główne, Tekst podmenu i Opis podmenu. Opcja Użyj niestandardowej czcionki działa tak jak w artykule Dostosowywanie czcionek menu.

Kolory

Kolor menu głównego

Kolor tekstu, Hover text color, Icon color, Hover icon color, Kolor tła, Hover background color (kolory tekstu, ikony i tła, normalnie i po najechaniu).

Kolor podmenu

Te same sześć kolorów dla podmenu.

Pozostałe kolory menu

Description color, Hover description color, Divide color (kolor opisu, opisu po najechaniu i separatora).

Wybór miejsca wyświetlania paska

1. Wybierz urządzenia

   W karcie Pozycja włącz Wyświetl na telefonie (1), Wyświetl na komputerze (2) lub oba.

   

   Włącz pasek na telefonie (1) i komputerze (2), a potem wybierz pozycję.

2. Wybierz pozycję

   Kliknij układ pod każdym przełącznikiem:

   • Telefon — na dole, na górze, pośrodku po lewej, pośrodku po prawej, na dole po lewej lub na dole po prawej.
   • Komputer — na dole pośrodku, na dole po lewej, na dole po prawej, na dole na całą szerokość, pośrodku po lewej lub pośrodku po prawej.

3. Ukrywaj podczas przewijania (opcjonalnie)

   Zaznacz Ukryj podczas przewijania w dół, aby pasek nie zasłaniał treści, gdy klient przewija stronę w dół.

Ustawienia zaawansowane

Dostępność na rynkach

Pokazuje pasek tylko na wybranych rynkach. Zobacz Menu według rynku.

Z-index menu

Kolejność nakładania. Zwiększ, jeśli inne elementy zasłaniają pasek; zmniejsz, jeśli pasek zasłania wyskakujące okna.

Nieprzezroczystość menu

Przezroczystość paska, od 0 do 100%.

Dolny margines

Odstęp między paskiem a dolną krawędzią ekranu.

Arkusz stylów / CSS

Niestandardowy CSS dla paska.

JavaScript

Niestandardowy JavaScript dla paska.

Reguły wyświetlania

Gdzie	Ustawienie	Efekt
Karta Pozycja	Wyświetl na telefonie, Wyświetl na komputerze	Pokazuje lub ukrywa cały pasek na danym urządzeniu.
Karta Zaawansowane	Dostępność na rynkach	Pokazuje cały pasek tylko na wybranych rynkach.
Element > Widoczność	Ukryj na komputerze, Ukryj na urządzeniach mobilnych	Ukrywa jeden element na danym urządzeniu.
Element > Widoczność	Ukryj po zalogowaniu, Pokaż tylko po zalogowaniu	Pokazuje jeden element tylko gościom albo tylko zalogowanym klientom.
Element > Widoczność	Zaplanuj publikację	Pokazuje jeden element tylko między Datą rozpoczęcia a Datą zakończenia.

Publikowanie paska

1. Opublikuj

   Kliknij Zapisz, a potem Opublikuj w prawym górnym rogu, wybierz szablon i potwierdź. Okno działa tak samo jak dla mega menu (zobacz Publikowanie menu). Status zmieni się z Wersja robocza na Aktywne.

   

   Okno publikacji menu: (1) Wybierz motyw, (2) Podgląd i Opublikuj

2. Sprawdź sklep

   Otwórz sklep na telefonie lub w wąskim oknie przeglądarki.

Zmiana lub usunięcie

• Zdejmij go ze sklepu — kliknij Wyłącz na górze edytora.
• Przywróć wcześniejszą wersję — otwórz kartę Historia wersji. Zobacz Historia wersji.

Rozwiązywanie problemów

Pasek nie pojawia się w sklepie

Pasek ładuje się przez osadzenie aplikacji, tak jak wszystkie menu. Upewnij się, że osadzenie aplikacji jest włączone w tym szablonie — zobacz Włączanie osadzenia aplikacji.

Akcja z sekcji Otwórz panele nic nie robi

Akcje Otwórz panele otwierają własną szufladę menu, szufladę koszyka lub wyszukiwanie szablonu, więc działają z popularnymi szablonami. Jeśli w Twoim nic się nie dzieje, użyj linku do strony (np. Strona koszyka /cart) lub skontaktuj się z nami.

Pasek nachodzi na przycisk czatu lub baner cookie

Zwiększ Dolny margines lub zmień Z-index menu w karcie Zaawansowane albo wybierz inną pozycję w karcie Pozycja.

Powiązane strony

• Włączanie osadzenia aplikacjiWłącz osadzenie aplikacji Globo Mega Menu, aby menu mogło ładować się w sklepie.
• Dodawanie ikony do elementu menuPokaż ikonę z biblioteki lub własny przesłany obraz obok tytułu elementu menu.
• Historia wersjiPrzywróć wcześniej zapisaną wersję menu, wczytując ją do edytora i zapisując.
• Plany i rozliczeniaPorównaj plany Globo Mega Menu, rozpocznij bezpłatny okres próbny oraz zmieniaj plan na wyższy lub niższy albo go anuluj.

Czy to było pomocne?

Zgłoś problem