Toimii jest w fazie cichego startu, więc te poradniki opisują usługę, w której możesz się zarejestrować i z której możesz korzystać już dziś. Kilka elementów jest jeszcze w drodze — aplikacje na iOS i Androida pojawią się jeszcze w 2026 roku.

Jak osadzić formularz kontaktowy w Shopify za pomocą Custom Liquid

Sekcja Custom Liquid w edytorze motywu. Bez instalowania aplikacji, bez znajomości Liquid — wklej dwie linie i zapisz.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-your-code></toimii-your-code>

Czy to naprawdę działa?

Tak — jeśli Twój motyw oferuje sekcję Custom Liquid. To własna odpowiedź Shopify na dodawanie kodu do strony bez edytowania plików motywu.

Krok po kroku

Otwórz edytor motywu

W panelu Shopify otwórz edytor motywu przy motywie, który chcesz zmienić.

Dodaj sekcję Custom Liquid

Przejdź do strony, na której ma pojawić się formularz, a następnie dodaj sekcję i wybierz Custom Liquid.

Wklej kod osadzania

Wklej dwie linie ze strony swojego komponentu w Toimii w pole Liquid. Pole przyjmuje surowy HTML i przepuszcza go bez zmian, więc znacznik script i własny element działają dokładnie tak jak napisano.

Zapisz i sprawdź opublikowany sklep

Zapisz w edytorze motywu, a potem otwórz tę stronę w swoim sklepie — nie w podglądzie edytora — i wyślij testową wiadomość. Tylko dostarczona wiadomość dowodzi, że osadzenie działa od początku do końca.

Pułapki

Dodaj kod przez edytor motywu, zamiast edytować pliki motywu. Shopify aktualizuje motyw automatycznie tylko dopóki jego pliki są w oryginalnym stanie — a Custom Liquid istnieje właśnie po to, żeby dało się dodać własny kod bez ruszania ich. Jeśli zmienisz kod motywu, każdą kolejną aktualizację będziesz wprowadzać ręcznie.
Na stronach kasy i kart podarunkowych w ogóle nie da się dodawać sekcji, więc blok Custom Liquid tam nie trafi — na żadnym planie. Umieść formularz na zwykłej stronie sklepu.
Edytor motywu edytuje jeden motyw, niekoniecznie ten opublikowany. Jeśli zapisałeś zmiany w kopii, Twój sklep pozostaje bez zmian, choćby podgląd wyglądał idealnie — sprawdź adres sklepu i to, który motyw jest opublikowany.

Często zadawane pytania

Czy potrzebuję aplikacji Shopify z App Store?

Nie. Custom Liquid to wbudowana sekcja motywu, a Shopify sam zaleca, żeby najpierw sięgnąć po edytor motywu, zanim weźmiesz się za kod albo aplikację. Nie każdy motyw ją oferuje — jeśli Twój jej nie ma, nadal możesz dodać dwie linie do kodu motywu, pamiętając o zastrzeżeniu dotyczącym aktualizacji z pułapek powyżej.

Czy mogę osadzić formularz na stronie kasy?

Nie — i nie jest to ograniczenie planu. Dokumentacja Shopify mówi wprost, że sekcje można dodać na każdej stronie sklepu online z wyjątkiem stron kart podarunkowych i kasy, więc nie ma tam bloku Custom Liquid, w którym dałoby się umieścić formularz, ani planu, który by go dodał. Kasę dostosowuje się aplikacjami do kasy. Umieść formularz na stronie kontaktu albo dowolnej innej stronie sklepu.

Czy działa na niestandardowej stronie Storefront API (Hydrogen, Next.js)?

Tak — headless storefront to Twój własny front end, więc dwie linie trafiają do niego tak samo jak na każdą inną stronę. Jedna rzecz do sprawdzenia: Hydrogen ma domyślną Content-Security-Policy, więc budując własną, zezwól na cdn.toimii.io w script-src i api.toimii.io w connect-src.

Osadzasz na innej platformie?

Te same dwie linie kodu, szczegółowo omówione dla każdej platformy.

WordPress

Blok Custom HTML, edytor blokowy lub klasyczny. Bez instalowania pluginu. Jeden haczyk — Twoja rola użytkownika musi mieć uprawnienie unfiltered_html.

Przeczytaj pełny poradnik

Squarespace

Wrzuć Code Block na dowolną stronę. Wymaga planu, w którym bloki kodu mogą uruchamiać JavaScript.

Przeczytaj pełny poradnik

Webflow

Przeciągnij element Code Embed i wklej dwie linie. Własny kod to w Webflow funkcja płatna — to jedyny warunek.

Przeczytaj pełny poradnik

Wix

Użyj Custom Element od Wix: adres skryptu Twojego komponentu w polu Server URL, jego tag w polu Tag Name. Osadzanie HTML nie zadziała — to sandboxowy iframe.

Przeczytaj pełny poradnik

Strony statyczne

Astro, Hugo, 11ty, Jekyll — te same dwie linie w szablonie layoutu. Budowanie pozostaje szybkie.

Przeczytaj pełny poradnik

HTML / Własny

Wystarczy zwykła strona HTML. Otwórz w dowolnym edytorze tekstu, wklej, zapisz, wgraj. Trzy kroki i działa.

Przeczytaj pełny poradnik

React / Vue / Angular

Użyj własnego elementu bezpośrednio w JSX, szablonach Vue lub komponentach Angular. Żadnego komponentu opakowującego, żadnego dodatkowego pakietu.

Przeczytaj pełny poradnik

Gotowy, żeby spróbować?

30-dniowy bezpłatny okres próbny. Bez karty kredytowej. Gotowe w kilka minut.

Rozpocznij bezpłatny okres próbny

Bez karty kredytowej. Konfiguracja w 2 minuty.