Verkkokaupan Facelift 2024

Owned by Hanna Lidman
Last updated: Apr 25, 2024
4 min read

Tässä artikkelissa kerrotaan Facelift päivityksen suurimmat muutokset. Versiopäivityksen versionumero on 11.23.0.

Verkkokaupan Facelift on teoriassa normaali versiopäivitys, mutta sen visuaaliset muutokset ovat merkittäviä, joten version päivittäminen verkkokauppoihin tehdään ensin demokauppaan ja vasta sen jälkeen julkaistaan livekauppaan.

 

Facelift lyhyesti

  1. Fonttikokoa on kasvatettu läpi kaupan

  2. Default fontin muutos

  3. Korkeampi bannerikaruselli

  4. Kaksi ostoskorinappia on nyt yksi nappi

  5. Osastot ja tuoteryhmät näkyvillä mobiilissa

  6. Kaupan leveys on suurempi

  7. Tuotekortin rakenne muuttuu

  8. Vasemman reunan tuotepuu on leveämpi

  9. Jaa tuote -nappi (sometilit yhden napin takana)

  10. Logo -alue on suurempi

  11. Hakukenttä on oletuksena header-osion keskellä

  12. Mobiilinäkymän header-osioon muutoksia

Faceliftin demokauppaa pääset tutkimaan tästä https://www-confirma-wikidemo-fi.nethit.cloud/

 

Mikä muuttuu verkkokaupan ilmeessä?

  1. Fonttikokoa on kasvatettu läpi kaupan

Fontti koko kasvaa kaikissa verkkokaupan 1 px teksteissä, joihin ei ole erikseen määritelty fonttikokoa.

Käytännössä kaikki sisältötekstit, otsikko 1, otsikko 2, tuotepuu, osastot, valilkkolinkit, tuoteryhmien nimet yms. kasvavat. Jos kuitenkin olette tehneet sisältöä, johon olette määrittäneet html-koodissa tietyn pikseli-koon, muutos ei vaihda tätä kokoa.

 

 

 

  1. Oletusfontin muutos

Aikaisempi oletusfontti verkkokaupoissa on ollut Roboto. Uutena oletusfonttina verkkokaupoissa on Poppins.

Mikäli verkkokauppanne teemaan on määritelty jokin muu fontti kuin oletusfontti, tämä muutos ei vaikuta verkkokauppaanne.

Jos verkkokauppaanne on määritelty jonkin muu fontti vain otsikoihin ja muussa tekstissä on oletusfontti, muuttaa tämä päivitys nämä muut tekstit Poppins fontille. Otsikoihin määritettyihin fontteihin muutos ei vaikuta.

 

 

Näyttökuva 2024-01-18 134943.png

 

 

  1. Korkeampi bannerikaruselli

Vanhan karusellibannerin oletuskorkeus oli 400 px ja sen korkeutta pystyi muuttamaan verkkokaupan teemasta.

Uuden karusellibannerin oletuskorkeus on 577px.

Karusellinbannereiden selauspainikkeet on siirretty alanurkkaan, jotta ne eivät häiritse visuaalista ilmettä.

 

 

 

Näyttökuva 2024-01-18 134604.png

 

  1. Kaksi ostoskorinappia on nyt yksi nappi

Yksi nappi selkeyttää verkkokaupan ilmettä.

 

 

 

  1. Osastot ja tuoteryhmät näkyvillä mobiilissa

Aikaisemmin mobiilinäkymässä osastot ja tuoteryhmät olivat valikko-napin takana. Uudistuksen jälkeen osastot näkyvät hakukentän alapuolella ovat skrollattavissa sivuttain.

Tämä ominaisuus on käytössä vain verkkokaupoissa, joissa on osastotoiminto TAI verkkokaupoissa, joiden pääryhmät on laitettu asetuksella näkyviin navigaatiomenuun.

 

 

  1. Kaupan leveys on suurempi

Ennen faceliftiä verkkokaupan etusivunsisällön leveys oli 1740px ja muiden sivyen sisällön leveys oli 1450px.

Uuden etusivunsisällön leveys on nyt ns. FullHD-mitta eli 1920 px ja muiden sivujen sisällön leveys on 1520px.

Tämä muutos mahdollistaa isompien ja näyttävämpien tuotekuvien ja sisältökuvien käytön.

 

 

 

 

 

 

 

  1. Tuotekortin rakenne muuttuu

  • Otsikko siirtyy tuotekuvan yläpuolelle, tuotekuva on isompi ja tuotekortin oikeanpuoleinen mainosalue siirtyy tuotekuvaus tabin sisään.

  • Tuotekuvaustäbissä aikaisemmin näkyneet tuotteetn ominaisuudet tulevat näkyviin suoraan tuotekortille hinnan alapuolelle. Jos ominaisuuksia on paljon, ne siirtyvät kahteen sarakkeeseen

 

Mikäli käytössänne on kuvasuhde 10:15, suosittelemme vaihtamaan sen esimerkiksi 10:13 tai 1:1.

Jos tuotekuva on kuvasuhteeltaan 10:15, ei tuotekuva mahdu muutoksen jälkeen enää näkymään kokonaan desktop-näytölle.

Vinkki: jos teette shopping-mainontaa, niin 1:1 kuvakoko on suoraan käytettävissä mainoksiin.

 

 

 

  1. Vasemman reunan tuotepuu on leveämpi

Tämä mahdollistaa suuremman fonttikoon käytämisen ja pidemmät tuoteryhmien nimet

 

 

  1. Jaa tuote -nappi (sometilit yhden napin takana)

Tuotetietojen jakaminen somessa on siirtynyt yhden napin taakse, eikä verkkokaupassa näy enää kaikki some-tilit.

 

 

  1. Logo-alue on suurempi

Suositukset:

  • Logo-alueessa käytetään svg-muodossa olevaa kuvatiedostoa, jonka suositusmitat ovat 400x100 px.

  • Skrollatessa pienentyvässä logoalueessa käyettään logoa, jonko koko on 400x33px

  • Mobiilinäkymässä logon koko on 120x33px

  • Sähköpostiviesteihin tulostuvan logon koko on 300x100px

Logon korkeus määrittää myös header-osion korkeuden.

 

  1. Hakukenttä on oletuksena header-osion keskellä

Haku-kenttä on oletus teemassa header-osion keskellä.

Hakukenttä on mahdollista sijoittaa esimerkiksi ostoskorinapin viereen, jos se määritellään tuoreutuksen yhteydessä uudelleen

Asetuksissa on mahdollista siirtää hakukenttä myös infopalkkiin

 

 

  1. Mobiilinäkymän header-osioon muutoksia

  • Tekstikaruselli-mainospaikka siirtyy ylös ja on jatkossa samassa paikassa kuin desktop-näkymässä.

  • Osastot tulevat näkyviin hakukentän alle ja niitä voidaan skrollata sivuttain.

  • Logo siirtyy vasemmalta oikealle ja ostoskori-napin ilme muuttuu

 

 

 

  1. Hampurilaisikoni näkyy nyt myös desktop-näkymässä

Aikaisemmin hampurilaisikoni näkyi vain mobiilissa. Tässä versiossa ikoni on tuotu navigaatioriville osastojen viereen nopeampaa navigointia varten.