Värimallit

Tämä sivu on tulostettu Jun 02, 2023. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/theme-structure/color-scheme.

Teeman eri osia, kuten Rich text -tekstiä, kuvabanneri- ja kokoelmaluetteloa, voit valita teema-asetuksissa määrittämistäsi väreistä värimallin, jota voit käyttää tässä osassa. Teemassasi on käytössä oletusvärimalli, jota voidaan muuttaa milloin tahansa teemaeditorissa. Brändin värien lisääminen varmistaa väripaletin yhtenäisen käytön verkkokaupassasi.

Osa asetuksista, joiden avulla voit valita värimallin, mahdollistaa myös liukuvärien käytön. Esimerkiksi Dawn-teemassa voit määrittää brändisi väreistä liukuvärejä ja käyttää niitä normaalien korostus- ja taustavärivaihtoehtojen tilalla.

Tällä sivulla

Väriasetukset

Kuvien tausta ja kuvan täyttö voidaan määrittää teemaeditorissa. Voit esikatsella valittuja värimalleja teemaeditorin esikatselupaneelissa. Valitse pudotusvalikosta jokin seuraavista väriasetuksista:

Määrite Kuvaus
Peittävä tekstipainike Väri, jota käytetään edustan tekstin värinä painikkeissa, joissa on korostusvärit.
Korostus 1 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Korostus 1 liukuväri Valitse ennalta määritelty liukuväri tai käytä sävynvalitsinta muokataksesi taustasi korostusväriä.
Korostus 2 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Korostus 2 liukuväri Valitse ennalta määritelty liukuväri tai käytä sävynvalitsinta muokataksesi taustasi korostusväriä.
Teksti Väriä voidaan soveltaa osion tai lohkon tekstiin.
Kehyspainike Toissijaisten painikkeiden ääriviivana käytettävä väri. Käytetään myös tekstilinkeissä.
Tausta 1 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Tausta 1 liukuväri Valitse ennalta määritelty liukuväri, tai käytä sävynvalitsinta muokataksesi taustasi liukuväriä.
Tausta 2 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Tausta 2 liukuväri Valitse ennalta määritelty liukuväri, tai käytä sävynvalitsinta muokataksesi taustasi liukuväriä.

Värimallin hallinnointi

Kaupan värimalli on asetettu teema-asetuksiin.

  1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
  2. Etsi teema, jota haluat muokata, ja klikkaa sitten Mukauta.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napsauta märän siveltimen kuvaketta avataksesi Teema-asetukset.
  2. Napsauta VÄRIT.
  3. Jos haluat muuttaa teeman väriä, klikkaa väriä ja käytä värivalitsinta tai syötä uuden värin arvo tekstikenttään.
  4. Klikkaa Tallenna.

Jos käytät kiinteitä värejä, valitse värivalitsinta käyttämällä uutta väriä tai syötä värin arvo tekstikenttään. Kenttä hyväksyy värien nimet (esimerkiksi red, black, blue), RGB: n tai heksadesimaaliset väriarvot.

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 Verkkokauppa > Teemat.
  2. Etsi teema, jota haluat muokata, ja klikkaa sitten Mukauta.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napsauta märän siveltimen kuvaketta avataksesi Teema-asetukset.
  2. Napsauta VÄRIT.

  3. Valitse yksi liukuvärivaihtoehto.

  4. Säädä mitä tahansa seuraavista liukuväriasetuksista:

  • Voit valita lineaarisen tai säteittäisen liukuvärin. Valitse haluamasi liukuvärityyli painikkeiden avulla.
  • Liukuvärin lineaarista kulmaa voidaan säätää 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.
  • Lisää painikkeilla + tai - värin raja. Tämä lisää liukusäätimeen uuden kiinteän värin, jonka voit sijoittaa.
  • Voit syöttää värin hex-koodin tai valita värisävyn värin liukusäätimellä. Viimeksi valitut värit näkyvät liukuvärin asetuspaneelin alaosassa.
  • Liukuvärjäys voi olla läpikuultamaton. Valitse liukuvärin läpinäkyvyys oikealla puolella olevan liukusäätimen avulla. Voit myös kirjoittaa prosenttiluvun hex-värikoodin vieressä olevaan kenttään.
  1. 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 Verkkokauppa > Teemat.
  2. Etsi teema, jota haluat muokata, ja klikkaa sitten Mukauta.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napsauta märän siveltimen kuvaketta avataksesi Teema-asetukset.
  2. Napsauta VÄRIT.
  3. Klikkaa liukuväriä, jota haluat muokata.
  4. Klikkaa Liukuvärin vieressä olevaa nuolta ja valitse CSS.
  5. Kirjoita tai liitä liukuvärin koodi CSS-koodi-kenttään. Teemaeditorin esikatselu näyttää liukuvärin valitsemassasi sijainnissa.
  6. Klikkaa Tallenna.
    Gradient CSS Code field in the theme editor

Liukuvärin poistaminen

Liukuvärin nollaaminen tai poistaminen:

  1. Siirry Shopify Adminissa kohtaan Verkkokauppa > Teemat.
  2. Etsi teema, jota haluat muokata, ja klikkaa sitten Mukauta.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napauta Shopify sovelluksessa kauppa.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallinnoi kaikkia teemoja.
  4. Etsi teema, jota haluat muokata, ja napauta sitten Mukauta.
  5. Napauta Muokkaa.
  1. Napsauta märän siveltimen kuvaketta avataksesi Teema-asetukset.
  2. Napsauta VÄRIT.
  3. Klikkaa liukuväriä, jota haluat muokata.
  4. Klikkaa Poista liukuväri.
  5. Klikkaa Tallenna.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi