Miten suunnitella Shopify-sivusto 6 vaiheessa

Sara Mote ja minä perustimme MOTE-toimiston vuonna 2014. Erikoisalaamme on verkkokaupankäynti, ja tarjoamme hienostunutta suunnittelua, huipputeknologiaa ja ensiluokkaista palvelua tällä jatkuvasti muuttuvalla markkinalla. Verkkokehittäjän urani aikana olen pitänyt yllä haluani innovointiin ja keskittynyt luomaan verkkosivustoja brändeille, jotka haluavat rakentaa kestäviä suhteita yleisöihinsä. Seuraavat oivallukset perustuvat 26 vuoden aikana keräämääni kokemukseen.

Verkkokauppasivuston suunnittelun tavoitteena tulisi aina olla kauniin ja strategisesti toimivan lopputuloksen luominen. Shopifyn avulla on helppoa luoda molemmat tavoitteet täyttävä verkkokauppasivusto myös ilman aiempaa koodaus- tai suunnittelukokemusta.

Shopify  on johtava verkkokauppa-alusta, jonka avulla kauppiaat voivat rakentaa verkkokauppoja käyttäen muokattavia teemoja. Jokainen Shopify-sivusto on myös varustettu yhteen klikkaukseen perustuvalla kassatoiminnolla ja tekoälyominaisuuksilla, jotka auttavat kirjoittamaan tuotekuvauksia, vastaamaan usein kysyttyihin kysymyksiin ja laatimaan markkinointisähköpostiviestejä.

Nämä työkalut ovat helppokäyttöisiä, joten myymisen tee se itse -sivustolta käsin onnistuu saman tien. Kun Shopify-kaupan laajentaminen tulee ajankohtaiseksi, avuksi voi palkata ammattilaissuunnittelijan.

Miten suunnitella Shopify-sivusto

Shopify-sivuston suunnittelussa tärkeintä on luoda vahva perusta eli suorituskykyyn ja käytettävyyteen keskittyvä verkkosivusto, joka vahvistaa brändiä auttaen sitä erottumaan markkinoilla alusta alkaen.

Seuraavat vaiheet auttavat Shopify-sivuston suunnittelussa:

1. Luo brändisi tyyliopas

Ennen verkkosivuston rakentamisen aloittamista on aika tehdä brändäyspäätöksiä. Brändiohjeet ovat hyvä lähtökohta. Jos et ole vielä laatinut niitä, nyt on sopiva hetki päättää brändisi typografiasta, väreistä ja logosta.

Typografia

Aloita fontista, joka on helposti luettavissa mutta ei liian geneerinen. Yhtenä vaihtoehtona on Shopify-fonttikirjaston Basic Commercial. Se on ilmainen, laadukkaan näköinen fontti, jonka käyttäjiin kuuluu The Row’n kaltaisia luksusbrändejä.

Typografia voi välittää paljon persoonallisuutta nopeasti. Fonttivalinta vaikuttaa myös verkkosivuston ulkoasun visuaaliseen asetteluun, joten se kannattaa valita ensimmäiseksi ja rakentaa muu sivusto sen pohjalta.

Väri

Valittu väripaletti voi vaikuttaa siihen, miten kuluttajat kokevat brändin ja ymmärtävät sivuston tiedot. Voimakaskontrastinen väripaletti on kannattava valinta sen luettavuuden ja saavutettavuuden vuoksi.

Voit valita brändin väripaletiksi esimerkiksi mustan ja valkoisen. Jopa näiden perusvärien sisällä voi välittää tunnelmaa ja brändiä valitsemalla tietyt mustan ja valkoisen sävyt, kuten hiilenharmaan ja lämpimän luonnonvalkoisen sävyn.

Logo

Logo on keskeinen elementti yrityksen bränditietoisuuden ja -tunnettavuuden rakentamisessa. Käytä aikaa logon suunnittelemiseen. Sen tulisi olla mieleenpainuva ja välittää brändin ydin.

Jos päätät tehdä yhteistyötä suunnittelijan kanssa, hän voi tarjota sinulle valittavaksi useita eri vaihtoehtoja ja hioa valitsemaasi vaihtoehtoa. Jos suunnittelijan käyttäminen ei ole mahdollista, voit käyttää verkkopohjaista logotyökalua ensimmäisen logon luomiseen.

2. Valitse teema

Shopify-teemakaupassa on tarjolla lukuisia vaihtoehtoja. Joidenkin maksullisten teemojen hinta voi nousta jopa 450 dollariin (n. 392 euroon).

Jos et ole varma mistä aloittaisit, kokeile Dawnia. Dawn on ilmainen, mobiililaitteilla hyvin toimiva Shopify-teema, mikä on erittäin tärkeää konversion kannalta. Se on laadukkaan Shopify-kaupan täydellinen perusta.

Ota seuraavat asiat huomioon teeman valinnassa:

Budjetti

Jos olet uusi yrittäjä ja sinulla on käytettävissä rajallisesti varoja, voit valita ilmaisen teeman ja ottaa selville, miten pitkälle se riittää. Voit aina päivittää premium-teemaan liiketoiminnan kasvaessa. Silloin sinulla on paljon parempi käsitys siitä, mistä ominaisuuksista kannattaa maksaa. Jos haluat enemmän ominaisuuksia mutta sinulla ei ole varoja suunnittelijan palkkaamiseen, premium-teema voi olla hyvä vaihtoehto.

Tuotevalikoiman koko

Teeman valinta määräytyy osittain sen mukaan, kuinka monta tuotetta valikoimasi sisältää. Suurin osa ilmaisista ja maksullisista teemoista tukee yli 200:a tuotetta, mutta joidenkin laadukkaiden teemojen (kuten Dawn:n) enimmäiskapasiteetti on 199 tuotetta. Lisäksi muutamiin teemoihin mahtuu vain yhdeksän tuotetta. Voit suodattaa teemoja helposti tuotevalikoiman koon mukaan Shopify-teemakaupassa.

Verkkosivuston ominaisuudet

Jos Shopify-kaupassasi tulee olla tiettyjä ominaisuuksia, kuten kiinteä navigointi, video tai nopea ostosmahdollisuus, voit käyttää Shopify-teemakaupan hakupalkkia löytääksesi vain ne teemat, joissa on kyseinen ominaisuus.

Käyttökokemus mobiililaitteilla

Jos suurin osa verkkosivustosi liikenteestä tulee mobiililaitteilta eli asiakkaasi löytävät yleensä tuotteesi esimerkiksi Instagramin tai TikTokin kautta, sinun kannattaa panostaa sivuston nopean latautumisaikaan hienojen ominaisuuksien, kuten videon tai mega-valikon, sijaan.

Mobiililaitteillaan sivustoasi käyttävät vierailijat eivät ehkä käytä näitä ominaisuuksia lainkaan, ja he todennäköisesti poistuvat sivustoltasi, jos sen latautuminen puhelimeen kestää liian kauan. Tämä parantaa myös sivustosi hakukoneoptimointia (SEO). Kun vertailet teemoja keskenään, muista kokeilla teeman mobiiliversiota tarkastelemalla sitä mieluiten puhelimestasi.

3. Lisää brändielementtejä

Kun olet valinnut teeman, on aika lisätä sivustolle brändäystä. Lisää brändielementtejä Shopify-sivustollesi seuraavien vaiheiden avulla:

Lisää logo ja brändivärit

Valitse Shopify-hallintapaneelissa Asetukset > Yleiset, ja valitse sitten Brändiresurssit-osiossa Hallitse. Tämän jälkeen voit lisätä brändisi logon ja värit. Niitä käytetään automaattisesti valitsemaasi Shopify-teemaan ja muissa kanavissa, joissa on käytössä brändin rajapintaominaisuus.

Muokkaa teemaa

Shopify-kaupan muokkaaminen onnistuu myös teemaeditorin kautta. Siirry kohtaan Verkkokauppa > Teemat, napsauta teemaa, jota haluat muokata, ja valitse Mukauta. Napsauta sitten teema-asetusten rataskuvaketta, jolloin voit muokata esimerkiksi typografiaa ja asettelun ominaisuuksia, kuten vaakasuoraa ja pystysuoraa etäisyyttä.

Luo brändätty kassakokemus

Pienet yksityiskohdat voivat kertoa paljon brändistä. Täysin brändätyn kokemuksen saavuttaminen edellyttää myös kassakokemuksen muokkaamista. Tähän kuuluvat esimerkiksi kiitos- ja tilauksen tilasivut, jotka näkyvät kassaprosessin jälkeen kaikissa Shopify-kaupoissa.

Näiden sivujen tulisi sopia verkkosivuston muuhun ilmeeseen. Voit lisätä niihin logon sekä muuttaa värejä ja fontteja Shopify-hallintapaneelin kautta siirtymällä kohtaan Asetukset > Kassa > Mukauta.

Muokkaa sähköpostimallia

Kun asiakas tekee tilauksen, saat mahdollisuuden rakentaa suhdetta häneen. Sen sijaan, että lähettäisit tilaukseen liittyvän geneerisen sähköpostiviestin, voit luoda brändätyn sähköpostimallin Shopifyn hallintapaneelin kautta.

Siirry kohtaan Asetukset > Ilmoitukset > Asiakasilmoitukset > Mukauta sähköpostimallia.

Lisää brändisi logo ja värit, jotta sähköpostiviesti on helppoa tunnistaa saman tien. Muokkaa myös tekstiä muistuttaaksesi asiakasta yhteisistä arvoistanne tai auta häntä innostumaan ostoksestaan tuoteopastuksen avulla. Käytä sähköpostiviestissä brändisi ääntä ja persoonallisuutta.

Integroi valokuvia

Yksinkertaisen, intuitiivisen verkkosivuston ei tarvitse tarkoittaa tylsää verkkosivua. Voit välittää paljon brändipersoonallisuutta elämäntapavalokuvien ja tuotteiden valokuvauksen avulla. Käytä kuvia johdonmukaisesti tuotesivuilla esimerkiksi kuvaamalla jokaisen tuotteen samanväristä taustaa vasten samanlaisessa valaistuksessa.

Korkealaatuinen tuotekuvaus lisää asiakkaiden luottamusta ostamiseen, minkä ohella valitut värit, tekstuurit ja rekvisiitta voivat vaikuttaa tunnelman luomiseen ja brändin vahvistamiseen.

4. Tarkista suorituskyky

Sinulla voi olla maailman kaunein sivusto, mutta se ei merkitse asiakkaillesi mitään, jos se ei lataudu kunnolla. Siksi verkkosivuston toiminnallisuuden tulisi aina olla ensisijainen prioriteetti Shopify-kauppaa ja -sivustoa suunnitellessasi.

Verkkosuorituskyvyn mittaamisen standardi on Core Web Vitals. Tämä Googlen termi viittaa käyttäjien kannalta olennaisimpiin perustoimintoihin: latausnopeus, vuorovaikutteisuus ja visuaalinen vakaus.

Jos verkkosivuston keskeiset toiminnot eivät toimi hyvin, sivuston vierailijoiden kokemus sivustosta on todennäköisesti turhauttava. Kävijät voivat jopa poistua sivustolta, mikä lisää poistumisprosenttia. Pahimmassa tapauksessa he eivät ehkä löydä sivustoa lainkaan, sillä hakukoneet alentavat sivuston näkyvyyttä, jos sen keskeiset toiminnot eivät ole standardien mukaisia.

Voit tarkistaa sivustosi keskeisten toimintojen tilan Shopifyn hallintapaneelista siirtymällä kohtaan Myyntikanavat > Verkkokauppa > Teemat.

Yksi Dawnin kaltaisen minimalistisen teeman eduista on se, että se toimii hyvin heti alusta alkaen. (Kaikki Shopify-teemat on tarkastettu nopeuden ja luotettavuuden osalta.) Kun sivusto perustuu vahvaan suorituskykyyn, on helppoa havaita, miten muutokset vaikuttavat sivuston keskeisiin toimintoihin.

Shopify-sivuston suunnittelussa on kyse tasapainosta. Esimerkiksi video voi olla todella tehokas tarinankerrontaväline, mutta sen suuri tiedostokoko voi hidastaa latausnopeutta.

Jacquie Aiche -korubrändille ratkaisuna oli paikkamerkkikuvan näyttäminen sellaisille käyttäjille, joiden internet-yhteys on hitaampi. Näin käyttäjien kokemus ei heikenny hitaammasta latausnopeudesta huolimatta.

Video, suuret kuvat ja muut visuaaliset elementit eivät ole ainoita asioita, jotka voivat vaikuttaa sivuston nopeuteen. Liitännäiset eli kolmansien osapuolten koodinpätkät, jotka lisäävät ominaisuuksia Shopify-sivustolle tai yhdistävät sen muihin alustoihin, voivat myös hidastaa sivustoa.

Sinun on päätettävä, mitkä ominaisuudet ovat suorituskyvyn heikkenemisen arvoisia, ja millaisista keskeisistä toiminnoista olet valmis tinkimään muun brändikokemuksen parantumisen kustannuksella.

5. Keskity kuratointiin

Verkkokauppana voit vaikuttaa asiakkaidesi päätöksiin sivustoasi koskevien päätösten kautta. Kuratointi on keskeinen osa laadukasta verkkokaupan esillepanoa. Käyttäytymistaloustieteilijät kutsuvat tätä valinta-arkkitehtuuriksi, millä viitataan Richard Thalerin ja Cass Sunsteinin kirjassaan Nudge kehittämään termiin.

Tässä on esimerkki valinta-arkkitehtuurista: Oletetaan, että verkkosivustollasi on Uutuudet-sivu. Sen sijaan, että näyttäisit tuotteet oletusjärjestyksessä, voit järjestää ne manuaalisesti niin, että hyvin toisiinsa sopivat tuotteet ovat vierekkäin.

Tällainen harkittu kuratointi voi vaikuttaa hienovaraisesti asiakkaiden luottamukseen. He saattavat ajatella: "Jos tämä brändi välittää tarpeeksi järjestääkseen tämän Uutuudet-sivun, he saattavat välittää myös paketistani." Shopifyn vedä ja pudota -periaatteella toimiva teemaeditori helpottaa tuotteiden ja kuvien järjestämistä, jolloin parhaan asiakaskokemuksen tarjoaminen on yksinkertaista.

Mallistosivut eivät ole ainoa paikka, jossa voit esitellä taitojasi kuraattorina. Shopifyn Searh & Discovery -sovelluksen avulla täydentäviä tuotteita voi näyttää jokaisella tuotesivulla.

Jos omistat esimerkiksi muotiliikkeen ja joku katsoo T-paidan tuotesivua, tämä on loistava tilaisuus sanoa: "Uskon, että tämä T-paita näyttäisi hyvältä näiden housujen ja tämän takin kanssa." Täydentävien tuotteiden kuratointi ei ainoastaan auta luomaan luottamusta, vaan se voi myös lisätä tilausten keskimääräistä arvoa.

6. Harmonisoi eri kanavien välillä

Shopify-kauppasi ei todennäköisesti ole ainoa paikka, josta asiakkaat voivat löytää verkkoliiketoimintasi. Jos käytät sosiaalista mediaa tai muita alustoja, on tärkeää sisällyttää Shopify-kauppasi osaksi laajempaa monikanavaista myyntistrategiaa.

Jos käytät esimerkiksi vaikuttajamarkkinointikampanjaa Instagramissa, lisää kuva kyseisestä vaikuttajasta myös suoraan sivustosi etusivulle. Tällöin Instagramin kautta sivustollesi saapuvat kävijät kokevat jatkuvuuden tunnetta. Heidän odotuksensa täyttyvät, ja alat heti luoda luottamusta.

Shopify-sovelluskaupasta löytyy sovelluksia, joiden avulla Shopify-sivuston voi yhdistää muihin kanaviin, kuten Instagramiin ja TikTokiin. Tällöin voit hallita kaikkia kampanjoitasi yhdestä paikasta: Shopifyn hallintapaneelista.

Kun kaikki toiminnot on keskitetty yhteen paikkaan, brändin muutosten johdonmukainen toteuttaminen on huomattavasti helpompaa.

Milloin Shopify-kauppaa varten kannattaa palkata suunnittelija?

Kun brändisi kasvaa, saatat huomata, että verkkosivuston omatoiminen hallinta ei enää ole järkevää.

Voi olla aika palkata suunnittelija Shopify-kauppaasi, jos:

• sivuston parissa käytetty aika vie aikaa tärkeiltä Shopify-kaupan liiketoimintatoimilta, kuten tuotteiden suunnittelulta, mallistojen kuratoinnilta tai henkilöstön hallinnalta

• Shopify-teemasi ei enää täytä tarpeitasi

• Olet brändäämässä liiketoimintaasi uudelleen ja haluat sitä vastaavan uuden verkkosivuston

Hyvä suunnittelija tai kehittäjä pysyy mukana brändin kasvaessa, käy läpi analytiikkaa kuukausittain ja suosittelee tarvittaessa päivityksiä tai uudistuksia. Hän voi myös lisätä mukautettuja, valmiit mallit ylittäviä ominaisuuksia verkkosivuston tarpeiden monimutkaistuessa.