Toimii on julkaistu hiljaisesti, joten nämä ohjeet kuvaavat palvelua, johon voit rekisteröityä ja jota voit käyttää jo nyt. Muutama osa on vielä matkalla — iOS- ja Android-sovellukset julkaistaan vielä vuoden 2026 aikana.

Näin upotat yhteydenottolomakkeen Shopifyyn Custom Liquidilla

Custom Liquid -osio teema-editorissa. Ei sovellusasennusta, ei Liquid-osaamista — liitä kaksi riviä ja tallenna.

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

Toimiiko tämä oikeasti?

Kyllä — jos teemasi tarjoaa Custom Liquid -osion. Se on Shopifyn oma vastaus koodin lisäämiseen sivulle ilman teematiedostojen muokkausta.

Vaihe vaiheelta

Avaa teema-editori

Avaa Shopify-administa teema-editori sillä teemalla, jota haluat muokata.

Lisää Custom Liquid -osio

Siirry sivulle, jolle lomake tulee, lisää osio ja valitse Custom Liquid.

Liitä upotuskoodi

Liitä komponenttisi Toimii-sivulta kopioidut kaksi riviä Liquid-kenttään. Kenttä ottaa vastaan raakaa HTML:ää ja päästää sen läpi muuttumattomana, joten script-tagi ja mukautettu elementti toimivat sellaisinaan.

Tallenna ja tarkista kaupassa

Tallenna teema-editorissa, avaa sitten sivu kaupassasi — älä editorin esikatselussa — ja lähetä testiviesti. Vasta perille tullut viesti todistaa, että upotus toimii päästä päähän.

Sudenkuopat

Lisää koodi teema-editorin kautta äläkä muokkaamalla teematiedostoja. Shopify päivittää teeman automaattisesti vain niin kauan kuin sen tiedostot ovat alkuperäisessä tilassaan — ja Custom Liquid on olemassa juuri siksi, että voit lisätä omaa koodia koskematta niihin. Jos muokkaat teeman koodia, jokainen tuleva päivitys jää sinun käsin asennettavaksesi.
Kassa- ja lahjakorttisivuille ei voi lisätä osioita lainkaan, joten Custom Liquid -lohko ei sovi niille — ei millään tilauksella. Sijoita lomake tavalliselle kaupan sivulle.
Teema-editori muokkaa yhtä teemaa, eikä se ole välttämättä julkaistu teema. Jos tallensit kopioon, kauppasi ei muutu miksikään, näytti esikatselu miten oikealta tahansa — tarkista kaupan URL-osoite ja se, mikä teema on julkaistu.

Usein kysyttyä

Tarvitsenko Shopify-sovelluksen App Storesta?

Et. Custom Liquid on sisäänrakennettu teema-osio, ja Shopifyn oma ohje on käyttää teema-editoria, ennen kuin turvaudut koodiin tai sovellukseen. Kaikki teemat eivät sitä tarjoa — jos omasi ei tarjoa, voit silti lisätä kaksi riviä teeman koodiin, yllä olevan sudenkuopan varauksella.

Voinko upottaa kassasivulle?

Et — eikä kyse ole tilauksen rajoituksesta. Shopifyn dokumentaatio sanoo suoraan, että osioita voi lisätä verkkokaupan mille tahansa sivulle lukuun ottamatta lahjakortti- ja kassasivuja, joten Custom Liquid -lohkoa ei ole mihin laittaa eikä sellaista saa ostamalla. Kassaa muokataan kassasovelluksilla. Sijoita lomake yhteydenottosivulle tai muulle kaupan sivulle.

Toimiiko mukautetulla Storefront API -sivustolla (Hydrogen, Next.js)?

Kyllä — headless-kauppa on oma käyttöliittymäsi, joten kaksi riviä menee siihen kuten mille tahansa muullekin sivulle. Yksi asia kannattaa tarkistaa: Hydrogenissa on oletuksena Content-Security-Policy, joten salli cdn.toimii.io kohdassa script-src ja api.toimii.io kohdassa connect-src omaa käytäntöä rakentaessasi.

Upotatko eri alustalle?

Samat kaksi riviä koodia, jokaiselle alustalle eri ohjeet.

WordPress

Custom HTML -lohko, Block-editori tai perinteinen. Ei lisäosia. Yksi mutka — käyttäjäroolisi tarvitsee unfiltered_html-oikeuden.

Lue koko opas

Squarespace

Lisää Code Block mille tahansa sivulle. Vaatii tilauksen, jonka code blockit saavat suorittaa JavaScriptiä.

Lue koko opas

Webflow

Vedä canvasille Code Embed -elementti ja liitä kaksi riviä. Mukautettu koodi on Webflowissa maksullinen ominaisuus — se on ainoa ehto.

Lue koko opas

Wix

Käytä Wixin Custom Element -elementtiä: komponentin script-URL Server URL -kenttään, sen tagi Tag Name -kenttään. HTML-upotus ei toimi — se on sandboxattu iframe.

Lue koko opas

Staattiset sivustot

Astro, Hugo, 11ty, Jekyll — samat kaksi riviä layout-tiedostoon. Buildit pysyvät nopeina.

Lue koko opas

HTML / Muu

Pelkkä HTML-sivu riittää. Avaa tekstieditorissa, liitä, tallenna, lataa palvelimelle. Kolme askelta ja toimii.

Lue koko opas

React / Vue / Angular

Käytä mukautettua elementtitagia suoraan JSX:ssä, Vue-templateissa tai Angular-komponenteissa. Ei wrapper-komponenttia, ei lisäpaketteja.

Lue koko opas

Valmis kokeilemaan?

30 päivän ilmainen kokeilu. Ei luottokorttia. Valmis minuuteissa.

Aloita ilmainen kokeilu

Ei luottokorttia. Valmis kahdessa minuutissa.