Etusivu » Tuki » Ladattava teema: Volcano

Ladattava teema: Volcano

Starter Yes
Mini Yes
Active Yes
Pro Yes

Volcano-teema on moderni, selkeä ja responsiivinen teema. Voit ladata sen kauppaasi ja ottaa sen käyttöön alla olevien ohjeiden mukaan.

Ominaisuudet

  • Vasen sivupalkki Desktop-näkymässä mahdollistaa pitkät tuoteryhmälistat verrattuna horisontaaliseen navigaatiovalikkoon.
  • Desktop-näkymän maksimileveys 1400px mahdollistaa isojen fonttikokojen käyttämisen ja useiden elementtien sijoittamisen näkyviin ilman, että kokonaisuus menee sekavaksi.
  • Etusivun iso, vaihtuva kuva on nyt entistä helpommin ylläpidettävä.
  • Etusivun pienillä bannereilla voi helposti nostaa tärkeitä tuoteryhmiä tai sivuja esille.
  • Etusivun tekstilohkoja sijoiteltu tuotenostojen ylä- ja alapuolelle hakukoneoptimoinnin helpottamiseksi.
  • Aikaisempia teemoja modernimpi tekniikka mahdollistaa entistä toimivamman mobiilinäkymän.
  • Kieliversioiden liput uudistettu .svg-kuviin, jotka näkyvät terävinä kaikissa tilanteissa.

 

Volcano teema

 

Mobiilinäkymässä yläosa on kompakti ja tuoteryhmävalikko avautuu hampurilaiskuvakkeen alta. Mobiilivalikosta, tuoteryhmälistan alapuolelta, löytyvät helposti kaikki Desktop-näkymässäkin olevat sisällöt.

 

Volcano mobiilinäkymä     Valikko avattuna

 

 

Demo Lataa teema

  1. Lataa teema omalle koneellesi.
  2. Mene kaupan hallinnassa kohtaan Ulkoasu > Omat teemat ja napsauta alareunasta "Tuo teema" -nappia ja valitse teematiedosto.
  3. Valitse "Korvaa etusivun sisältö" VAIN jos haluat, että teeman etusivun esimerkkisisältö tuodaan kauppaan.
  4. Kun teema on ladattu kauppaan, se löytyy kohdasta Ulkoasu > Omat teemat listauksesta alimmaisena. Siellä teemaa voi tarkastella, muokata ja/tai ottaa käyttöön kaupan aktiiviseksi teemaksi.

 

Jos kokeilet uutta teemaa, kaupasta kannattaa ottaa talteen kaupassa mahdollisesti olevat ulkoasukoodit kohdasta Asetukset > Yleiset asetukset > Lisäasetukset > HTML-koodin Head-alue. Nämä head-alueelle lisätyt koodit vaikuttavat kaikkiin kaupan teemoihin ja ulkoasuihin, joten uuden teeman käyttöönotossa voi olla ongelmia, jos asetuksissa on aiemman teeman säätämiseen lisättyjä ulkoasukoodeja. 

Jos uutta teemaa halutaan vain testata ottamatta sitä käyttöön kaupan asiakaspuolella, kaupan Head-alueelta voidaan siirtää ulkoasukoodit nykyisen kaupan teeman ulkoasun elementtiin. Kaupan alatunnisteeseen voi siis lisätä "Testi(HTML)" -elementin ja kopioida Asetukset > Yleiset asetukset > Lisäasetukset > HTML-koodin Head-alue alta löytyvät koodit sinne. Tällöin ne vaikuttavat vain kyseisen teeman ulkoasuun, ja taustalla voi helpommin testata muita teemoja.

 

Muokkaaminen

Toimiakseen oikein, teemassa on esimääritetty joitakin asetuksia.

Sivuelementit

Voit muokata rakenteeseen lisättäviä sivuelementtejä Ulkoasu > Ulkoasun yksityiskohtainen muokkaus -sivulla. Esimerkkisisällöt ovat seuraavanlaisia:

  • Ylätunniste 1 - Vasemmassa yläkulmassa on teksti/html -elementti, jossa on verkkokaupan palvelulupaus muutamalla sanalla ilmaistuna. Lisää tähän oma palvelulupauksesi.
    Oikeassa yläkulmassa on kirjautumislinkit sekä liput kielen vaihtamiseen. Jos kaupassasi on valittavissa vain yksi kieli, voit poistaa tämän elementin viemällä hiiren sen päälle ja painamalla poista-kuvaketta.
  • Ylätunniste 2 - Vasemmalla logo ja oikealla tuotehaku sekä ostoskori. Näitä ei tule muuttaa.
  • Ylänavigaatiopalkki muille kuin tuoteryhmien linkeille. Ylänavigaation taustaväriä käytetään myös "tuote lisätty ostoskoriin" ilmoituksen taustavärinä sekä etusivun pienten bannereiden tekstilaatikkkojen taustavärinä, joten voit lisätä tähän oman brändivärisi.
  • Vasemmasta sivupalkista löytyvät elementit "sivujen puunäkymä laatikkona", joka tarkoittaa tuoteryhmälistaa. Jos tuoteryhmällä on alatuoteryhmiä, näkyy tuoteryhmän edessä kuvake, josta alatuoteryhmät saa avattua.
    "Viimeksi katsotut tuotteet" listaa asiakkaan aiemmin katsottuja tuotteita, myös edellisellä vierailulla katsotut tuotteet.
    "Miksi valita meidät"  sisältää vapaasti muokattavaa sisältöä, johon voit kirjoittaa haluamiasi asioita asiakkaan vakuuttamiseksi.
    "Tarjoukset"-laatikkoon listataan tuotteet, jotka on lisätty "Tarjoustuotteet" tyyppiseen tuoteryhmään. Luo ensin sivu Sisältö/Tuoteryhmät > Lomakenäkymä -sivulla.
    "Seuraa meitä" sisältää vapaasti muokattavaa sisältöä, johon on laitettu esimerkkinä somepalveluita. Muokkaa näihin omien some-kanaviesi osoitteet ja poista ylimääräiset palvelut listasta.
    "Alatunniste" kohdassa voit muokkata alatunnisteeseen oikeat infosivut ja halutessasi käyttämiesi maksu- ja kuljetuspalvelujen logot. Yhteystiedot tulevat automaattisesti Asetukset > Yleiset asetukset > Osoite -sivun tiedoista.

 

Ulkoasun yksityiskohtainen muokkaus

 

Etusivun sisältö ja asettelu

Etusivu rakennetaan lisäämällä seuraavat kuvaukset:

  • Pitkä kuvaus = vaihtuvat kuvat
  • Pitkä kuvaus 2 = lyhyt esittelyteksti ison bannerin alla
  • Pitkä kuvaus 3 = pienet bannerit sekä tuotenostojen otsikko
  • Pitkä kuvaus 4 = etusivun alalaitaan tuleva esittelyteksti, johon voi sijoittaa mm. hakukoneoptimointiin tarpeellista sisältöä

Etusivun asettelun tulee olla seuraava:

Etusivun asettelu

 

Etusivun iso banneri

Etusivun iso banneri muokataan vaihtuvaksi kuvaksi, kun etusivun ensimmäiseen pitkään kuvaukseen lisätään kuvia allekkain. Kuvan "Vaihtoehtoinen teksti" ja "Avustava otsikko" kentistä luodaan bannerin päällä näkyvät tekstit. Jos teet kuvasta linkin, tee linkki ensin ja syötä vasta sitten kuvan tekstit.

Bannerikuvan mitat ovat 1200px x 600px. Korkeus voi olla myös isompi tai pienempi, mutta tärkeää on, että kaikki vaihtuvat kuvat ovat samankokoisia. Kiinnitä huomiota bannereiden tiedostokokoihin, ettei sivun latausaika kasva tarpeettoman pitkäksi. Kuvan voi optimoida kuvankäsittelyohjelmassa tai esimerkiksi tinyjpg.com palvelussa.

 

 

Etusivun pienet bannerit

Pieniä bannereita voidaan käyttää esimerkiksi tärkeimpien tuoteryhmien esittelyyn. Bannereita näytetään desktopissa 3 rinnakkain ja mobiilissa yksittäin. Luo "Pitkä kuvaus 3" kenttään bullet-lista, johon lisäät kuvan jokaiselle bulletille. Myös pienissä bannereissa luodaan kuvan päälle tekstilaatikko ja tekstit kirjoitetaan kuvan "Vaihtoehtoinen teksti" ja "Avustava otsikko" -kenttiin.

Kuvien mitat ovat 400px x 500px. Kuten isoissakin bannereissa, korkeus voi olla isompi tai pienenmpi.

Teeman asentaminen palveluna

Jos teeman käyttöönottaminen tuntuu liian hankalalta tai se tuntuu vievän liikaa aikaa, meiltä on mahdollista myös ostaa teeman asennuspalvelu hintaan 295€ (alv 0 %). Palvelu kattaa teeman, logojen ja haluttujen värien asentamisen ja mahdollisen tarvittavan pienen hienosäädön. Isommat teeman jatkomuokkaukset eivät kuulu teeman asentamisen palveluun ja tällaisista muokkauksista tulee sopia tarkemmin erikseen.

Muutoshistoria:

  • 2020-11-26 Versio 1.2 - Muokattu kuvakesarja käyttämään FontAwesome 4.7 versiota paremman selainyhteensopivuuden ja nopeamman latautumisen takia
  • 2020-09-09 Versio 1.1 - Desktop-näkymän tuotelistassa isommat tuotekuvat 2 ja 3 saraakkeen näkymässä, lisätty uusia kielilippuja, vähennetty elementtien siirtymistä sivun latauksen aikana.
  • 2020-05-22 Korjattu tuoteryhmävalikon kuvakkeet toimimaan myös useamman tason alatuoteryhmien kanssa. Korjattu alkuperäisen kaupan logon näkyminen teeman asennuksen jälkeen.

Jaa sisältö