Värimallit

Voit määrittää erilaisia värimalleja teema-asetuksissa ja käyttää niitä verkkokaupan eri osioissa värimallivalitsimen avulla. Värimalli on joukko värejä. Teemassa käytetään oletusarvoisten värimallien joukkoa, jota voit muuttaa milloin tahansa teemaeditorissa. Voit lisätä brändin värit, mikä varmistaa väripaletin yhtenäisen käytön verkkokaupassasi.

Malleissa ei ole yksilöllisiä väriasetuksia, joten verkkokauppasi ulkoasu on yhtenäinen koko verkkosivustosi osalta. Mallia pidetään kaupan pääsivuna tai pääsisältönä. Eri värimallien käyttäminen kaupassasi voi johtaa huonoon käyttäjäkokemukseen, ja se voi aiheuttaa sen, että asiakkaat poistuvat kaupastasi ostamatta mitään tuotteita.

Voit tarkastella verkkokaupan ominaisuuksia ja sivutyyppejä niiden osien osalta, jotka sisältävät Värimalli-asetuksia.

Värimallin teema-asetukset

Värimallit ovat teema-asetus, joka ryhmittelee elementit ja niiden värit visuaalisesti kuvaavalla tavalla. Voit ottaa eri värejä käyttöön yhtenäisen värimallin eri elementeissä ja käyttää värimallia teemassa kaikkialla, missä värimallivalitsin on käytettävissä. Värimalleja voi olla enintään 21. Voit myös esikatsella värien näkymistä mallin esikatselussa.

Luettelo erilaisista asetuksista, joita voidaan soveltaa värimalleihin teemaeditorissa.
MääriteKuvaus
TaustaVäriä käytetään joidenkin osioiden taustalla ja kehyspainikkeen taustalla.
Taustan liukuväriLiukuväriä käytetään joidenkin osioiden taustalla. Taustan liukuvärit korvaavat taustan silloin kun se on mahdollista.
TekstiVäriä käytetään osion tai lohkon tekstissä.
Peittävän painikkeen taustaVäriä käytetään ensisijaisen painikkeen taustalla.
Peittävä tekstipainikeVäriä käytetään ensisijaisen painikkeen tekstissä.
KehyspainikeVäriä käytetään toissijaisen painikkeen tekstissä ja reunuksessa.
VarjoVäriä käytetään varjoissa.

Värimallin hallinnointi

Kaupan värimalli ja värivaihtoehdot määritetään teema-asetuksissa. Jos käytät kiinteitä värejä, valitse värivalitsinta käyttämällä uusi väri tai kirjoita värin arvo tekstikenttään. Värikenttä hyväksyy seuraavat värien nimet ja arvot:

  • värien nimet, kuten red, black tai blue
  • RGB-värikoodit
  • heksadesimaaliset väriarvot

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.

  2. Napsauta muokattavan teeman vierestä Mukauta.

  3. Klikkaa rataskuvaketta ja valitse 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.

Värimallin käyttäminen

Kun olet määrittänyt värimallin teema-asetuksissa, voit ottaa sen käyttöön teemasi osioiden ja lohkojen värimallivalitsimen avulla. Värimallivalitsin on käytettävissä vain tietyissä osioissa, lohkoissa ja yleisissä teema-asetuksissa.

Värimallivalitsin

Liukuvärit

Voit luoda visuaalisesti mielenkiintoisia taustoja määrittämällä liukuvärejä joissakin teemoissa. CSS-taustan ominaisuuksien mukauttamiseen käytetään color_background-asetusta.

Liukuvärin valitsimen avulla voit valita liukuvärin värit, tyylin, kulman, sijainnin ja läpikuultavuuden. Liukuvärin valitsimessa valittujen asetusten esikatselu näkyy reaaliaikaisesti teemaeditorissa. Voit myös luoda liukuväritaustan CSS-koodilla, jossa on oikeellisuuden tarkistustyökalu.

Liukuvärien määrittäminen

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.

  2. Napsauta muokattavan teeman vierestä Mukauta.

  3. Klikkaa rataskuvaketta ja valitse sitten Värit.

  4. Napsauta Mallit-osiossa olemassa olevaa mallia, jota haluat muokata.

  5. Napsauta liukuvärin väriruutuvaihtoehtoa, kuten Taustan liukuväri.

  6. Jos et ole aiemmin määrittänyt liukuväriä, sinulle näytetään muutamia valmiiksi määritettyjä vaihtoehtoja, joista voit valita. Avaa asetuspaneeli valitsemalla mikä tahansa valmiiksi määritetty liukuväri.

  7. Valitse liukuvärin asetukset:

    • Valitse lineaarinen tai säteittäinen liukuväri. Valitse haluamasi liukuvärityyli painikkeilla.
    • Aseta liukuvärin kulma ylös ja alas osoittavilla nuolilla. Kulman prosenttiarvo laskee ja nousee viidellä, kun klikkaat ylös ja alas osoittavia nuolia.
    • Valitse liukuvärin sijainti liukusäätimellä tai syötä kenttään numeerinen arvo.
    • Syötä värin hex-koodi tai valitse värisävy värin liukusäätimellä. Viimeksi valitut värit näkyvät liukuvärin asetuspaneelin alaosassa.
    • Voit tehdä liukuväristä läpikuultamattoman valitsemalla liukuvärin läpinäkyvyyden oikealla puolella olevalla liukusäätimellä. Voit myös kirjoittaa prosenttiluvun hex-värikoodin vieressä olevaan kenttään.
  8. Klikkaa Tallenna.

Liukuvärivalitsin teemaeditorissa

Liukuvärien määrittäminen CSS:n avulla

Useimpien CSS background ominaisuusarvojen avulla voit määrittää taustavärin. Voit käyttää tätä kenttää kiinteille väreille (esimerkiksi #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) ja hsla(0, 0%, 0%, 1) tuottavat kaikki tasaisen mustan taustan) tai liukuväreille (esimerkiksi linear-gradient(red, green), radial-gradient(red, green) tai conic-gradient(red, green)). Liukuvärejä voidaan myös toistaa.

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.

  2. Napsauta muokattavan teeman vierestä Mukauta.

  3. Klikkaa rataskuvaketta ja valitse sitten Värit.

  4. Napsauta Mallit-osiossa olemassa olevaa mallia, jota haluat muokata.

  5. Napsauta muokattavaa liukuväriä.

  6. Napsauta Liukuväri-kohdan vieressä olevaa nuolta ja valitse CSS.

  7. Kirjoita tai liitä liukuvärin koodi CSS-koodi-kenttään. Teemaeditorin esikatselu näyttää liukuvärin valitsemassasi sijainnissa.

  8. Klikkaa Tallenna.

Liukuvärin CSS-koodi -kenttä teemaeditorissa

Liukuvärin poistaminen

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.

  2. Napsauta muokattavan teeman vierestä Mukauta.

  3. Klikkaa rataskuvaketta ja valitse sitten Värit.

  4. Napsauta Mallit-osiossa olemassa olevaa mallia, jota haluat muokata.

  5. Napsauta poistettavaa liukuväriä.

  6. Napsauta Poista liukuväri.

  7. Klikkaa Tallenna.

Etkö löydä hakemaasi vastausta? Autamme mielellämme.