Fargepaletter

Du kan definere ulike fargeoppsett i temainnstillingene og bruke fargeoppsett i ulike seksjoner i nettbutikken med en fargetemavelger. Et fargeoppsett er et sett med farger. Temaet har et sett med standardfargeoppsett, som du når som helst kan endre i temaredigeringsprogrammet. Du kan legge til merkevarefarger for å sikre konsekvent bruk av fargepaletten i hele nettbutikken.

Maler har ikke individuelle fargeinnstillinger, slik at utformingen av nettbutikken er konsekvent på tvers av nettstedet. En mal anses som hovedside eller hovedinnhold for en butikk. Hvis du har ulike fargeoppsett i butikken kan det føre til en dårligere brukeropplevelse, og det kan gjøre at kundene forlater butikken uten å kjøpe produkter.

Du kan se gjennom nettbutikkfunksjoner og sidetyper for seksjoner som inkluderer innstillingen Fargetema.

Temainnstillinger for fargevalg

Fargeoppsett er en temainnstilling som grupperer elementer og deres respektive farger på en visuelt representabel måte. Du kan tilordne ulike farger til ulike elementer i et enhetlig fargeoppsett som kan brukes på tvers av temaet der en fargetemavelger er tilgjengelig. Du kan ha opptil 21 fargevalg. Du kan også forhåndsvise hvordan fargene dine vises i forhåndsvisningen av skjemaet.

InnstillingBeskrivelse
BakgrunnFargen brukes i bakgrunnen av noen seksjoner, og på bakgrunnen til knapper med omriss.
Bakgrunn med fargeovergangEn fargeovergang brukes i bakgrunnen av noen seksjoner. Bakgrunnsoverganger erstatter bakgrunnen der det er mulig.
TekstFargen brukes på seksjons- eller blokktekst.
Fylt knappebakgrunnFargen brukes på bakgrunnen i primærknapper.
Fylt knappetikettFargen brukes på teksten i primærknapper.
Omriss rundt knappFargen brukes på tekst og ramme i sekundærknapper.
SkyggeFargen brukes på skygger.

Administrer fargepaletten

Butikkens fargeoppsett og fargealternativer angis i temainnstillingene. For helfarger kan du bruke fargevelgeren til å velge en ny farge, eller angi fargeverdien i tekstfeltet. Fargefeltet godtar følgende fargenavn og verdier:

  • fargenavn, som red, black eller blue
  • RGB-fargekoder
  • heksadesimale fargeverdier

Steg:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Klikk på Tilpass ved siden av temaet du vil tilpasse.
  3. Klikk på tannhjul-ikonet, og klikk deretter på Farger.
  4. Klikk på et eksisterende oppsett i seksjonen Oppsett, eller klikk på Legg til oppsett for å legge til et nytt fargeoppsett.
  5. Klikk på fargeprøven for innholdstypefargen du ønsker å endre.
  6. For å angi farge må du oppgi en hexfargekode, eller velge fargen fra fargevelgeren. For å angi fargen til gjennomsiktig, må du slette hex-kodeverdien fra tekstfeltet.
  7. Klikk på Lagre.

Legge til fargevalget ditt

Når du har definert fargevalget i temainnstillingene, kan du tilordne et fargevalg med fargevelgeren i temaets seksjoner og blokker. Fargetemavelgeren er bare tilgjengelig i enkelte seksjoner, blokker og generelle temainnstillinger.

Fargetemavelger

Fargeoverganger

Du kan konfigurere en fargeovergang med farger i noen temaer for å skape visuelt interessante bakgrunner. Innstillingen color_background brukes til å tilpasse CSS-bakgrunnsegenskapen.

Fargeovergangvelgeren lar deg velge farger, overgangsstil, vinkel, posisjon og gjennomsiktighet for fargeovergangen. Alternativene som velges i fargeovergangvelgeren forhåndsvises i sanntid i temaredigeringsprogrammet. Du kan også opprette en fargeovergangsbakgrunn med CSS-kode, som inkluderer en valideringskontroll.

Konfigurer fargeoverganger

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Klikk på Tilpass ved siden av temaet du vil tilpasse.
  3. Klikk på tannhjul-ikonet, og klikk deretter på Farger.
  4. Klikk på et eksisterende oppsett du vil redigere i seksjonen Oppsett.
  5. Klikk på alternativet for fargeoverganger, som Bakgrunnsovergang.
  6. Hvis du ikke har konfigurert en fargeovergang fra før, vises noen forhåndsinnstilte alternativer du kan velge blant. Velg en forhåndsinnstilt fargeovergang for å åpne alternativpanelet.
  7. Velg alternativer for fargeovergangen:

    • Velg mellom en lineær eller en radial fargeovergang. Bruk knappene til å velge foretrukken fargeovergangsstil.
    • Angi vinkelen på fargeovergangen med pil opp og ned. Klikk på pil opp eller pil ned for å øke eller redusere vinkelprosenten med 5.
    • Bruk glidebryteren for å velge Plassering av fargeovergangen, eller angi en numerisk verdi i feltet.
    • Angi en bestemt fargehexkode, eller bruk glidebryteren for å velge en nyanse. Nylig valgte farger vises nederst i panelet for fargeovergangsalternativer.
    • Hvis du vil gjøre fargeovergangen ugjennomsiktig, bruker du glidebryteren til høyre for å velge gjennomsiktighet på fargeovergangen. Du kan også angi en prosentverdi i feltet ved siden av hexfargekoden.
  8. Klikk på Lagre.

Fargeovergangsvelger i temaredigeringsprogrammet

Bruk CSS til å angi fargeoverganger

De fleste background-egenskapsverdier i CSS kan brukes for å angi en bakgrunnsfarge. Du kan bruke dette feltet til helfarger (for eksempel #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) og hsla(0, 0%, 0%, 1), som alle gir en helsort bakgrunn), eller til fargeoverganger (for eksempel linear-gradient(red, green), radial-gradient(red, green) eller conic-gradient(red, green)). Fargeoverganger kan også gjentas.

Steg:

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Klikk på Tilpass ved siden av temaet du vil tilpasse.
  3. Klikk på tannhjul-ikonet, og klikk deretter på Farger.
  4. Klikk på et eksisterende oppsett du vil redigere i seksjonen Oppsett.
  5. Klikk på fargeovergangen du vil redigere.
  6. Klikk på pilen ved siden av Fargeovergang, og velg deretter CSS.
  7. I feltet CSS-kode skriver du inn eller limer inn fargeovergangskoden din. Forhåndsvisningen i temaredigeringsprogrammet viser fargeovergangen på riktig sted.
  8. Klikk på Lagre.

Felt for CSS-fargeovergangskode i temaredigeringsprogrammet

Fjern en fargeovergang

  1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
  2. Klikk på Tilpass ved siden av temaet du vil tilpasse.
  3. Klikk på tannhjul-ikonet, og klikk deretter på Farger.
  4. Klikk på et eksisterende oppsett du vil redigere i seksjonen Oppsett.
  5. Klikk på fargeovergangen du vil fjerne.
  6. Klikk på Fjern fargeovergang.
  7. Klikk på Lagre.
Finner du ikke svarene du leter etter? Vi er her for å hjelpe deg.