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.

Uwaga

W menu stopki mogą być wyświetlane tylko pozycje najwyższego poziomu. Rozwijanych menu nie można używać w stopce sklepu online.

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

Uwaga

W większości przypadków musisz utworzyć pozycję przed utworzeniem do niej linku. Przykładowo, musisz utworzyć kolekcję, zanim dodasz ją do menu.

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.

Uwaga

Nie zapomnij zaktualizować szablonu, aby wyświetlane były w nim wszystkie trzy poziomy menu w sklepie online.

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 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 .

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 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 .

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 i przeciągnij pozycję menu, aby umieścić ją pod pozycją menu nagłówka.

7. Naciśnij ✓.

Uwaga

Możesz zmienić domyślne menu główne dla większości szablonów, edytując ustawienia w sekcji Nagłówek szablonu.

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 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.

Uwaga

Dostosuj kod szablonu tylko wtedy, gdy czujesz się pewnie w pracy z Liquid, HTML, CSS i JavaScript. Nieprawidłowe zmiany mogą zakłócić działanie Twojego sklepu.