Fragmenty kodu pozwalają Ci dodać do sklepu własny kod HTML, CSS lub JavaScript. Dzięki temu możesz zintegrować zewnętrzne narzędzia analityczne, dodać niestandardowe funkcje lub dostosować wygląd sklepu bez ingerencji w jego podstawową strukturę.
Kiedy warto używać fragmentów kodu
Fragmenty kodu przydają się w wielu sytuacjach. Możesz ich użyć, aby:
Dodać narzędzia analityczne (Google Analytics, Meta Pixel, Hotjar)
Zintegrować chat na żywo lub widget pomocy
Wstawić własne style CSS, które dostosują wygląd elementów sklepu
Dodać skrypty marketingowe, takie jak kody śledzące konwersji
Umieścić własne bannery, komunikaty lub elementy interaktywne
Jak dodać fragment kodu
Przejdź do ustawień
Otwórz panel Shopable i kliknij w ikonę ustawień w lewym menu.
Wybierz „Fragmenty kodu"
W menu ustawień znajdziesz zakładkę „Fragmenty kodu". To tutaj zarządzasz wszystkimi kodami dodanymi do Twojego sklepu.
Dodaj nowy fragment
Kliknij przycisk „Zapisz zmiany" (lub odpowiedni przycisk dodawania). Zobaczysz dwa pola:
Fragment kodu umieszczony w znaczniku
<head>– użyj go do dodania kodów, które powinny załadować się przed wyświetleniem strony. To idealne miejsce na narzędzia analityczne, Meta Pixel, Google Analytics czy inne skrypty śledzące.Fragment kodu umieszczony przed zamykającym znacznikiem
</body>– tutaj dodaj kody, które mają załadować się po głównej treści strony. To dobre miejsce na czaty na żywo, pop-upy czy skrypty, które nie muszą blokować renderowania strony.
Wklej swój kod
Skopiuj kod z narzędzia, które chcesz zintegrować, i wklej go w odpowiednie pole. Upewnij się, że kod jest kompletny i zawiera wszystkie wymagane tagi.
Zapisz zmiany
Kliknij „Zapisz zmiany", aby aktywować fragment. Kod zostanie dodany do wszystkich stron Twojego sklepu.
Ważne: Fragmenty kodu działają globalnie – zostaną dodane na każdej stronie sklepu. Upewnij się, że dodajesz tylko te skrypty, które są Ci potrzebne.
Na co zwrócić uwagę
Sprawdź poprawność kodu
Błędny kod może wpłynąć na działanie sklepu. Przed wklejeniem upewnij się, że kod pochodzi z zaufanego źródła i jest poprawnie sformatowany.
Umieszczaj kody w odpowiednich miejscach
Niektóre skrypty (jak Google Analytics) powinny być w <head>, inne (jak czaty na żywo) lepiej działają przed </body>. Sprawdź dokumentację narzędzia, które integrujesz.
Testuj po dodaniu
Po zapisaniu zmian otwórz swój sklep i sprawdź, czy wszystko działa poprawnie. Możesz użyć narzędzi deweloperskich w przeglądarce, aby sprawdzić, czy skrypt załadował się bez błędów.
Nie duplikuj kodów
Jeśli dodajesz ten sam kod więcej niż raz, może to spowodować problemy z wydajnością lub błędy w działaniu narzędzi. Upewnij się, że każdy kod jest dodany tylko raz.
Najczęstsze zastosowania
Google Analytics
Wklej kod śledzący w sekcji
<head>, aby zbierać dane o ruchu w sklepie.Meta Pixel
Dodaj piksel Meta w
<head>, aby śledzić konwersje i optymalizować kampanie reklamowe.Chat na żywo
Większość narzędzi do czatu (np. Intercom, Crisp) poleca umieszczenie kodu przed
</body>.