Nämä ohjeet kuvaavat Toimiita julkaisun jälkeen. Hallintapaneeli ja laskutus eivät ole vielä käytössä — Toimii julkaistaan vuonna 2026.

Näin upotat yhteydenottolomakkeen Shopifyyn Custom Liquidilla

Custom Liquid -osio mihin tahansa teemaan. Ei sovellusta, ei Liquid-osaamista — vain liitä kaksi riviä.

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

Toimiiko tämä oikeasti?

Kyllä — kaikilla Shopify-teemoilla, jotka tukevat Online Store 2.0 -mallia (Dawn ja kaikki modernit teemat). Custom Liquid -osio on sisäänrakennettu Shopifyyn; sovellusta ei tarvita, eikä useimmilla sivuilla teemakoodia tarvitse muokata.

Vaihe vaiheelta

Avaa teema-editori

Mene Shopify-administa kohtaan Verkkokauppa → Teemat → Mukauta sillä teemalla, jota haluat muokata.

Lisää Custom Liquid -osio

Valitse sivu, jolle lomake tulee (sivu, yhteydenottosivu tai mikä tahansa sivumalli). Klikkaa Lisää osio ja valitse Custom Liquid.

Liitä upotuskoodi

Liitä Toimii-koontinäytöltä saamasi kaksi riviä Liquid-kenttään. Liquid päästää raakaa HTML:ää läpi muuttumattomana, joten script-tagi ja mukautettu elementti toimivat sellaisinaan.

Tallenna teema

Tallenna teema-editorissa. Lomake on välittömästi käytössä kaupassasi.

Testaa live-kaupassa

Avaa live-sivu (ei esikatselua) ja lähetä testiviesti varmistaaksesi päästä-päähän-toiminnan. Jos jokin näyttää oudolta, katso sudenkuopat alla.

Yleiset sudenkuopat

Suorat theme.liquid-muutokset ylikirjoittuvat teemapäivityksessä. Käytä Custom Liquid -osiota teema-editorissa (tallentuu sivukohtaisesti) tai monista teema ennen ydintiedostojen muokkausta.
Custom Liquid kassasivuilla vaatii Shopify Plus -tilauksen. Tavallisilla tilauksilla upota yhteydenotto-, UKK- tai tuotesivuille.
Joillain teemoilla on sisäänrakennettu CSP, joka estää kolmannen osapuolen skriptejä. Jos lomake ei renderöidy, salli cdn.toimii.io ja api.toimii.io kohdissa script-src / connect-src.
Teema-editorin esikatselu lataa joskus osioita laiska-latauksella tavalla, joka rikkoo mukautettujen elementtien ensimmäisen renderöinnin. Tarkista live-kaupan URL-osoitteella (tai "Näytä"-painikkeella) — esikatselu ei ole totuuden lähde.
Jos kääräset lomakkeen Liquid-{% if %}-lohkoon, script latautuu silti joka sivulle. Säästääksesi tavuja, suojaa script-tagi samalla ehdolla.

Usein kysyttyä

Tarvitsenko Shopify-sovelluksen App Storesta?

Et. Custom Liquid on Shopifyn sisäänrakennettu teema-osio — kaikki Dawn-aikakauden teemat tukevat sitä. Sovelluskaupat ovat täynnä "yhteydenottolomake"-sovelluksia; Toimii-palvelua varten et tarvitse niistä yhtäkään.

Voinko upottaa kassasivulle?

Et tavallisilla tilauksilla. Custom Liquid kassasivuilla vaatii Shopify Plus -tilauksen. Muilla kaupoilla upota lomake yhteydenotto-, UKK- tai oston jälkeisille tilauksen tilasivuille.

Pyyhkivätkö teemapäivitykset upotuskoodini?

Kyllä — suorat muutokset teema-tiedostoihin (theme.liquid, sections/*.liquid) ylikirjoittuvat kun päivität tai palautat teeman. Kaksi turvallisempaa vaihtoehtoa: käytä teema-osiota + Custom Liquid -lohkoa (tallentuu sivukohtaisesti teema-editorissa) tai monista teema ennen muokkausta.

Kaupallani on Content-Security-Policy — estääkö se Toimii-palvelua?

Joillain kaupoilla on tiukka Content-Security-Policy joko teema-asetusten tai sovellusten kautta (Shopifyn Online Store 2.0 -teemat CSP-otsikoineen). Jos lomake ei renderöidy, salli script-src-kohdassa: cdn.toimii.io ja api.toimii.io.

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

Kyllä. Käytä App Bridgea HTML-säiliön renderöintiin ja injektoi script-tagi ja mukautettu elementti siihen. Sama lähestymistapa: kaksi riviä koodia, mukautettu elementti hoitaa loput.

Upotat eri alustalle?

Sama 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

Pudota koodilohko mille tahansa sivulle. Vaatii Core-tilauksen (vuoden 2025 uusi nimi Businessille) tai uudemman.

Lue koko opas

Webflow

Code Embed -elementtiin mahtuu 50 000 merkkiä. Mukautettu koodi vaatii Basic-tilauksen tai uudemman. Julkaise nähdäksesi tuloksen.

Lue koko opas

Wix

Wix sandboxaa Embed-widgetin, joten käytämme jaettua menetelmää — script Settings → Custom Code -kohtaan, tagi Embed a Widget -lohkoon. Rehellinen ohje.

Lue koko opas

Staattiset sivustot

Astro, Hugo, 11ty, Jekyll — sama 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.

Ei luottokorttia. Valmis kahdessa minuutissa.