Toimii har mjuklanserats, så de här guiderna beskriver en tjänst som du kan registrera dig för och använda redan idag. Några delar är fortfarande på väg — apparna för iOS och Android kommer senare under 2026.

Så bäddar du in ett kontaktformulär på Shopify med Custom Liquid

Ett Custom Liquid-avsnitt i temaredigeraren. Ingen app-installation, inga Liquid-kunskaper krävs — klistra in de två raderna och spara.

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

Fungerar det faktiskt?

Ja — om ditt tema erbjuder ett Custom Liquid-avsnitt. Det är Shopifys eget svar på hur man lägger till kod på en sida utan att redigera temafiler.

Steg för steg

Öppna temaredigeraren

Öppna temaredigeraren i din Shopify-admin på det tema du vill ändra.

Lägg till ett Custom Liquid-avsnitt

Gå till sidan där formuläret ska visas, lägg sedan till ett avsnitt och välj Custom Liquid.

Klistra in inbäddningskoden

Klistra in de två raderna från din komponents sida i Toimii i Liquid-fältet. Fältet tar emot rå HTML och skickar den vidare oförändrad, så script-taggen och det anpassade elementet fungerar som de är.

Spara och kontrollera livebutiken

Spara i temaredigeraren, öppna sedan sidan i din butik — inte förhandsvisningen i redigeraren — och skicka ett testmeddelande. Ett meddelande som kommer fram är det enda som bevisar att inbäddningen fungerar hela vägen.

Fallgropar

Lägg till koden via temaredigeraren i stället för att redigera temafiler. Shopify uppdaterar ett tema automatiskt bara så länge dess filer är i sitt ursprungliga skick — och Custom Liquid finns just för att du ska kunna lägga till egen kod utan att röra dem. Redigerar du temakoden i stället blir varje framtida uppdatering din att installera för hand.
Kassa- och presentkortssidor tar inte emot avsnitt över huvud taget, så ett Custom Liquid-block kan inte läggas där — oavsett plan. Lägg formuläret på en vanlig sida i butiken.
Temaredigeraren redigerar ett tema, och det är inte nödvändigtvis det publicerade. Har du sparat i en kopia är din livebutik oförändrad hur rätt förhandsvisningen än ser ut — kontrollera butikens URL och vilket tema som är publicerat.

Vanliga frågor

Behöver jag en Shopify-app från App Store?

Nej. Custom Liquid är ett inbyggt temaavsnitt, och Shopifys egen rekommendation är att använda temaredigeraren innan du tar till kod eller en app. Alla teman erbjuder det inte — om ditt inte gör det kan du ändå lägga in de två raderna i temats kod, med den reservation om uppdateringar som står i fallgroparna ovan.

Kan jag bädda in det på kassasidan?

Nej — och det beror inte på din plan. Shopifys dokumentation säger uttryckligen att avsnitt kan läggas till på vilken sida som helst i din webbutik utom presentkorts- och kassasidor, så det finns inget Custom Liquid-block att lägga formuläret i, och ingen uppgradering som ger dig ett. Kassan anpassas med kassaappar. Lägg formuläret på en kontaktsida eller någon annan sida i butiken i stället.

Fungerar det på en anpassad Storefront API-webbplats (Hydrogen, Next.js)?

Ja — en headless-butik är din egen frontend, så de två raderna läggs in där precis som på vilken annan sida som helst. En sak att kontrollera: Hydrogen levereras med en Content-Security-Policy som standard, så tillåt cdn.toimii.io i script-src och api.toimii.io i connect-src när du bygger din egen.

Bäddar du in på en annan plattform?

Samma två rader kod, förklarade för varje plattform.

WordPress

Custom HTML-block, Block Editor eller klassisk. Ingen plugin-installation. En hake — din användarroll behöver unfiltered_html-behörigheten.

Läs hela guiden

Squarespace

Lägg till ett kodblock på vilken sida som helst. Kräver en plan vars kodblock får köra JavaScript.

Läs hela guiden

Webflow

Dra in ett Code Embed-element och klistra in de två raderna. Anpassad kod är en betald funktion i Webflow — det är det enda villkoret.

Läs hela guiden

Wix

Använd Wix Custom Element: komponentens script-URL i Server URL, dess tagg i Tag Name. HTML-inbäddningen fungerar inte — den är en sandboxad iframe.

Läs hela guiden

Statiska webbplatser

Astro, Hugo, 11ty, Jekyll — samma två rader i din layoutmall. Byggen förblir snabba.

Läs hela guiden

HTML / Eget

En vanlig HTML-sida räcker. Öppna i valfri textredigerare, klistra in, spara, ladda upp. Tre steg och du är igång.

Läs hela guiden

React / Vue / Angular

Använd det anpassade elementet direkt i JSX, Vue-mallar eller Angular-komponenter. Ingen wrapper-komponent, inget extra paket.

Läs hela guiden

Redo att prova?

30 dagars gratis provperiod. Inget kreditkort. Klar på minuter.

Starta gratis provperiod

Inget kreditkort krävs. Klar på 2 minuter.