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.
På denne siden
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.
Innstilling | Beskrivelse |
---|---|
Bakgrunn | Fargen brukes i bakgrunnen av noen seksjoner, og på bakgrunnen til knapper med omriss. |
Bakgrunn med fargeovergang | En fargeovergang brukes i bakgrunnen av noen seksjoner. Bakgrunnsoverganger erstatter bakgrunnen der det er mulig. |
Tekst | Fargen brukes på seksjons- eller blokktekst. |
Fylt knappebakgrunn | Fargen brukes på bakgrunnen i primærknapper. |
Fylt knappetikett | Fargen brukes på teksten i primærknapper. |
Omriss rundt knapp | Fargen brukes på tekst og ramme i sekundærknapper. |
Skygge | Fargen 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
ellerblue
- RGB-fargekoder
- heksadesimale fargeverdier
Steg:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Klikk på Tilpass ved siden av temaet du vil tilpasse.
- Klikk på tannhjul-ikonet, og klikk deretter på Farger.
- Klikk på et eksisterende oppsett i seksjonen Oppsett, eller klikk på Legg til oppsett for å legge til et nytt fargeoppsett.
- Klikk på fargeprøven for innholdstypefargen du ønsker å endre.
- 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.
- 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.
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Klikk på Tilpass ved siden av temaet du vil tilpasse.
- Klikk på tannhjul-ikonet, og klikk deretter på Farger.
- Klikk på et eksisterende oppsett du vil redigere i seksjonen Oppsett.
- Klikk på alternativet for fargeoverganger, som Bakgrunnsovergang.
- 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.
-
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.
Klikk på Lagre.
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:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Klikk på Tilpass ved siden av temaet du vil tilpasse.
- Klikk på tannhjul-ikonet, og klikk deretter på Farger.
- Klikk på et eksisterende oppsett du vil redigere i seksjonen Oppsett.
- Klikk på fargeovergangen du vil redigere.
- Klikk på pilen ved siden av Fargeovergang, og velg deretter CSS.
- I feltet CSS-kode skriver du inn eller limer inn fargeovergangskoden din. Forhåndsvisningen i temaredigeringsprogrammet viser fargeovergangen på riktig sted.
- Klikk på Lagre.
Fjern en fargeovergang
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Klikk på Tilpass ved siden av temaet du vil tilpasse.
- Klikk på tannhjul-ikonet, og klikk deretter på Farger.
- Klikk på et eksisterende oppsett du vil redigere i seksjonen Oppsett.
- Klikk på fargeovergangen du vil fjerne.
- Klikk på Fjern fargeovergang.
- Klikk på Lagre.