Skonfiguruj rozwijane menu w sklepie online

Za pomocą rozwijalnych menu można grupować produkty, kolekcje lub strony, co ułatwia klientom nawigację w sklepie online. Na przykład, jeśli masz dużo produktów, możesz dodać je do kolekcji, a następnie użyć rozwijanego menu z menu głównego, aby uporządkować kolekcje. Dzięki temu klient łatwiej znajdzie produkt, którego szuka.

Można również dodawać, usuwać lub edytować pozycje w rozwijanych lub domyślnych menu sklepu.

Menu sklepu online można przeglądać i zmieniać na stronie Zawartość > Menu w panelu administracyjnym Shopify.

Zagnieżdżanie pozycji w rozwijalnych menu

Rozwijane menu można budować poprzez tworzenie lub przesuwanie pozycji menu w taki sposób, aby były one zagnieżdżone poniżej pozycji najwyższego poziomu. Pozycja najwyższego poziomu wyświetla się w głównym menu sklepu online, a zagnieżdżone pozycje menu w rozwijanym menu. Pozycja najwyższego poziomu może mieć maksymalnie dwa poziomy zagnieżdżonych rozwijanych menu.

Wszystkie szablony będą wyświetlać zagnieżdżone pozycje jako rozwijane menu z menu głównego, a niektóre szablony będą wyświetlać zagnieżdżone pozycje jako rozwijane menu w innych lokalizacjach.

Wygląd menu głównego i menu rozwijanych w różnych lokalizacjach sklepu online zależy od szablonu. W niektórych szablonach obok nazwy menu rozwijanego w menu głównym jest wyświetlana ikona wskazująca klientom, że w danym miejscu znajduje się menu rozwijane.

Dodaj rozwijalne menu z menu głównego

Istnieje możliwość dodania rozwijanego menu z dowolnej pozycji w menu głównym.

Kroki:

Pulpit
  1. W panelu administracyjnym Shopify przejdź do opcji: Zawartość > Menu.

  2. Kliknij nazwę głównego menu.

  3. Wybierz jedną z pozycji menu jako nagłówek rozwijanego menu lub dodaj nową pozycję menu. Jeśli chcesz, aby nagłówek nie zawierał żadnego aktywnego linku, wtedy wprowadź # w polu Wyszukaj lub wklej link dla pozycji menu nagłówka.

  4. Aby dodać pozycję w menu rozwijanym, wykonaj poniższe zadania:

    1. Kliknij Dodaj pozycję menu.
    2. W polu Nazwa wprowadź nazwę pozycji menu.
    3. W polu Wyszukaj lub wklej link wprowadź lub wybierz miejsce docelowe dla pozycji menu.
  5. Kliknij opcję Dodaj, a następnie kliknij Przeciągnij i przeciągnij pozycję menu, aby umieścić ją pod pozycją menu nagłówka.

  6. Kliknij Zapisz menu.

iPhone
  1. W aplikacji Shopify naciśnij przycisk Menu poziome.

  2. Naciśnij Zawartość > Menu.

  3. Naciśnij nazwę menu głównego.

  4. Wybierz jedną z pozycji menu jako nagłówek rozwijanego menu lub dodaj nową pozycję menu, która będzie nagłówkiem. Jeśli chcesz, aby nagłówek nie zawierał żadnego aktywnego linku, wtedy wprowadź # w polu Wyszukaj lub wklej link dla pozycji menu nagłówka.

  5. Aby dodać pozycję w menu rozwijanym, wykonaj poniższe zadania:

    1. Naciśnij opcję Dodaj pozycję menu.
    2. W polu Nazwa wprowadź nazwę pozycji menu.
    3. W polu Wyszukaj lub wklej link wprowadź lub wybierz miejsce docelowe dla pozycji menu.
  6. Kliknij opcję Dodaj, a następnie kliknij Przeciągnij i przeciągnij pozycję menu, aby umieścić ją pod pozycją menu nagłówka.

  7. Naciśnij Zapisz.

Android
  1. W aplikacji Shopify naciśnij przycisk Menu.

  2. Naciśnij Zawartość > Menu.

  3. Naciśnij nazwę menu głównego.

  4. Wybierz jedną z pozycji menu jako nagłówek rozwijanego menu lub dodaj nową pozycję menu, która będzie nagłówkiem. Jeśli chcesz, aby nagłówek nie zawierał żadnego aktywnego linku, wtedy wprowadź # w polu Wyszukaj lub wklej link dla pozycji menu nagłówka.

  5. Aby dodać pozycję w menu rozwijanym, wykonaj poniższe zadania:

    1. Naciśnij opcję Dodaj pozycję menu.
    2. W polu Nazwa wprowadź nazwę pozycji menu.
    3. W polu Wyszukaj lub wklej link wprowadź lub wybierz miejsce docelowe dla pozycji menu.
  6. Kliknij opcję Dodaj, a następnie kliknij Przeciągnij i przeciągnij pozycję menu, aby umieścić ją pod pozycją menu nagłówka.

  7. Naciśnij .

Integracja menu stopki

Menu rozwijane można również zaimplementować w menu stopki.

Kroki:

  1. W panelu administracyjnym Shopify przejdź do opcji: Zawartość > Menu.
  2. Opcjonalnie: Postępuj zgodnie z tymi samymi zasadami zagnieżdżania używanymi dla menu głównego, takimi jak przeciąganie pozycji menu pod pozycją nagłówka w celu utworzenia struktury rozwijanej, klikając Przeciągnij i przeciągając pozycje w odpowiednie miejsce.
  3. Wprowadź # w polu Link w przypadku pozycji nagłówka, które nie powinny prowadzić do strony (na przykład nagłówki „Pomoc techniczna” lub „Przeglądaj”).

Informacje dotyczące zgodności szablonu

Zapoznaj się z poniższymi informacjami dotyczącymi dodawania menu rozwijanych do szablonu:

  • Większość szablonów obsługuje do dwóch poziomów zagnieżdżonych menu rozwijanych. Sprawdź dokumentację szablonu lub przetestuj elementy zagnieżdżone, aby potwierdzić ich zgodność.
  • Niektóre szablony mogą wymagać dostosowania CSS w celu poprawy użyteczności na urządzeniach mobilnych. Nie dostosowuj szablonu, jeśli nie znasz jego kodu. Dowiedz się więcej o dostosowywaniu szablonu.

Ustalenie, czy szablon obsługuje zagnieżdżone menu rozwijane

Aby określić, czy bieżący szablon obsługuje maksymalną liczbę zagnieżdżonych poziomów menu rozwijanego, które chcesz wdrożyć, możesz skorzystać z następujących zasobów:

  1. Sprawdź dokumentację swojego szablonu: Przejrzyj dokumentację szablonu, aby uzyskać szczegółowe informacje o możliwościach menu i obsługiwanych poziomach zagnieżdżenia.

  2. Przetestuj pozycje zagnieżdżone: Utwórz testową strukturę menu z żądaną liczbą zagnieżdżonych poziomów i sprawdź, czy wyświetla się ona poprawnie zarówno na komputerach, jak i na urządzeniach mobilnych.

Większość szablonów obsługuje do dwóch poziomów zagnieżdżonych menu rozwijanych. Jeśli masz problemy z menu rozwijanymi, sprawdź, czy szablon obsługuje liczbę zagnieżdżonych poziomów, które próbujesz wdrożyć. Niektóre szablony mogą wymagać dodatkowego dostosowania w celu obsługi wielu poziomów zagnieżdżenia.

Najlepsze praktyki dotyczące menu rozwijanych

Zapoznaj się z poniższymi najlepszymi praktykami, aby utworzyć użyteczną strukturę menu, która działa prawidłowo na wszystkich urządzeniach.

  • Używaj etykiet opisowych, takich jak „Kategorie produktów” w przypadku pozycji menu najwyższego poziomu z linkami #.

  • Upewnij się, że menu są zoptymalizowane pod kątem urządzeń mobilnych. Możesz przetestować menu na urządzeniach mobilnych, aby potwierdzić, że menu rozwijane działają zgodnie z oczekiwaniami.

  • Dodaj maksymalnie siedem pozycji menu najwyższego poziomu, aby uniknąć zbyt dużej liczby elementów.

  • Używaj przejrzystych i opisowych tytułów linków. Na przykład „Kolekcje” i „Letnie sukienki”.

Rozwiązywanie typowych problemów

Zapoznaj się z poniższymi rozwiązaniami typowych problemów, które możesz napotkać podczas konfigurowania menu nawigacji:

  • Przekierowania w menu na urządzeniach mobilnych: Jeśli link menu najwyższego poziomu przekierowuje po jego naciśnięciu do nowej strony, sprawdź menu w panelu administracyjnym Shopify, aby potwierdzić, że pole linku menu to #.

  • Problemy z widocznością: jeśli elementy zagnieżdżone nie są wyświetlane, upewnij się, że są one przeciągnięte w całości pod element nagłówka i wcięte w interfejsie Menu. Upewnij się, że szablon obsługuje skonfigurowaną liczbę poziomów zagnieżdżenia.

  • Zgodność szablonu: Jeśli masz problemy z menu rozwijanymi, sprawdź, czy szablon obsługuje liczbę zagnieżdżonych poziomów, które próbujesz wdrożyć. Niektóre Szablony mogą wymagać dodatkowych ustawień w celu obsługi wielu poziomów zagnieżdżenia.

Dostosowywanie kodu szablonu menu rozwijanych

W przypadku szablonów wymagających większego dostosowania można rozważyć dostosowanie kodu szablonu.

Nie możesz znaleźć odpowiedzi, których szukasz? Jesteśmy tutaj, aby Ci pomóc.