Przejdź do głównej zawartości
Zainstaluj aplikację
Polski

Dodawanie własnej pozycji menu

Wyświetl menu dokładnie tam, gdzie chcesz, dodając własny kontener do kodu szablonu.

Poradnik Wszystkie plany 2 min czytania

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

  1. Otwórz kod szablonu

    Przejdź do Sklep online > Szablony, kliknij … przy szablonie i wybierz Edytuj kod.

  2. 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.
  3. Wpisz kontenery w aplikacji

    W edytorze menu otwórz kartę Ustawienia i w sekcji Pozycja wybierz Pokaż menu na tym selektorze CSS. Wpisz #GloboDesktopMenu w polu Selektor CSS menu głównego i #GloboMobileMenu w polu Selektor CSS menu mobilnego.

    Wpisz identyfikatory kontenerów w dwóch polach selektorów CSS
  4. 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?

Zgłoś problem