Etusivu » Tuki » Ladattava teema: Vilkas Vanilla

Ladattava teema: Vilkas Vanilla

Starter Yes
Mini Yes
Active Yes
Pro Yes

VilkasVanilla -teema on moderni selkeä responsiivinen teema ilman perinteisiä sivupalkkeja. Voit ladata sen kauppaasi ja ottaa sen käyttöön alla olevien ohjeiden mukaan. Kauppaan ladattavana teemana VilkasVanilla soveltuu parhaiten, jos sitä ei jatkomuokata kovin paljoa verkkokaupan asetuksista. Jos haluaa itse muokata ja rakentaa kauppansa ulkoasua enemmän, niin kannattaa valita jokin ulkoasun asetuksista suoraan löytyvistä teemoista. 

Ylätunniste 2 -aluetta, jossa on kaupan logo, hakukenttä ja ostoskorin elementti ei kannata muokata kuin muokkaamalla logo-elementtiin oma logo esimerkin tilalle. Vaikka isolla näytöllä ylätunnisteissa näyttäisi olevan tyhjää tilaa, niin jos tälle alueelle lisää tai vaihtaa elementtejä, ne eivät välttämättä enää toimi responsiivisesti ja mahdu nätisti mobiililaitteen näytölle.

Vilkas Vanilla

 

Mobiilinäkymässä ylaosa on kompakti ja tuoteryhmävalikko avautuu hampurilaiskuvakkeen alta. Päätuoteryhmää painamalla avautuu 2. ja 3. tason alstuoteryhmät näkyviin.

Vilkas Vanilla mobiilinäkymä     Tuoteryhmävalikko avattuna

 

Demo Lataa teema

 

Käyttöönotto

Saat lisättyä teeman kauppaasi seuraavasti...

1) Lataa teema tästä omalle koneellesi
2) Kaupan hallinnassa kohdassa Ulkoasu > Omat teemat napsauta alareunasta "Tuo teema" -nappia ja valitse teematidosto.
3) Valitse "Korvaa etusivun sisältö" jos haluat, että teeman etusivun esimerkkisisältö tuodaan myös kauppaan. Huomaathan, että se korvaa kaupan etusivun sisällöt. (Kopioi tarvittaessa omat sisällöt turvaan kohdasta Sisältö/Tuoteryhmät > Lomakenäkymä > Yleinen.

Huom! Itse teema sisältää vain värit, fontit ja asettelun. Kaikki sisältö on samaa sisältöä kuin muillakin teemoilla. Poislukien ylä- ja alapalkkien sisällöt, niissä on esimerkkinä palvelulupauksia ja some-ikoneita yms. Vilkas Vanilla -teemassa etusivulle tulee sisältö seuraavasti:

  1. Banneri, joka muodostetaan taustakuvasta (Sisältö/Tuoteryhmät > Lomakenäkymä > Kuvat) sekä sen päälle tulevasta tekstistä (Etusivun ensimmäinen "Pitkä kuvaus" kenttä).
  2. Bannerin alla on "Pitkä kuvaus (2)" johon voi laittaa esimerkiksi otsikon tuotelistalle. Demokaupassa siinä on "suosituimmat tuotteet", mutta siinä voi lukea mitä vaan.
  3. Kolmantena on tuotelista, tuotteet lisätään Sisältö/Tuoteryhmät > Lomakenäkymä > Tuotteet -sivulla
  4. Tuotelistan alle tulee "Pitkä kuvaus (3)" kentän sisältö. Tähän on hyvä laittaa tekstiä, johon on sisällytetty tärkeimpiä avainsanoja hakukonenäkyvyyden parantamiseksi. Lisäksi siinä voi olla vaikka sosiaalisen median syötteitä upotettuna. Esimerkiksi instagramin syötteen saa mm. Lightwidget.com palvelun kautta.
  5. Viimeinen "Pitkä kuvaus (4)" saa jäädä tyhjäksi, sen sisältöä ei näytetä tämän teeman asettelulla.

Alatunnisteen linkit "Info" ja "Some" ovat yhdessä html-elementissä bullet-listana.

4) Kun teema on ladattu kauppaan, niin se löytyy kohdasta Ulkoasu > Omat teemat listasta alimmaisena. Siellä sitä voi tarkastella, muokata ja/tai ottaa käyttöön kaupan aktiiviseksi teemaksi.

 

Jos kokeilet uutta teemaa, niin kaupasta kannattaa ottaa talteen sivuun kaupassa mahdollisesti olevat ulkoasukoodit sieltä 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 vielä. 

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

  

 

Suositellut asetukset

Tässä listattuna asetuksia sivujen ja tuotteiden asetteluihin. Teema on suunniteltu toimimaan tiettyjen asetuksien kanssa ja ei välttämättä näytä hyvältä kaikilla muilla asetteluilla.

1) Kohdassa Sisältö/Tuoteryhmät > Lomakenäkymä > Asettelu vaihda etusivun tekstin asetukseksi valinta, jossa on kuva ja kolme tekstikenttää:
Asettelun valinnat

2) Kohdassa Sisältö/Tuoteryhmät > Lomakenäkymä > Kuvat lataa toiseen kuvakenttään etusivun isoksi kuvaksi oma kuva. Saat ladattua kuvan ilman, että kauppa pienentää sitä automaattisesti ottamalla ensin pois ruksin kohdasta "Muuta kokoa latauksen yhteydessä". Suositeltu kuvakoko mitoiltaan on noin 1500x500px.
Kuvan lataus

3) Etusivun sisällöistä "Pitkä kuvaus" kenttä on teemassa otettu kuvan päälle tulevan tekstin käyttöön. Otsikkotaso 2 muotoilulla teksti tulee ison bannerikuvan päälle esimerkin mukaisella erityismuotoilulla ja Pitkä kuvaus -kenttään lisätty linkki tulee näkyviin nappina. Pitkä kuvaus 2 kenttään laitettu sisältö näkyy sitten bannerikuvan alapuolella.

4) Kohdassa Asetukset > Yleiset asetukset aseta Mobiilinäkymä: Älä käytä. Koska teema on responsiivinen, niin erillistä mobiilinäkymää ei tarvita.

5) Tuotekuvien zoomaustoiminnallisuus kannattaa asettaa pois kohdassa Tuotteet > Tuoteasetukset > Käytä tuotekuvien zoomaustoimintoa: Ei

Ulkoasun viimeistely

Viimeistele ulkoasusi Ulkoasu > Ulkoasun yksityiskohtainen muokkaus -sivulla (ennemmin yksityiskohtainen muokkaus kuin pikamuokkaus). Lisää vasempaan yläkulmaan oma palvelulupauksesi teemassa olevan esimerkin "Ilmainen toimitus yli 100€ tilauksiin | Toimitukset 1-3 arkipäivässä" mukaisesti. Lisää alatunnisteeseen oikeat some- ja maksupalvelukuvakkeet ja tarvittavat linkit.

Säädä ylätunnisteen ja muiden alueiden taustavärit sekä tekstien ja linkkien värit sopimaan brändisi ilmeeseen. Huomaa, että ulkoasu ei näytä editorissa kaikilta osin samalta kuin asiakkaiden näkymässä, joten tarkista muutosten jälkeen miltä kauppa näyttää asiakkaiden näkymässä.

 

Muokkasin teemaa ja nyt se ei toimi enää responsiivisesti

Jos teet muutoksia teeman elementteihin, niin sitä ennen kannattaa tehdä varmuuskopio teemasta kohdassa Ulkoasu > Omat teemat. Jos muokatessa teeman responsiivisuus rikkoutuu, niin tällöin on helppo palata aina aiempaan tilanteeseen. Teematiedoston voi myös ladata uudelleen kauppaan.

 

En osaa! En kerkiä! = Ei hätää!

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

 

Muutoshistoria:
Versio 1.6 - Tuotteen vaihtoehtojen esittäminen taulukkomuodossa mobiilissa nyt käytettävämpi. Taulukkoa pystyy vierittämään sivulle, että kaikki sarakket saa näkyviin hyvin. (10-2018)
Versio 1.61 - Klarna Checkout popup-ikkunan asettelu korjattu (02-2019)
Versio 1.62 - Teeman tyylitiedostot ladataan jatkossa keskitetysti Vilkkaan CDN-palvelimelta, eikä verkkokaupan tiedostonhallinnasta. Mahdollistaa teeman päivitysten asentamisen keskitetysti. (03-2019)
Versio 1.62 - Ale-merkintää ei lisätä tuotesivulla, jos vertailuhinta on sama tai pienempi kuin myyntihinta (05-2020)

Uudemman version päivittäminen kauppaan: Tuo päivitetty .theme tiedosto Ulkoasu > Omat teemat -sivulla. Tuonti päivittää teeman css & java script -tiedostot. Uutta teemaa ei siis tarvitse aktivoida, vaan päivitykset tulevat aiemmin asennettuihin versioihinkin.

Jaa sisältö