Älä muokkaa live-teemaa: kehitys- ja live-teema GitHubilla

Julkaistun teeman muokkaaminen suoraan koodieditorissa tuntuu nopealta. Se on myös yleisin tapa, jolla verkkokauppa hajoaa kesken kampanjan. Puuttuva {% endif %} näkyy kaikille asiakkaille kerralla, kukaan ei tiedä kuka muutti mitä, ja seuraava teemapäivitys pyyhkii hiljaa pois vuosien pienet korjaukset.

Ammattimaiset Shopify-tiimit tekevät toisin. Tässä on malli, jolla kehitämme jokaisen asiakkaan teemaa, ja miksi se tekee kaupan kehittämisestä turvallista.

Miksi live-teeman muokkaaminen menee pieleen

• Jokainen virhe näkyy heti kaikille. Tallennuksen ja asiakkaan välissä ei ole mitään.
• Historiaa ei ole. Kun jokin hajoaa ensi viikolla, kukaan ei tiedä, mikä muutos sen aiheutti tai miten sen saa peruttua.
• Päivityksiä aletaan pelätä. Kun teeman tekijä julkaisee uuden version, kukaan ei tiedä, mitä tiedostoja on muokattu, joten päivitys siirtyy vuosilla.
• Kaksi ihmistä kirjoittaa toistensa päälle. Kehittäjä ja markkinoija samassa tiedostossa on arvauspeliä.

Näin Shopifyn GitHub-integraatio toimii

Shopifyn teemakirjastossa on virallinen GitHub-integraatio. Kun Shopifyn GitHub-sovellus on asennettu, haara kytketään teemakirjastosta (englanninkielisessä adminissa Online Store → Themes → Add theme → Connect from GitHub). Integraatio kytkee GitHub-repon haaran kaupan teemaan ja pitää ne samassa tilassa molempiin suuntiin:

• Kun kytketty haara muuttuu GitHubissa, Shopify päivittää teeman.
• Kun joku tallentaa muutoksia Shopify-adminissa, teemaeditorissa, koodieditorissa tai teemasovelluksen kautta, Shopify tallentaa ne haaraan. Commitissa näkyy kauppa ja henkilö, joka muokkasi teemaa viimeksi.

Jälkimmäistä suuntaa ei voi kytkeä pois, ja se on hyvä asia: kauppias käyttää teemaeditoria kuten ennenkin, ja GitHubissa on silti koko historia.

Vain teeman vakiokansiot synkronoituvat: assets, blocks, config, layout, locales, sections, snippets ja templates. Muut tiedostot, kuten dokumentaatio, pysyvät vain GitHubissa. Haarassa on oltava teema täsmälleen sellaisena kuin se ajetaan, ilman käännösvaihetta.

Kaksi haaraa, kaksi teemaa: main ja dev

Kytkemme saman repon kaksi haaraa kahteen teemaan:

Haara	Teema kaupassa	Käyttö
main	julkaistu teema	se, minkä asiakkaat näkevät
dev	julkaisematon kopio	työn esikatselu ja hyväksyntä

Esikatseluteemalla on oma esikatselulinkki. Kauppias näkee sen kautta, miltä kauppa näyttää muutoksen jälkeen puhelimella ja tietokoneella, eivätkä asiakkaat näe mitään.

Näin muutos kulkee live-kauppaan

1. Oma haara jokaiselle muutokselle. Jokainen tehtävä saa oman haaransa, esimerkiksi uusi etusivun osio tai nopeampi tuotesivu.
2. Ensin Theme Check. Shopifyn oma tarkistustyökalu, joka ajetaan Shopify CLI:llä (shopify theme check), löytää Liquid-virheet, puuttuvat käännökset ja suorituskykyongelmat. Ajamme sen jokaisessa pull requestissa, ja virhe pysäyttää muutoksen.
3. Deviin. Kun tarkistus on vihreä, muutos yhdistetään dev-haaraan, ja esikatseluteema päivittyy sekunneissa.
4. Katselmointi esikatseluteemassa. Kauppias avaa esikatselulinkin ja hyväksyy muutoksen tai pyytää korjauksia.
5. Mainiin. Vasta hyväksynnän jälkeen dev yhdistetään main-haaraan, ja julkaistu teema päivittyy.

Ennen uutta työtä tuomme ensin main-haaran dev-haaraan. Silloin kauppiaan live-teemassa tallentamat muutokset ovat mukana, eikä mitään kaupassa tallennettua kirjoiteta yli.

Kunnioita kauppiaan sisältöä

Osa teeman tiedostoista on sisältöä, ei koodia. config/settings_data.json, templates-kansion JSON-pohjat, osioryhmät (ylä- ja alatunniste) ja locales-tiedostot sisältävät sen, mitä kauppias on asettanut teemaeditorissa: tekstit, kuvat, värit ja osioiden järjestyksen.

Muutamme näitä tiedostoja vain, kun tehtävä sitä vaatii, pidämme muutoksen pienenä ja ristiriidassa säilytämme kaupan version. Näin kauppias ja kehittäjä voivat työskennellä samassa teemassa ilman, että kumpikaan kumoaa toisen työtä.

Mitä tämä antaa kauppiaalle

• Kauppa ei hajoa kesken myynnin. Jokainen muutos tarkistetaan ja esikatsellaan ensin.
• Koko historia. Jokaisella muutoksella, myös teemaeditorissa tehdyllä, on päivämäärä, tekijä ja paluutie.
• Päivitykset, jotka voi oikeasti tehdä. Muokkaukset näkyvät GitHubissa, joten teeman uuden version voi tuoda ja testata ensin esikatseluteemassa.
• Tilaa useammalle tekijälle. Kehittäjä, suunnittelija ja kauppias voivat tehdä töitä yhtä aikaa.

Jos kauppasi on Basic- tai Plus-planilla

Työtapa on sama kaikilla planeilla, ja siitä on yhtä lailla hyötyä pienessä kuin isossa kaupassa. Pienessä kaupassa se suojaa ennen kaikkea hajoamiselta ja kadonneilta muutoksilta. Isossa kaupassa, jossa on useita tekijöitä ja kampanjoita, voi lisäksi kytkeä kampanjateemoille omat haarat ja julkaista ne kampanjan ajaksi.

Lähteet: Shopifyn dokumentaatio GitHub-integraatiosta ja teemojen versionhallinnasta (englanniksi).

Haluatko tämän käyttöön omaan kauppaasi, tai haluatko, että katsomme ensin nykyisen teemasi? Kysy Virralta alta.