Dodawanie własnej pozycji menu
Wyświetl menu dokładnie tam, gdzie chcesz, dodając własny kontener do kodu szablonu.
Użyj tej metody, gdy szablon nie ma elementu menu w wybranym miejscu lub jego nagłówek jest zbyt niestandardowy dla innych opcji Pozycji. Dodajesz pusty kontener do kodu szablonu, a potem wskazujesz go w opcji Pokaż menu na tym selektorze CSS.
Dodawanie kontenerów i wskazywanie ich w aplikacji
-
Otwórz kod szablonu
Przejdź do Sklep online > Szablony, kliknij … przy szablonie i wybierz Edytuj kod.
-
Dodaj kontenery menu
Wklej pusty kontener w miejscu, w którym ma się pojawić każde menu, a potem kliknij Zapisz. Możesz użyć dowolnego ID; to tylko przykłady:
<div id="GloboDesktopMenu"></div><div id="GloboMobileMenu"></div>- Komputer: zwykle w pliku sekcji nagłówka (np.
sections/header.liquid), w miejscu nawigacji. - Telefon: zwykle w pliku szuflady menu szablonu lub w
layout/theme.liquid.
- Komputer: zwykle w pliku sekcji nagłówka (np.
-
Wpisz kontenery w aplikacji
W edytorze menu otwórz kartę Ustawienia i w sekcji Pozycja wybierz Pokaż menu na tym selektorze CSS. Wpisz
#GloboDesktopMenuw polu Selektor CSS menu głównego i#GloboMobileMenuw polu Selektor CSS menu mobilnego.Wpisz identyfikatory kontenerów w dwóch polach selektorów CSS -
Zapisz, opublikuj i sprawdź
Kliknij Zapisz, a potem opublikuj menu. Sprawdź sklep na komputerze i na telefonie.
Dobrze wiedzieć
- Tylko jeden układ — dodaj jeden kontener, a drugie pole zostaw puste.
- Istniejąca zawartość jest zastępowana — aplikacja wypełnia każdy kontener i zastępuje wszystko, co jest w środku.
- Menu szablonu zostaje — ukryj je lub usuń w kodzie albo w ustawieniach szablonu, jeśli nie chcesz mieć obu.
- Dla każdego szablonu osobno — zmiany w kodzie dotyczą tylko edytowanego szablonu. Dodaj kontenery ponownie, jeśli zmienisz lub zaktualizujesz szablon.
Rozwiązywanie problemów
Menu mobilne się nie pojawia
Szablon może budować szufladę później za pomocą JavaScriptu. Przenieś kontener mobilny do kodu, który zawsze jest na stronie, np. layout/theme.liquid.
Nic się nie wyświetla
Upewnij się, że osadzenie aplikacji jest włączone w tym szablonie. W konsoli przeglądarki sprawdź, czy document.querySelector('#GloboDesktopMenu') znajduje Twój kontener.
Czy to było pomocne?
Dziękujemy za opinię! Powiedz nam, czego zabrakło
Zgłoś problem