Konfiguracja menu rozwijanych w sklepie online

Możesz używać menu rozwijanych do grupowania produktów, kolekcji lub stron, aby ułatwić klientom poruszanie się po sklepie online. Na przykład, jeśli masz wiele produktów, możesz dodać je do kolekcji, a następnie za pomocą menu rozwijanego w menu głównym uporządkować kolekcje. Ułatwi to klientom znalezienie produktów, których szukają.

Możesz także dodawać, usuwać lub edytować pozycje menu w menu rozwijanych lub w menu domyślnych.

Możesz wyświetlać i zmieniać menu sklepu online, przechodząc do opcji Treść > Menu w panelu administracyjnym Shopify.

Zagnieżdżanie pozycji menu w celu tworzenia menu rozwijanych

Możesz tworzyć menu rozwijane, tworząc lub przenosząc pozycje menu tak, aby były zagnieżdżone pod pozycją najwyższego poziomu. Pozycja najwyższego poziomu jest wyświetlana w menu głównym sklepu online, a zagnieżdżone pozycje menu są wyświetlane w menu rozwijanym. Pozycja najwyższego poziomu może mieć do dwóch poziomów zagnieżdżonych menu rozwijanych.

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

Menu główne i menu rozwijane są wyświetlane w różnych miejscach w sklepie online, w zależności od używanego szablonu. W niektórych szablonach obok nazwy menu rozwijanego w menu głównym wyświetlana jest ikona, aby pomóc klientom rozpoznać, że w tym miejscu znajduje się menu rozwijane.

Dodawanie menu rozwijanego z menu głównego

Możesz dodać menu rozwijane z dowolnej pozycji menu w menu głównym.

Kroki:

Integracja z menu stopki

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

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Treść > Menu.
2. Opcjonalnie: Postępuj zgodnie z tymi samymi zasadami zagnieżdżania, które obowiązują w przypadku menu głównych, na przykład przeciągając pozycje menu pod pozycję nagłówka w celu utworzenia struktury rozwijanej, klikając ikonę i przeciągając pozycje na właściwe miejsce.
3. Wpisz # w polu Link dla pozycji nagłówka, które nie powinny odsyłać do strony (na przykład nagłówków „Pomoc” lub „Eksploruj”).

Kwestie dotyczące zgodności szablonu

Zapoznaj się z poniższymi kwestiami 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 zagnieżdżone pozycje, aby potwierdzić zgodność.
• Niektóre szablony mogą wymagać dostosowania kodu 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.

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

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

1. Sprawdź dokumentację szablonu: Zapoznaj się z dokumentacją szablonu, aby uzyskać szczegółowe informacje na temat możliwości menu i obsługiwanych poziomów zagnieżdżenia.
2. Przetestuj zagnieżdżone pozycje: Utwórz testową strukturę menu z pożądaną liczbą zagnieżdżonych poziomów i sprawdź, czy wyświetla się ona prawidłowo 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 taką liczbę poziomów zagnieżdżenia, jaką próbujesz wdrożyć, ponieważ niektóre szablony mogą wymagać dodatkowego dostosowania, aby obsługiwać wiele 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 będzie dobrze działać na wszystkich urządzeniach:

• Używaj opisowych etykiet, takich jak „Kupuj według kategorii”, dla 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 rozwijają się zgodnie z oczekiwaniami.
• Dodaj siedem lub mniej pozycji menu najwyższego poziomu, aby uniknąć przeładowania.
• Używaj jasnych i opisowych tytułów linków. Na przykład „Kolekcje” i „Letnie sukienki”.
• Każde menu może mieć do 10 000 pozycji, a w sklepie może być łącznie do 1000 menu. Każda pozycja menu z podpozycjami w menu rozwijanym jest wliczana do tego limitu jako oddzielne menu.

Dostępność menu rozwijanego

W większości szablonów nagłówki menu rozwijanych są zaimplementowane jako przyciski, a nie klikalne linki. Jest to celowe rozwiązanie w zakresie dostępności, które pomaga klientom korzystającym z technologii asystującej zrozumieć strukturę nawigacji.

Gdy pozycja menu najwyższego poziomu steruje rozwijanym podmenu, działa ona jako przycisk rozwijający menu, a nie jako link do nowej strony. Takie podejście zapewnia klientom korzystającym z czytników ekranu lub innych urządzeń asystujących możliwość prawidłowego poruszania się po systemie menu sklepu.

Jeśli chcesz, aby klienci mieli dostęp do strony głównej kategorii (np. „Wszystkie produkty” lub „Wszystkie kolekcje”), dodaj ją jako pierwszą pozycję w menu rozwijanym, zamiast ustawiać nagłówek jako klikalny.

Rozwiązywanie częstych problemów

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

• Przekierowania w menu mobilnym: Jeśli link menu najwyższego poziomu przekierowuje na nową stronę po jego naciśnięciu, sprawdź menu w panelu administracyjnym Shopify, aby potwierdzić, że pole linku menu ma wartość #.

• Problemy z widocznością: Jeśli zagnieżdżone pozycje nie są wyświetlane, upewnij się, że są one w całości przeciągnięte pod pozycję nagłówka i mają wcięcie 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 taką liczbę poziomów zagnieżdżenia, jaką próbujesz wdrożyć. Niektóre szablony mogą wymagać dodatkowego dostosowania, aby obsługiwać wiele poziomów zagnieżdżenia.

• Zablokowane tworzenie zagnieżdżonego menu: Jeśli pojawi się błąd „Menu nie może zawierać zagnieżdżonych menu. Wyraź zgodę na funkcję zagnieżdżonej nawigacji, aby z niej korzystać”, może to oznaczać, że w sklepie trzeba aktywować funkcję zagnieżdżonej nawigacji. Zazwyczaj dotyczy to sklepów utworzonych przed 2018 rokiem. Jeśli napotkasz ten błąd, skontaktuj się z Pomocą techniczną Shopify.

• Wyświetlanie nieprawidłowego menu: Jeśli masz wiele linków do nawigacji prowadzących do tej samej strony (np. strony głównej), szablon może wyświetlić nieprawidłowe podmenu. Upewnij się, że każda sekcja nawigacji prowadzi do unikalnej strony, aby uniknąć nieporozumień.

• Znikające pozycje menu: Jeśli linki menu znikają, mimo że nie zostały usunięte, sprawdź, czy nie usunięto produktów, kolekcji lub stron, do których prowadziły linki w pozycjach menu. Usunięcie powiązanego zasobu powoduje również usunięcie pozycji menu.

Dostosowywanie kodu szablonu dla menu rozwijanych

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