Kaikkien MyCashflow-verkkokauppojen ulkoasua on mahdollista muokata kätevien graafisten työkalujen avulla ilman koodausosaamista. Tässä artikkelissa käydään läpi ulkoasun muokkaamisen perusteet ja joitakin esimerkkejä yleisistä muokattavista elementeistä.

MyCashflow-verkkokaupan ulkoasua kutsutaan teemaksi. MyCashflow tarjoaa käyttöön useita ilmaisia valmisteemoja, joista voit valita verkkokaupallesi tarkoituksenmukaisen perusulkoasun ja muokata teemaa sitten oman tyylisi mukaiseksi.

Teeman asentaminen ja valmistelu muokattavaksi

Tässä pikaoppaan osassa

1/3: Kehitysversion luominen

Teemaa kannattaa muokata aina verkkokaupan piilotetussa kehitysversiossa, jotta voit tehdä muutokset rauhassa loppuun, ennen kuin julkaiset ne verkkokaupan asiakkaille.

Versioiden avulla voit myös mm. luoda erikielisiä verkkokauppoja, B2B-asiakkaille tarkoitetun verkkokaupan tai muita eri URL-osoitteissa toimivia verkkokauppoja, joilla voi olla kaikilla erilliset ulkoasut, tuotevalikoimat, yhteystiedot yms.

Katso alta vuorovaikutteinen esimerkki sekä vaiheittaiset ohjeet kehitysversion luomiseksi.

  1. Mene hallintatyökalun sivulle Ulkoasu > Versiot.
  2. Luo uusi versio painamalla vasemman palstan Uusi versio -painiketta.

    Versiolomake aukeaa.

  3. Täytä versiolomakkeelle ainakin seuraavat tiedot:
    • Version nimi: Anna nimeksi esim. Kehitysversio.
    • URL-osoite: Syötä osoite muodossa dev.KAUPAN-NIMI.mycashflow.fi
    • Sulje väliaikaisesti: Varmista, että versio on suljettu (tämä on oletusarvo, jos olet vasta perustamassa kauppaa).
  4. Tallenna lomake.

2/3: Valmisteeman asentaminen kehitysversioon

MyCashflow'ssa on saatavilla useita, erityyppisten verkkokauppojen käyttöön soveltuvia valmisteemoja, jotka ovat muokattavissa helppokäyttöisen graafisen työkalun avulla. Voit muuttaa esimerkiksi teemojen värejä, fontteja ja valikkorakenteita ja lisätä niihin omia bannerikuviasi.

Aloita ulkoasun muokkaaminen ottamalla haluamasi valmisteema käyttöön:

  1. Valitse aiemmin luomasi kehitysversio vasemman yläkulman versiovalikosta.
  2. Mene hallintatyökalun sivulle Ulkoasu > Teemat.
  3. Selaa sivun teemalistaa ja valitse haluamasi teema painamalla Muokkaa teemaa -painiketta.

    Teemaeditori aukeaa.

  4. Paina oikean yläkulman Julkaise muutokset -painiketta.

    Toiminto asettaa valitsemasi teeman käyttöön verkkokaupassa.

Nyt kun teema on käytössä verkkokaupassa, katso alta ohjeet teeman muokkaamisen aloittamiseen.

3/3: Teeman muokkaaminen

Kun olet valinnut käyttöön haluamasi valmisteeman, voit alkaa muokata sitä:

  1. Mene hallintatyökalun sivulle Ulkoasu > Versiot.
  2. Valitse aiemmin luomasi kehitysversio vasemman reunan versiovalikosta.

    Version tiedot aukeavat.

  3. Paina Muokkaa teemaa -painiketta.

    Teemaeditori aukeaa.

Nyt olet valmis käyttämään teemaeditoria, jolla pääset mukauttamaan asentamaasi valmisteemaa.

Editorin vasemman reunan sivupalkista löydät käytettävissä olevat teema-asetukset.

Teemaeditori tallentaa kaikki tekemäsi muutokset automaattisesti luonnoksina, jotka eivät suoraan näy verkkokaupan kävijöille. Muutokset jäävät siis talteen, vaikka poistuisit välillä teemaeditorista.

Oikean yläkulman Julkaise muutokset -painike tekee muutoksista julkisia. Kaikkia teema-asetuksia on kuitenkin mahdollista muokata vielä julkaisun jälkeenkin.

Teemaeditorin avulla voit muokata verkkokauppasi ulkoasua monin tavoin. Tutustu alla oleviin esimerkkeihin, joiden mukaisesti voit muokata valmisteemaa omalle verkkokaupallesi sopivaksi.

4/4: Teeman julkaiseminen

Kun olet kehittänyt teeman valmiiksi piilotetussa kehitysversiossa, voit julkaista muutokset kopioimalla teeman asetukset julkiseen versioon.

  1. Mene hallinnan Ulkoasu > Versiot -sivulle.
  2. Paina vasemman palstan Kopioi teeman asetukset -linkkiä.

    Kopiointinäkymä aukeaa.

  3. Valitse ensin versio, jonka asetukset haluat kopioida, ja paina Valitse versio ‑painiketta.
  4. Valitse kohdeversio, johon asetukset kopioidaan, ja paina Kopioi-painiketta.

Tekemäsi muutokset ovat nyt julkisia verkkokaupassa.

Oletusteeman responsiivisuus

Oletusteema on optimoitu toimimaan sekä mobiili- että työpöytälaitteilla. Ulkoasu mukautuu automaattisesti käytettävissä olevaan tilaan. Esimerkiksi navigaatio siirtyy hampurilaisvalikkoon, ja tuotelistoilla rinnakkain näkyvien tuotteiden määrä muuttuu.

Voit testata responsiivisuutta teemaeditorin yläpalkin laitevalinnoilla.

Navigaation määrittäminen

Teemaeditorin Navigaatiomalli-kohdasta voit valita tuoteryhmävalikon tyypin:

  • Ylänavigaatio: Tuoteryhmävalikko sijaitsee vaakasuuntaisena palkkina ylätunnisteessa. Tämä toimii parhaiten silloin, kun kaupassa on päätason tuoteryhmiä niin vähän, että ne sopivat työpöytäkoossa yhdelle riville.

    Ylänavigaatiosta on saatavilla muutama variaatio, jotka muuttavat hieman navigaatiopalkin asettelua ja sisältöä.

  • Sivunavigaatio: Tuoteryhmävalikko sijaitsee työpöytäkoossa vasemmassa sivupalkissa. Tämä on usein sopivin verkkokaupoille, joissa on suuri määrä tuoteryhmiä .
Kokeile, millainen navigaatiomalli toimii parhaiten omassa verkkokaupassasi, Voit muuttaa navigaatiomallia koska tahansa.

Editorin Yläosan valikot -osiossa taas voit määrittää, näkyykö sivuston ylätunnisteessa

  • kielivalikko (jos verkkokaupassa on useita kieliversioita)
  • valuuttavalikko (jos verkkokauppaan on asennettu Valuuttamuunnin-laajennus)
  • sisältösivuvalikko (sisältösivut näkyvät joka tapauksessa sivuston alatunnisteessa).

Etusivun muokkaaminen

Verkkokaupan etusivu on kaupan ylimmän tason tuoteryhmä (tuoteryhmistä puhuttiin pikaoppaan 2. luvussa). Tämä tarkoittaa, että voit muokata etusivun sisältöä hallintatyökalun tuoteryhmälomakkeen kautta.

Etusivun ulkoasu taas määritetään teemaeditorissa, jonka Etusivu-kohdan asetusten avulla voit lisätä etusivulle seuraavat elementit:

  • Bannerikaruselli, joka näyttää asiakkaan selattavissa olevia kuvabannereita etusivun yläosassa. Voit myös asettaa bannerit vaihtumaan automaattisesti muutaman sekunnin välein.

    Katso alta ohjeet bannerien käyttöön.

  • Etusivun esittelyteksti ja tuoteryhmäkuva.
  • Mainostettavien tuotteiden ja/tai tuoteryhmien listat.

    Voit merkitä tuoteryhmät ja tuotteet mainostettaviksi hallintatyökalussa niiden hallintalomakkeilla (ks. pikaoppaan luku 2) käyttämällä Mainostettava tuote/tuoteryhmä -valintaa.

  • Verkkokaupan suosituimpien (eli myydyimpien) tuotteiden lista.
  • Verkkokaupan uusimpien tuotteiden lista.

Värien muokkaaminen

Teemaeditorin Värit-valikossa voit asettaa koroste- ja taustavärin verkkokaupan eri elementeille.

Korosteväri määrittää muun muassa painikkeiden sekä ilmoitusnauhan ja alatunnisteen värin.

Tekstin väri määrittyy automaattisesti koroste- tai taustavärin perusteella.

Esim. painikkeissa teksti on musta, jos korosteväri on vaalea, ja vastaavasti teksti on valkea, jos korosteväri on tumma.

Kokeile erilaisia väriasetusten yhdistelmiä ja julkaise muutokset, kun olet tyytyväinen lopputulokseen.

Fonttien muokkaaminen

Teemaeditorin Fontit-osiossa voit valita otsikkojen ja leipätekstin fontin ja tekstin koon. Valittavissa on ennalta määritetty lista Google Fonts -palvelun yleisiä fonttiperheitä.

Kokeile eri fontteja ja julkaise muutokset, kun olet löytänyt hyvät asetukset.

Otsikolle ja leipätekstille on usein hyvä valita erilaiset, mutta yhteensopivat fontit.

Kiinnitä myös huomiota tekstin kokoon: valitse tarpeeksi suuri fonttikoko, joka on helppo lukea, mutta ei vie tarpeettoman paljon tilaa sivulla.

Oletusteeman bannerien käyttäminen

Oletusteema sisältää useita valmiita banneripaikkoja, joihin voit lisätä omia bannerikuviasi. Näiden avulla voit helposti tuoda oman brändisi mukaista tyyliä kaupan ulkoasuun.

Alla käydään läpi esimerkkinä, miten voit lisätä verkkokaupan verkkokaupan etusivun yläosaan bannerikarusellin:

  1. Mene hallintatyökalun sivulle Sisällöt > Bannerit.
  2. Paina Uusi banneri -painiketta.

    Bannerilomake aukeaa.

  3. Täytä bannerilomakkeelle ainakin seuraavat tiedot:
    • Nimi: Anna bannerille nimi, jonka haluat näkyvän otsikkona bannerikuvan päällä verkkokaupassa. Voit jättää kentän tyhjäksi, jos et halua bannerille otsikkoa.
    • Näytä versiossa: Valitse aiemmin luomasi kehitysversio.
    • Banneriryhmä: Valitse valikosta Etusivun iso banneri.
    • Banneri: Syötä tähän haluamasi bannerikuva omalta koneeltasi. Kuvan suositusmitat ovat 2000x700 px.
    • Teksti: Kirjoita halutessasi bannerille sisältöteksti, joka näkyy kuvan päällä verkkokaupassa.
  4. Paina lomakkeen lopussa olevaa Tallenna-painiketta.

Tallentamisen jälkeen uusi banneri löytyy Bannerit-valikosta Etusivun iso banneri ‑ryhmän alta. Tarkistaaksesi, miltä banneri näyttää verkkokaupassa, paina yläpalkin Siirry kauppaan ‑painiketta.

Jos haluat lisätä karuselliin muita bannereita, toista yllä olevat vaiheet.

Lisätietoja

Tässä pikaoppaan luvussa käytiin läpi perusasioita kaupan ulkoasun hallinnasta. MyCashflow'n oletusteema mahdollistaa paljon muitakin mukautusvaihtoehtoja, joihin voit tutustua tarkemmin oletusteeman käyttöohjeissa.