Adrian Zblewski · Founder GrowCommerce · Platynowy Partner ShoperOstatnio przeglądając grupę FB poświęconą Shoperowi trafiłem na zapytanie "W jaki sposób zmienić wyświetlaną nazwę kategorii w belce menu?".
Generalnie rzecz ujmując cały skrypt jak i edycja jest super łatwa. Dodatkowo instrukcja jest uniwersalna i pozwala na wrzucenie kilku smaczków! Przed przystąpieniem do modyfikacji zadbaj o kopię zapasową obecnego szablonu. Tę możesz wykonać zgodnie z instrukcją z poprzedniego tutoriala. Link tutaj. Lub obejrzyj sam materiał video, jeśli jesteś już ciut bardziej oblatany. Tutaj. Cały temat porządkuje przewodnik „SEO sklepu na Shoperze”.
Jeśli masz już wykonany swój backup oto kawałek kodu, który potrzebujesz:
$("li#hcategory_178 > h3 > a > span").text("BLACK FRIDAY");
Najpierw ten kod omówmy. Mamy dwa człony. Pierwszy zaczyna się od "namierzania" naszego elementu i zaczyna się od li#hcategory_178. Wskazujemy o jaki element nam chodzi. Jeśli jesteś zaznajomiony z Shoperem, to wiesz że 178 to numer naszej kategorii.
Przejdź do "Obsługa sklepu" -> "Kategorie" i odnajdź naszą kategorię główną.
Po kliknięciu w nią zobaczysz jej ID.
Ważne, piszemy o kategorii głównej, a nie podkategorii. Kategoria główna to ta, która widnieje na pasku menu:
Bierzemy nasz wzór i podstawiamy ID kategorii pod nasz kod:
$("li#hcategory_178 > h3 > a > span").text("BLACK FRIDAY");
Na końcu naszego kodu mamy miejsce na tekst. Standardowo pomiędzy cudzysłowem wstawiamy tekst. Chcąc pójść o poziom wyżej możemy wsadzić tam za tekstem emoji! Do skopiowania emotki ja używam TEJ strony. Możesz użyć czegokolwiek, albo dosłownie skopiować ją z fb. Zaznacz, skopiuj i wklej 🔥.
$("li#hcategory_178 > h3 > a > span").text("BLACK FRIDAY 🔥");
Czas na wklejenie naszego kodu. Przechodzimy kolejno do "Wygląd i treści" -> "Obecny szablon graficzny" -> "Własny skrypt JS".
Jeśli masz tu jakiś kod, wklej nasz nowy jako pierwszy element dodając enterów. Ewentualnie jako ostatni. Wklejenie go w losowym miejscu zmieni działanie kodu istniejącego i naszego w jakiś niespodziewany sposób. Po wklejeniu kliknij "zapisz".
Ten kawałek kodu zadziała dla większości klasycznych szablonów. Dlaczego większości? Bo ustawiliśmy za pomocą znaku > kolejność: li z kategorią o danym ID, dalej MUSI znajdować się H3 (nagłówek menu), dalej (ponownie znak > wymusza) element "a" i finalnie chodzi nam o element "span". Jeśli elementy nie znajdą się idealnie w tej kolejności to nie zadziała.
Jeśli planujesz zmienić nowości lub promocje, to te (jak słusznie zauważył Patryk) nie są widoczne w kategoriach, więc podejrzenie ich ID jest nieco trudniejsze. W związku z tym skorzystaj z uniwersalnego "gotowca". Pomocny będzie też tekst „Noindex i nofollow w sklepie Shoper”.
$('.menu-list a > span:contains("Promocje")').text('BLACK FRIDAY 🔥');
$('.menu-list a > span:contains("Nowości")').text('BLACK FRIDAY 🔥');
Przy tak skonstruowanych nowościach czy promocji nie musisz zmieniać już nic poza swoim tekstem. Skrypt szuka odpowiedniego elementu zawierającego dany tekst, więc bezbłędnie odnajdzie wspomniane i je podmieni w naszym menu.
Jak sprawdzić czy to zadziała? Postępuj zgodnie z instrukcją i wklej swój kawałek kodu. Od razu po odświeżeniu sklepu zobaczysz efekt - działa czy nie.
Jeśli nie działa, kliknij prawym przyciskiem myszy na element menu i "Zbadaj".
Następnie krok po kroku sprawdź jakie elementy nachodzą po sobie:
Bonusowy kod: jak zmienić tytuł, ale wewnątrz menu?
Przyjmijmy, że nie masz naszego pacjenta w "belce" menu, a w środku po rozwinięciu. W takiej sytuacji instrukcja będzie identyczna, jedynie odrobinkę zmieni się kod:
$("li#hcategory_238 > span > a > span").text("BLACK FRIDAY");
Sprawdź czy działa jak chciałeś, jeśli nie - podeślij nam maila na [email protected], a bezpłatnie pomożemy Ci z taką drobnostką.
Szykując się na Black Friday pamiętaj, że możesz pobrać bezpłatny szablon do grafiki. Szablon jest w formacie PSD, więc wystarczy podmienić tekst (lub nie :).
Bez problemu zrobisz to sam jeśli masz Photoshopa, lub za kilka złotówek zmieni Ci to każdy student. Przejdź tutaj. Ten wątek rozwijamy w artykule „Przekierowania 301 w sklepie Shoper — zmiana URL, usunięte produkty i migracja”.
P.S. całość naszego sklepu oparta jest o nasz nowy szablon: Modern 3.0.
Identyczny możesz zakupić tutaj. Praktyczne wskazówki zebraliśmy w poradniku „Shoper SEO 2026: alternatywne nazwy kategorii i noindex”.
Przeczytaj też
Adrian ZblewskiFounder GrowCommerce — Platynowy Partner ShoperFounder GrowCommerce — Platynowego Partnera Shoper z 8-letnim doświadczeniem i ponad 1020 wdrożeniami. GrowCommerce tworzy szablony rodziny Modern (Modern 3.0 Storefront), aplikacje GrowX i GrowMail — e-mail marketing dla Shopera.Wszystkie wpisy autora
