Pokażę Ci, jak w kilku prostych krokach zmodyfikować szablon Twojego sklepu internetowego na platformie IdoSell, korzystając ze wsparcia sztucznej inteligencji. To szybki i intuicyjny sposób na wprowadzanie zmian bez konieczności zagłębiania się w kod. Przekonaj się, jak AI może usprawnić codzienną pracę z Twoim e-commerce.
W IdoSell możemy umieszczać style CSS oraz kody JavaScript w kilku różnych miejscach. Pokażę Ci te najczęściej wykorzystywane przez programistów i opiekunów sklepów internetowych.
Zacznijmy od podstron CMS. Aby się do nich dostać, przechodzimy do sekcji Moderacja → CMS → Własne podstrony CMS. W tym miejscu mamy możliwość dodawania własnych kodów, które pozwalają zmieniać wygląd sklepu.
Możemy także wejść w: Moderacja → Wygląd sklepu → Bannery, buttony, reklamy. Teoretycznie w tym miejscu również da się wstawić kod, który zmodyfikuje wygląd sklepu, nie polecam jednak tej metody. Do wprowadzania zmian w kodzie są znacznie lepsze opcje, które przedstawię w dalszej części wpisu.
Po przejściu w: Moderacja → CMS → Treści dodatkowe na stronach generowanych automatycznie możemy dodać tekst lub kod, który wyświetli się tylko na konkretnych elementach strony i w określonych sytuacjach.
Przykład: „Szczegóły zamówienia – pobranie". Tekst umieszczony w tym miejscu pojawi się wyłącznie wtedy, gdy klient wybierze płatność za pobraniem i przejdzie do etapu szczegółów zamówienia, już po zatwierdzeniu płatności. To przydatne rozwiązanie, gdy chcemy wyświetlać spersonalizowane komunikaty w zależności od ścieżki zakupowej klienta.
Kolejne miejsce do edycji to zarządzanie szablonami strony. Wchodzimy tam przez Moderacja → Wygląd sklepu → Zarządzanie szablonami stron.
Przy szablonie, który jest aktualnie aktywny i używany na sklepie, klikamy ikonę ołówka („Dostosuj")
Następnie wybieramy „Edytuj CSS".
W polu Custom CSS możemy wklejać własne kody CSS, bez kodów JavaScript.
Przy korzystaniu z tego modułu trzeba zachować ostrożność. Jeśli dodamy własne style i zapiszemy zmiany, a następnie opublikujemy nowy szablon przez Composer lub wprowadzimy w nim jakiekolwiek modyfikacje, plik Custom CSS może się wyzerować. Dlatego warto zawsze trzymać kopię zapasową swoich kodów.
Oczywiście warto też wspomnieć o Composerze. To jednak moduł dla zaawansowanych, np. programistów. Jeśli nie mamy doświadczenia, lepiej nic nie modyfikować na własną rękę, bo można sporo popsuć. Wchodzimy w Moderacja → Wygląd sklepu → Composer - budowanie własnych szablonów stron.
Następnie wchodzimy w "Szczegóły" wybranego szablonu.
Jeżeli chcemy umieścić kod JavaScript lub CSS, który będzie ładowany globalnie na każdej podstronie, przechodzimy do sekcji "Układ", a następnie w "Nagłówku strony" znajdziemy komponent JavaScript + CSS + TXT. W tym miejscu możemy wklejać kody, które będą działać na całym sklepie.
Natomiast jeśli chcemy, żeby kod wyświetlał się na przykład tylko na stronie głównej – wstrzykujemy go do komponentu przypisanego właśnie do tej strony. Analogicznie postępujemy z pozostałymi podstronami.
A teraz pokażę opcję, którą uważam za najlepszą – Dodatki HTML i JavaScript. Przechodzimy tam przez Moderacja → Wygląd sklepu → Dodatki HTML, JavaScript.
To rozwiązanie daje największą elastyczność i najwięcej możliwości edycji.
Załóżmy, że chcemy ukryć pasek informacyjny na jakiejś podstronie CMS (czyli stronie informacyjnej), na przykład „Informacje o sklepie".
W związku z tym przechodzimy do Moderacja → CMS → Własne podstrony CMS.
Wybieramy odpowiedni sklep, a następnie "Zasady".
Wchodzimy w edycję podstrony, którą chcemy edytować – w tym przypadku są to „Informacje o sklepie".
Teraz musimy ustalić, jak odnieść się do tego elementu w kodzie. Ja lubię posiłkować się wtyczką Magic CSS do Google Chrome.
Po kliknięciu na wtyczkę otworzy się okienko z selektorem, który pozwala zaznaczyć dowolny element na stronie.
Zaznaczam pasek, który chcę ukryć, a wtyczka podpowiada mi, czego należy użyć. W tym przypadku element nazywa się .pasek.
Jeśli nie wiesz, jak ukryć dany element na stronie, wystarczy wpisać w ChatGPT coś w stylu: „chciałbym ukryć ten element na stronie", a podpowie Ci, że trzeba dodać display: none;
Jak widać, po zastosowaniu tego kodu pasek znika. Ale uwaga – to co zrobiliśmy, na razie widzimy tylko my, lokalnie. Jeśli wejdziemy na sklep jako klient, na przykład w trybie incognito, pasek nadal będzie widoczny.
Dlatego wracamy do edycji naszej podstrony CMS. Wybieram edycję zaawansowaną i dodaję kod CSS w tagu <style>.
Jeśli nie wiesz, jak to zapisać, ChatGPT Ci podpowie – ale to naprawdę nic skomplikowanego, wystarczą dosłownie dwie linijki. Oto gotowy kod:
<style>
.pasek {
display: none;
}
</style>Code language: HTML, XML (xml)Po zapisaniu zmian pasek powinien zniknąć również dla wszystkich odwiedzających stronę.
Przejdźmy teraz do kolejnego przykładu. Wejdźmy na jakąś kategorię produktów. Załóżmy, że robimy akcję marketingową i chcielibyśmy, żeby wyświetlał się baner – widoczny na każdej kategorii i na każdym wyniku wyszukiwania. Na przykład pod hasłem „Wyniki wyszukiwania" oraz pod nazwą węzła menu. Można to zrobić wchodząc na każdą kategorię osobno i dodając baner w opisie, ale istnieje szybsze rozwiązanie.
Warto skorzystać z możliwości, jakie podaje nam AI, wcześniej jednak musimy przygotować baner. Wchodzimy w Moderacja → CMS → Zarządzanie plikami dla CMS i wgrywamy grafikę.
Wcześniej przygotowany baner otwórz w nowej karcie – klikamy na niego i kopiujemy pełny link do pliku.
Będąc na stronie kategorii klikamy Ctrl+U (lub prawym przyciskiem myszy → „Wyświetl źródło strony") i kopiujemy cały kod strony. Teraz przechodzimy do AI – w tym przypadku użyję Claude'a. Wklejam skopiowany kod źródłowy strony, link do banera i piszę zapytanie, na przykład: „Napisz kod JavaScript, który doda baner reklamowy pod tekstem '4 Black Weeks'".
Aby sprawdzić, czy kod wygenerowany przez AI działa, wróć na kategorię, kliknij F12 (lub „Zbadaj"), otwórz zakładkę "Console" i wklej wygenerowany kod.
Ale uwaga – po odświeżeniu strony baner zniknie. Dlatego przechodzimy do Moderacja → Wygląd sklepu → Dodatki HTML i JavaScript.
Wybieramy sklep, tworzymy nową kampanię (lub korzystamy z istniejącej) i klikamy „Edytuj dodatki", a następnie "Nowy dodatek".
Nazywamy go na przykład: „Baner na kategorii – akcja Black Week 2025". Wybieramy typ JavaScript. Ustawiamy, że ma się ładować wszędzie i na każdym urządzeniu – choć warto pamiętać, że jeśli baner jest przygotowany tylko pod desktop, na mobile może wyglądać źle. Można wtedy stworzyć osobne wersje dla różnych urządzeń.
Wybieramy język polski, klikamy „Edycja zaawansowana" i wklejamy kod z AI.
Na koniec zaznaczamy, że dodatek ma się ładować w wynikach wyszukiwania – w IdoSell oznacza to również podstrony kategorii, czyli wszędzie tam, gdzie są listy produktowe.
Klikamy „Dodaj" i gotowe. Warto pamiętać, że dodatki mogą potrzebować do 15 minut, żeby zacząć się ładować.
Załóżmy teraz, że chcielibyśmy wyświetlić w prawym dolnym rogu ekranu ikonkę telefonu, żeby klient mógł szybko się skontaktować.
W takim przypadku otwieram czat z AI i wpisuję prostego prompta: „Stwórz mi kod JavaScript, który wyświetli w prawym dolnym rogu ekranu ikonkę telefonu z linkiem do zadzwonienia", podaję numer telefonu i wysyłam zapytanie.
Wracam do Moderacja → Wygląd sklepu → Dodatki HTML i JavaScript i w "Edycji zaawansowanej" podmieniam wcześniejszy dodatek na nowy kod wygenerowany przez AI.
Zanim jednak będę czekał 15 minut na załadowanie się dodatku w sklepie, sprawdzę to lokalnie. Wracam na stronę kategorii, otwieram Console (F12 → Console) i wklejam kod od AI. Ikonka telefonu powinna pojawić się w prawym dolnym rogu.
A co jeśli coś nie działa? Wtedy po prostu piszemy do AI – do Claude'a czy ChatGPT lub wybieramy inny preferowany model językowy i opisujemy problem: „Nie działa. Mam taki i taki błąd". Wyjaśniamy, co się dzieje. Czy element w ogóle się nie wyświetla, czy może w konsoli pojawiają się błędy - warto je wtedy po prostu wkleić.
Mam nadzieję, że dzięki niniejszemu wpisowi będziesz potrafił samodzielnie zmodyfikować coś na swoim sklepie – dodać baner, wstawić ikonkę kontaktową, zmienić kolor elementu w menu, podmienić czcionkę czy zrobić cokolwiek innego, co jest stosunkowo prostym działaniem.
Przy bardziej skomplikowanych modyfikacjach AI potrafi się gubić, więc warto zachować ostrożność. Należy też uważać na dodawanie zbyt wielu dodatków HTML i modyfikacji przez JavaScript. Każdy taki kod wpływa na czas wczytywania strony i odczucia użytkowników – mogą zacząć skakać elementy, pojawiać się opóźnienia, a całość będzie działać niestabilnie.
Jeśli narzucimy dużo kodu wygenerowanego przez AI bez jego optymalizacji, jest spora szansa, że strona zacznie działać wolniej – szczególnie gdy jeszcze nie mamy doświadczenia w tym temacie.
