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.

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.

Määrite	Kuvaus
Tausta	Väriä käytetään joidenkin osioiden taustalla ja kehyspainikkeen taustalla.
Taustan liukuväri	Liukuväriä käytetään joidenkin osioiden taustalla. Taustan liukuvärit korvaavat taustan silloin kun se on mahdollista.
Teksti	Väriä käytetään osion tai lohkon tekstissä.
Peittävän painikkeen tausta	Väriä käytetään ensisijaisen painikkeen taustalla.
Peittävä tekstipainike	Väriä käytetään ensisijaisen painikkeen tekstissä.
Kehyspainike	Väriä käytetään toissijaisen painikkeen tekstissä ja reunuksessa.
Varjo	Vä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.

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.

Vinkki

Lue lisää liukuväreistä ja CSS-taustoista tutustumalla Mozillan lineaarista liukuväriä ja CSS-taustaa käsitteleviin ohjeisiin.

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 napsautat 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.

1. Klikkaa Tallenna.

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 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.