Teeman asetukset

Teeman asetuksilla voit tehdä muutoksia verkkokaupan typografiaan, väreihin, sosiaalisen median yhteyksiin ja kassan asetuksiin. Kun teet muutoksia teema-asetuksiisi, muutokset koskevat koko verkkokauppaasi.

Voit lisätä verkkokauppaan yrityksesi logon. Logo näytetään seuraavissa paikoissa:

  • ylätunnisteessa kaikilla sivuilla
  • salasanasivulla

Logokuvien enimmäisleveys on 300 pikseliä.

Logon mukauttaminen

Logon leveyden muuttaminen

  1. Klikkaa teeman asetuksia.
  2. Klikkaa Logo.
  3. Valitse Logon leveys tietokoneella -alueella haluamasi pikselileveys liukusäätimen avulla.

Favicon

Voit lisätä suosikkikuvakkeen eli favicon-kuvakkeen, joka tukee verkkokauppasi brändin luomista. Favicon-kuvake näytetään seuraavissa paikoissa:

  • verkkoselaimen välilehti
  • verkkoselaimen historia
  • työpöydällä olevat kuvakkeet
  • verkkokaupan nimen vieressä, kun siitä on tuotettu kirjanmerkki

Lisätietoja faviconeista eli suosikkikuvakkeista.

Mukauta favicon-kuvaketta

Värit

Voit luoda jopa 21 yksilöllistä värimallia ja käyttää niitä verkkokaupan eri osioissa. Lue lisää värivaihtoehdoista, värimalleista ja liukuväreistä.

Mukauta väriasetuksiasi

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Napsauta muokattavan teeman vierestä Mukauta.
  3. Klikkaa Teeman asetukset ja sitten Värit.
  4. Napsauta Mallit-osiossa olemassa olevaa mallia tai lisää uusi värimalli napsauttamalla Lisää malli.
  5. Napsauta muutettavan sisältötyypin värin väriruutua.
  6. Voit asettaa värin kirjoittamalla hex-värikoodin tai valitsemalla värin värinvalitsimesta. Jos haluat asettaa värin läpinäkyväksi, poista hex-koodi tekstikentästä.
  7. Klikkaa Tallenna.

Typografia

Voit määrittää verkkokaupassasi olevan tekstin fonttityylin ja -koon. Voit valita järjestelmän fontin tai mukautetun fontin.

On suositeltavaa, että käytät kaupassa järjestelmän fontteja. Järjestelmän fontit ovat fontteja, jotka on jo asennettu käyttäjän tietokoneelle. Järjestelmän fonttien käyttäminen estää uusien fonttien lataamisen asiakkaan tietokoneelle, mikä voi heikentää kaupan latausnopeutta. Asiakkaan tietokoneella näkyvä fontti riippuu asiakkaan käyttöjärjestelmästä.

Muokkaa typografia-asetuksia

Katso käytettävissä olevien fonttien luettelo Shopifyn fonttikirjastosta.

Fonttikokojen mukauttaminen

Voit määrittää otsikon ja leipätekstin oletusfonttikoot teeman Typografia-asetuksissa.

Vaiheet:

Asettelu

Asettelun avulla voit määrittää verkkokaupan enimmäisleveyden ja määrittää osien välisen pysty- ja vaakatilan.

Animaatiot

Animaatioiden avulla voit lisätä verkkokauppaasi liikettä ja visuaalisesti kiinnostavia kohteita. Voit aktivoida häivytysanimaation, joka näyttää kaupan osiot vierittämällä, ja hiiritehosteen korteille ja painikkeille.

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Napsauta muokattavan teeman vierestä Mukauta.
  3. Klikkaa Teeman asetukset ja sen jälkeen Animaatiot.
  4. Valinnainen: jos haluat aktivoida animaation, joka näyttää verkkokaupan osiot vierittämällä, valitse Näytä osiot vierittämällä.
  5. Valinnainen: Jos haluat lisätä hiiritehosteanimaation kortteihin ja painikkeisiin, valitse jokin seuraavista vaihtoehdoista Hiiritehoste-asetuksesta:

    • Pystysuuntainen nosto: Kun asiakas siirtyy kortin tai painikkeen päälle, elementti liikkuu ylöspäin.
    • 3D-nosto: Kun asiakas siirtyy kortin tai painikkeen päälle, elementti siirtyy eteenpäin ja luo 3D-efektin. Ominaisuus lisää kohteeseen myös hienovaraisen loisteen, joka liikkuu elementin läpi ja antaa sille uuden ulottuvuuden.
  6. Klikkaa Tallenna.

Reunat ja varjot

Voit säätää joidenkin interaktiivisten sisältötyyppien, kuten laatikoiden, painikkeiden, versioiden tai määräsyötteiden, reunoja ja varjoja.

Reunoja voidaan mukauttaa seuraavilla tavoilla:

  • Paksuus: muuttaa kohteen ääriviivaa.
  • Peittävyys: määrittää kohteen ääriviivan läpinäkyvyyden.
  • Kulman säde: pyöristää kohteiden kulmat.

Varjojen asetuksia ovat:

  • Peittävyys: muuttaa kohteen varjon näkyvyyttä. Kun varjon peittävyys 0 prosenttia, tuotteen varjo poistuu kokonaan.
  • Vaaka- tai pystysuuntaiset siirtymäalueen liukusäätimet siirtävät varjon sijaintia tuotteen ympärillä.
  • Sumennus-liukusäätimen avulla on muuttaa tuotteen varjon peittävyyttä.

Painikkeet

Voit mukauttaa toimintokutsupainikkeiden asetuksia verkkokaupassasi lisäämällä varjoja, muuttamalla riviväliä tai peittävyyttä ja säätämällä painikkeiden muotoa.

Esimerkki verkkokaupasta, jossa on toimintokutsupainike

Painikkeiden mukauttaminen

Väriruutuja sisältävät versiovaihtoehdot

Esimerkki verkkokaupasta, jossa on valittavia väriruutuvaihtoehtoja

Väriruudut ovat tuoteversioiden visuaalinen esitystapa. Jotta voit näyttää väriruutuja, sinulla on oltava Dawn-teeman uusin versio ja luokan metakentät yhdistettyinä tuoteversioihin. Dawnin avulla versiovaihtoehdot voidaan näyttää joko pudotusvalikossa tai väriruutuna. Jos esität versiovaihtoehdot väriruutuna, voit valita, näytetäänkö väriruudut ympyränä, neliönä tai ei ollenkaan, jolloin vaihtoehdon arvo näkyy tekstinä.

Esimerkki väriruuduista Dawn-teemassa

Väriruutujen määrittäminen luokan metakenttien avulla

  1. Siirry Shopify Adminissa kohtaan Tuotteet.
  2. Klikkaa tuotetta.
  3. Kirjoita Tuotteiden järjestys -osiossa tuotteesi luokka Tuoteluokka-kenttään ja valitse sitten tarkin tulos Tuoteluokka-luettelosta. Tuoteluokassa täytyy olla Väri-luokan metakenttä.
  4. Klikkaa Versiot-osiossa Lisää vaihtoehtoja, kuten koko tai väri.
  5. Klikkaa Värit.
  6. Klikkaa Lisää väri -kenttää ja valitse pudotusvalikosta jonkin oletusarvoinen värimäärite.
  7. Mukautetun värimääritteen lisääminen:

    1. Klikkaa Lisää väri ja klikkaa sitten Lisää uusi määrite.
    2. Täytä Lisää määrite -sivulla Merkintä- ja Väri-kentät.
    3. Jos haluat käyttää värin sijaan kuosia, täytä Kuva-kenttä. Jos lisäät sekä värin että kuvan, väriruudussa käytetään kuvaa.
    4. Valitse Perusväri ja Peruskuosi.
    5. Klikkaa Tallenna.
  8. Tallenna tuotteesi klikkaamalla Tallenna.

Väriruutujen mukauttaminen Dawn-teemassa

  1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
  2. Varmista, että käytössäsi on Dawnin uusin version, ja klikkaa sitten Mukauta.
  3. Siirry tuotteeseen, johon lisäsit värivaihtoehtoja.
  4. Valinnainen: Voit mukauttaa väriruutuja klikkaamalla Versionvalitsin-lohkoa. Voit valita väriruutujen esitystavan seuraavista: Ympyrä, Neliö tai Ei mitään.
  5. Tallenna teema klikkaamalla Tallenna.

Versioiden pillerikuvakkeet

Versioiden pillerikuvakkeiden avulla voit näyttää tuotteen versiot tuotesivulla tai esittelyssä olevan tuotteen osiossa. Asiakkaat voivat valita haluamansa tuoteversion ja lisätä tuotteen tuotekoriinsa ilman, että heidän tarvitsee vaihtaa tuotesivuja.

Esimerkki verkkokaupasta, jossa on valittavien versioiden pillerikuvakkeita

Versioiden pillerikuvakkeiden mukauttaminen

Syötteet

Syötteet ovat interaktiivisia alueita, joihin asiakkaan täytyy syöttää jokin arvo tai tieto. Näitä ovat esimerkiksi määrän valitsin, sähköpostitilauksen rekisteröitymislomake tai ostoskorin kommentti. Voit säätää verkkokaupan syötteiden ulkoasua teeman asetuksissa.

Esimerkki verkkokaupasta, jossa on määräsyöte

Syötteiden mukauttaminen

Kortit

Tuotekorttien, kokoelmakorttien ja blogikorttien asetusten avulla voit mukauttaa kunkin osioissa näkyvän erillisen alueen tyyliä. Voit muuttaa näiden kolmen erilaisen osiokortin väriä, tasausta, kuvan täyttöä, reunoja ja varjoja.

Korttien mukauttaminen

Sisältösäiliöt

Säilöt ovat sisältöosioiden tekstiosa, kuten diaesityksen tai kuvabannerin tekstiruutu, tai useita sarakkeita sisältävien osioiden sarakkeet. Voit mukauttaa verkkokauppasi sisältösäilöjen ulkoasua.

Sisältösäilöjen mukauttaminen

Media

Media on osioiden visuaalinen osa, kuten tuotemedia tai Kuva tekstillä -osioiden kuva. Voit lisätä mediaan reunoja ja varjoja.

Median mukauttaminen

Pudotusvalikot ja ponnahdusikkunat

Muokkaa navigoinnin alasvetovalikoiden, modaalisten ponnahdusikkunoiden ja ostoskorien ulkoasua.

Pudotusvalikoiden ja ponnahdusikkunoiden mukauttaminen

Vetolaatikot

Laatikot ovat piilotettuja, interaktiivisia säilöjä, jotka tulevat näkyviin, kun niitä klikataan tai napautetaan. Tällaisia ovat esimerkiksi pienennettävä navigointivalikko tai suodatinvaihtoehdot.

Laatikkojen mukauttaminen

Tunnukset

Alennusmyynti- ja Loppuunmyyty-tunnukset lisätään tuotekuviin automaattisesti, kun tuotteen hinta laskee tai kun varastomäärä on 0. Voit säätää tunnusten sijaintia, muotoa ja väriä.

Esimerkki verkkokaupasta, jossa alennusmyynti- ja loppuunmyyty-tunnukset

Sivu- ja Blogi-tunnukset näytetään osuvissa hakutuloksissa. Voit mukauttaa näiden tunnusten sijaintia ja muotoa, mutta et väriä.

Tunnusten muokkaaminen

Kuvakkeet

Kuvakkeet ovat pieniä kuvia, joita voidaan lisätä tiettyihin osioihin tai lohkoihin. Määritä kuvakkeiden väri teema-asetuksissa.

Esimerkki verkkokaupasta, jossa on kuvakkeita pienennettävissä riveissä

Kuvakkeiden mukauttaminen

Bränditiedot

Voit kertoa tietoja brändistäsi. Voit lisätä bränditietojen lohkon alatunnisteeseen.

Brändin tietojen mukauttaminen

Sosiaalinen media

Voit lisätä tuotteisiin ja blogipostauksiin some-jakamispainikkeita, ja voit myös lisätä linkkejä sosiaalisen median tileillesi. Linkit sosiaalisen median tileille näytetään verkkokaupan alatunnisteessa.

Mukauta sosiaalisen median asetuksia

Hakukäyttäytyminen

Verkkokauppasi sisältää ennakoivan haun, joka näyttää ehdotuksia, kun asiakkaat alkavat kirjoittaa jotakin hakukenttään. Hakuehdotukset auttavat asiakkaita muotoilemaan ja tarkentamaan hakukyselyjään, ja se on uudenlainen tapa tutustua verkkokauppaan. Ehdotusten avulla asiakkaat voivat myös selata osumia nopeasti ilman, että heidän tarvitsee poistua nykyiseltä sivulta tarkastellakseen erillistä hakutulosluetteloa.

Voit mukauttaa seuraavia haun asetuksia:

  • Ota hakuehdotukset käyttöön – aktivoi tai deaktivoi hakuehdotukset.
  • Näytä tuotteen myyjä – näytä tai piilota tuotteiden myyjät hakuehdotuksissa.
  • Näytä tuotteen hinta – näytä tai piilota tuotteiden hinnat hakuehdotuksissa.

Hakusyötteen asetusten muokkaaminen

Lisätietoja siitä, miten hakuehdotukset toimivat, saat tutustumalla kohtaan Ennakoiva haku.

Valuutan muoto

Voit valita, näytetäänkö tuotteissa, ostoskorissa ja kassan hinnoissa aina valuuttakoodit.

Ostoskori

Voit muuttaa verkkokauppasi ostoskorin tyyliä. Kun asiakas lisää kaupassasi tuotteen ostoskoriin, ostoskori voidaan näyttää vetolaatikkona, sivuna tai ponnahdusilmoituksena. Jos haluat pitää asiakkaan tuotesivulla, käytä vetolaatikko- tai ponnahdusilmoitus-vaihtoehtoa. Jos haluat viedä asiakkaan ostoskorisivulle, käytä sivu-vaihtoehtoa. Kun asiakkaan ostoskori on tyhjä, voit näyttää esittelykokoelman veto-ostoskorissa.

Vaiheet:

Jos ostoskorin tyypiksi on valittu Veto-ostoskori, voit näyttää kokoelman veto-ostoskorissa. Valittu kokoelma näytetään vain silloin, kun ostoskori on tyhjä.

Jos haluat lisätä kokoelman tyhjään veto-ostoskoriin, klikkaa Valitse kokoelma. Kun kokoelma on valittu, valitse toinen kokoelma klikkaamalla Vaihda tai poista kokoelma veto-ostoskorista.Voit myös luoda uuden kokoelman klikkaamalla Luo kokoelma.Tämä painike vie sinut pois teeman asetuksista ja Shopify adminin Kokoelmat-sivulle.

Kassa

Tässä osassa voit mukauttaa kaupan kassaa. Lisätietoja kaupan kassasivusta on Shopify Checkout -paneelissa.

Vaihda teematyylit

Teeman tyyli on kokoelma teemojen suunnittelijan valitsemia asetuksia. Voit käyttää teeman tyylejä kaupassasi, jolloin kauppasi ilme ja tyyli on viimeistelty. Teeman tyyliä käytetään oletuksena kaikissa teemoissa. Kun mukautat teemaa, korvaat teeman tyyliasetukset omilla asetuksillasi. Jos käytät teemassa teeman tyyliä, nykyiset asetukset, kuten värit ja typografia, muuttuvat.

Vaiheet:

Kumoa muutokset ja tee ne uudelleen

Kumoa-painike peruuttaa viimeisimmän muutoksen, ja Tee uudestaan ‑painike palauttaa kumoamasi muutoksen. Kun klikkaat Kumoa-painiketta useammin kuin kerran, tekemäsi muutokset kumotaan yksi kerrallaan. Kumoa- ja Tee uudestaan -painikkeet sijaitsevat teemaeditorin työkalupalkissa.

Teemaeditorin työkalupalkin Kumoa- ja Toista-painikkeet

Klikkaa Kumoa-painiketta, kun haluat peruuttaa seuraavat muutokset:

  • osioiden lisääminen, uudelleenjärjestäminen ja poistaminen
  • värien, fonttien ja muiden asetusten muuttaminen Teeman asetukset -välilehdellä
  • teeman tyylin nollaaminen.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi