Älä muokkaa live-teemaa: turvalliset teemamuutokset 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.

Ammattilaiset tekevät toisin. Kerromme tässä, miten kehitämme jokaisen asiakkaamme teemaa ja miksi tapa 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äivitystä lykätään vuosia.
• Muutokset kumoavat toisensa. Kun kehittäjä ja markkinoija muokkaavat samaa tiedostoa, kukaan ei tiedä, kenen muutos jää voimaan.

Näin Shopifyn GitHub-integraatio toimii

Shopifyn teemakirjastossa on virallinen GitHub-integraatio. Kun Shopifyn GitHub-sovellus on asennettu, haara kytketään teemakirjastosta (englanninkielisessä hallintapaneelissa 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 Shopifyn hallintapaneelissa, teemaeditorissa, koodieditorissa tai teemasovelluksen kautta, Shopify tallentaa ne haaraan. Commitissa näkyy kauppa ja henkilö, joka muokkasi teemaa viimeksi. Noin 10 sekunnin sisällä tallennetut muutokset tulevat yhtenä committina, joten siinä näkyy viimeisenä tallentanut.

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.

Kun teema ja haara menevät ristiin

Synkronointi toimii luotettavasti, mutta Shopify kertoo itse muutamasta tilanteesta, jotka kannattaa tietää:

• Koodieditori voittaa ilman varoitusta. Teemaeditori varoittaa, jos joku muu on muuttanut samaa tiedostoa, mutta koodieditori ei: siellä tallennettu versio korvaa GitHubin version. Tee koodimuutokset GitHubissa, älä koodieditorissa.

• Tallennus samalla hetkellä kuin muutos GitHubista. Jos joku tallentaa teemaeditorissa juuri kun GitHubista tulee muutos, Shopifyn oma commit voi hylkääntyä. Tämä on harvinaista, ja se näkyy lokeista.

• Lokit ja palautus. Teemakirjastossa teeman kortin View logs (Last saved -ajan vieressä) näyttää viimeisimmät synkronoinnit. Jos teema on jäänyt haarasta jälkeen, Actions > Reset to last commit hakee haaran uusimman version.

• Irrotettu haara pysyy irti. Haaraa ei voi kytkeä takaisin samaan teemaan. Uudelleen kytketty haara tulee uutena teemana, joten julkaistua teemaa ei kannata irrottaa ilman suunnitelmaa.

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.

Pieni kauppa vai Shopify Plus?

Työtapa on sama kaikissa Shopify-tilauksissa, 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.