Korvakorut ja korut

Vorssa Ink

Uusi Impact-teema suunnittelijan mallin pohjalta: uusi etusivu, valikot kuvineen, selkeämmät kokoelmasivut ja kevyempi kauppa.

Ulkoasu-uudistus
Teema
Räätälöinti
Nopeus

Kauppa: vorssaink.fi
Työ: Rajattu projekti
Julkaistu: lokakuu 2026
Aloituksesta julkaisuun: 10 päivää

Avaa kauppa

Uusi kauppa käytössä

Etusivulta valikon ja suodattimien kautta tuotteeseen ja ostoskoriin, tietokoneella ja puhelimella.

Tulokset luvuin

Mitattu ennen ja jälkeen. Vihreä tarkoittaa parannusta.

Teemavirheet

Ennen: ~~131~~ Jälkeen: 0

−131

Shopifyn Theme Check -tarkistus. Tarkistus ajetaan nyt ennen jokaista muutosta.
Etusivun koko

Ennen: ~~11,4 Mt~~ Jälkeen: 3,5 Mt

−69 %

Etusivu latautuu kevyemmin, erityisesti puhelimella ja hitaalla yhteydellä.
Kokoelmasivun koko

Ennen: ~~9,3 Mt~~ Jälkeen: 2,0 Mt

−78 %

Tuotelistaukset avautuvat kevyempinä.
Sovellusupotukset teemassa

Ennen: 8 Jälkeen: 4

−50 %

Käyttämättömät sovellukset pois, tarpeelliset jäivät.
Kovakoodatut ulkopuoliset skriptit

Ennen: 2 Jälkeen: 0

−2

Vanhat skriptit latautuivat joka sivulla, vaikka niitä ei enää käytetty.
Maksullisia sovelluksia korvattu

1

−1 kk-maksu

Ilmaislahja hoituu nyt teeman omalla toiminnolla.
JavaScript etusivulla

Ennen: ~~1,5 Mt~~ Jälkeen: 0,6 Mt

−60 %

Vähemmän koodia, jota puhelimen pitää ladata ja ajaa.
Lataukset etusivulla

Ennen: ~~316~~ Jälkeen: 237

−25 %

Vähemmän erillisiä tiedostoja ja pyyntöjä.
Sivun hyppiminen (CLS)

Ennen: ~~0,15~~ Jälkeen: 0,01

−93 %

Sisältö ei enää siirry latautuessa. Googlen raja hyvälle on 0,1.
Lighthouse-pisteet mobiilissa

Ennen: 46 Jälkeen: 60

+14 pistettä

Googlen mittari etusivun suorituskyvylle puhelimella.

Lähtötilanne

Vanha teema oli palvellut kauppaa vuosia, mutta ilme ja valikot eivät enää vastanneet brändiä. Kauppaan oli myös kertynyt koodia sovelluksista, joita ei enää käytetty, ja ilmaislahja hoidettiin erillisellä maksullisella sovelluksella.

Mitä teimme

Uusi Impact-teema ja etusivu suunnittelijan mallikuvan mukaan
Teemakehitys GitHubissa: kehitysteema esikatseluun, live-teema vasta hyväksynnän jälkeen
Megavalikko kuvineen ja kokoelmille oma Valikkokuva-kenttä
Kokoelmasivuille "Lue lisää" -kuvaukset ja värisuodattimet oikeilla väreillä
Ilmaislahja ostoskoriin teeman omalla toiminnolla ilman maksullista sovellusta
Vanhojen sovellusten koodit siivottu pois: etusivu 69 % kevyempi ja teemavirheet 131 → 0

Lopputulos

Uusi teema julkaistiin lokakuussa 2026. Vanha teema jäi varalle, ja jatkossa jokainen muutos tehdään ensin kehitysteemaan, jossa asiakas näkee sen ennen julkaisua.

Tiimi

Uudistus tehtiin yhteistyönä. Snowball Growth Partnersin Elin vastasi yhdessä kauppias Katan kanssa visuaalisesta ilmeestä ja luovasta suunnasta. Merivirta Digital toteutti teeman, räätälöinnit, siivouksen ja nopeusoptimoinnin.

Mitä teimme tarkemmin

Jokainen kohta kuvineen: miltä se näyttää ostajalle ja miten se toimii kauppiaalle.

Teemakehitys oikeaoppisesti: GitHub, kehitysteema ja live-teema

Teeman koko koodi on GitHubissa, ja kauppa on kytketty siihen Shopifyn omalla GitHub-integraatiolla. Kaupassa on kaksi teemaa: live-teema, jonka asiakkaat näkevät, ja kehitysteema, jossa uudet asiat tehdään ja tarkistetaan.

Jokainen muutos tehdään ensin omaan haaraansa, tarkistetaan Shopifyn Theme Check -työkalulla ja viedään kehitysteemaan. Vorssa Ink ja heidän suunnittelijansa näkevät muutoksen kehitysteeman esikatselusta ja muokkaavat sisältöä siellä. Live-teemaan muutos menee vasta, kun se on hyväksytty.

Live-teemaa ei muokata koskaan suoraan, joten kauppa ei hajoa kesken myynnin
Teemaeditorissa tehdyt muutokset tallentuvat GitHubiin automaattisesti, joten mitään ei katoa
Jokaisesta muutoksesta jää jälki, ja minkä tahansa muutoksen voi perua
Vanha teema jäi kauppaan varalle

Näin muutos kulkee kauppaan

Työhaara Muutos tehdään omaan haaraansa GitHubissa
Theme Check Shopifyn tarkistus: ei virheitä
Kehitysteema Asiakas esikatselee ja muokkaa sisältöä
Live-teema Julkaisu vasta hyväksynnän jälkeen

Kehittäjälle: Shopify GitHub -integraatio: haara main = live-teema, dev = kehitysteema; PR:t deviin, dev → main julkaisuna.

Valikko uudistettiin suunnittelijan mallin mukaan. Tietokoneella pääkohdasta aukeaa laaja valikko, jossa jokaisen kokoelman vieressä on kuva ja ylimpänä "Näytä kaikki" -linkki. Puhelimessa sama valikko toimii kerroksittain, ja kuvat näkyvät joka tasolla.

Kokoelmille lisättiin oma Valikkokuva-kenttä (metakenttä). Kun kauppias lisää kokoelmalle kuvan tähän kenttään, juuri se kuva näkyy valikossa. Näin valikkoon voi valita selkeän, pienessä koossa toimivan kuvan muuttamatta kokoelmasivun isoa kuvaa.

Mistä valikon kuva tulee

Kokoelman Valikkokuva-kenttä, jos siihen on lisätty kuva
Muuten kokoelman oma kuva
Jos sitäkään ei ole, kokoelman ensimmäisen tuotteen kuva

Kehittäjälle: Metakenttä custom.menu_image (tiedosto, kokoelma), luetaan snippetissä navigation-link-image.liquid.

Kokoelmasivut: "Lue lisää" ja värisuodattimet oikeilla väreillä

Kokoelmien pitkät kuvaukset ovat tärkeitä hakukoneille, mutta ne työnsivät tuotteet kauas alas. Nyt kuvauksesta näkyy ensimmäinen kappale, ja loput aukeavat "Lue lisää" -painikkeesta. Tuotteet näkyvät heti, eikä tekstiä tarvinnut poistaa.

Värisuodattimessa jokainen väri näkyy oikeana värinä eikä pelkkänä nimenä, myös kaksiväriset ja kimaltavat sävyt. Ostaja löytää haluamansa värin yhdellä silmäyksellä.

Ilmaislahja ilman maksullista sovellusta

Kaupassa annetaan lahja tietyn summan ylittäville tilauksille. Aiemmin lahja lisättiin ostoskoriin erillisellä maksullisella sovelluksella, joka toi kauppaan myös oman koodinsa.

Nyt sama hoituu teeman omilla asetuksilla. Kauppias valitsee lahjatuotteen ja vähimmäissumman, tai vaihtoehtoisesti tuotteet tai kokoelman, joiden ostaminen tuo lahjan. Lahja ilmestyy ostoskoriin itsestään ja poistuu, jos ehto ei enää täyty. Shopifyn oma "Buy X get Y" -alennus tekee siitä kassalla ilmaisen.

Yksi kuukausimaksu vähemmän
Yksi ulkopuolinen koodi vähemmän hidastamassa kauppaa
Kauppias muuttaa lahjaa ja ehtoja itse teemaeditorissa

Teeman asetukset → Kaupanpäällinen

Kaupanpäällinen käytössä: Kyllä
Lahjatuote: Valitse tuote
Ostosten vähimmäissumma (€): esim. 89
Lahja annetaan, kun: ostosten summa ylittää rajan / korissa on jokin ehtotuotteista
Ehtotuotteet tai ehtokokoelma: Valinnainen

Kuva on piirros teeman asetuksista. Lahja tehdään ilmaiseksi Shopifyn automaattisella Buy X get Y -alennuksella.

Kehittäjälle: Teeman asetus + pieni skripti, joka pitää lahjarivin korissa cart.js-rajapinnalla; korvasi maksullisen sovelluksen.

Optimointi ja nopeus

Vuosien varrella kauppaan oli kertynyt koodia sovelluksista, joita ei enää käytetty, ja ne latautuivat silti jokaisella sivulla. Kävimme jokaisen sovelluksen ja skriptin läpi ja poistimme turhat teemasta. Pelkkä yksi vanha, käyttämätön skripti latasi etusivulla 9,5 megatavua.

Vanhassa teemassa Shopifyn Theme Check -tarkistus löysi 131 virhettä. Uusi teema rakennettiin puhtaalle pohjalle, ja tarkistus ajetaan ennen jokaista muutosta, joten virheitä on nyt nolla.

Sovellusupotuksia 8 → 4: neljä käyttämätöntä tai korvattua sovellusta pois teemasta
Kovakoodattuja ulkopuolisia skriptejä 2 → 0, joista toinen oli yli 1 400 riviä koodia käyttämättömälle toiminnolle
Kahden jo poistetun sovelluksen jäänteet siivottiin pois
Yksi maksullinen sovellus korvattiin teeman omalla toiminnolla
Teemavirheitä 131 → 0, ja tarkistus ajetaan jatkossa ennen jokaista muutosta

Kehittäjälle: Mitattu Lighthouse 12:lla mobiilissa 30.10.2026, kolmen ajon mediaani; vanha teema esikatselutilassa, uusi livenä samalla sisällöllä. Theme Check @shopify/cli 4.9.4.

Samat parannukset sinun kauppaasi?

Kysy hintaa tai kerro, mitä kaupassasi pitäisi parantaa. Asiantuntijamme vastaa sinulle henkilökohtaisesti.

Kysy hintaa