Farbschemata: Wechseln Sie zwischen mehreren Farbpaletten

Et farveskema er en færdig farvepalette til din webshop. I stedet for at prikke enkeltfarver ind ét felt ad gangen, vælger du et skema, klikker Gem, og så har hele butikken et nyt udtryk. Knapper, header, menu, footer, og USP-bar skifter samlet, så farverne stadig passer sammen bagefter.

Farver er noget af det billigste, du kan skrue på. Du kan give butikken et sæsonskifte til julen, prøve et mere afdæmpet look af, eller matche shoppen til dit logo uden at hyre en udvikler. Og fortryder du, klikker du bare det gamle skema igen.

Hvor finder du Farveskemaer

Du finder siden under Butik, Design, Farveskemaer, lige under Temaindstillinger i Design-menuen.

Siden åbner med overskriften "Vælg farveskema" og et galleri af kort. Hvert kort viser en stribe farveprøver, skemaets navn, og en kort beskrivelse. Længere nede står afsnittet "Farver" med de enkelte farvefelter, og nederst sidder en Gem-knap, der følger med, når du scroller.

Kan du ikke finde menupunktet? Så har dit tema ikke farveskemaer

Det her er den vigtigste ting at vide, før du leder forgæves: Farveskemaer dukker kun op i menuen, hvis det tema, din shop kører på lige nu, har farveskemaer indbygget. Har det ikke det, findes menupunktet slet ikke, og går du direkte til adressen, bliver du sendt videre til Temaindstillinger.

Teknisk kræver det, at temaet indeholder en fil ved navn color_scheme.json i sin rodmappe, altså samme sted som temaets øvrige opsætningsfil theme_settings.json. Er filen der ikke, eller mangler den listen over skemaer, er der intet menupunkt.

Blandt Shoporamas indbyggede temaer er det Montana og MontanaB2B, der har farveskemaer. Kører du et andet tema, for eksempel Delaware, eller et tema en udvikler har bygget til dig, sætter du i stedet farverne enkeltvis under Temaindstillinger. Vil du have farveskemaer i dit eget tema, kan din udvikler tilføje filen.

Sådan skifter du farveskema

1. Gå til Butik, Design, Farveskemaer.
2. Kig galleriet igennem. Det skema, der er valgt lige nu, er markeret med en blå ramme om kortet.
3. Klik på det kort, du vil bruge. Farvefelterne længere nede fyldes med det samme med skemaets farver, så du kan se de præcise farvekoder, før du gemmer.
4. Vil du justere en enkelt farve, så gør det nu (se næste afsnit).
5. Klik Gem nederst. Cmd+S på Mac eller Ctrl+S på Windows gør det samme.

Der sker ingenting ude i butikken, før du klikker Gem, så du kan roligt klikke rundt mellem skemaerne. Når du har gemt, ryddes shoppens cache automatisk. Ser du stadig de gamle farver, så lav et hårdt genindlæs (Cmd+Shift+R eller Ctrl+F5), for browseren kan holde fast i den gamle version et øjeblik.

Hvad indeholder et farveskema?

Et skema er et navn, en kort beskrivelse af udtrykket, og en farve til hver af de farveroller, temaet arbejder med. Farveprøverne på kortet viser dem alle, og holder du musen over en prøve, kan du se hvilken rolle den udfylder.

I Montana er der otte skemaer: Standard, Varm, Kølig, Natur, Elegant, Rose, Luksus, og Sand. Farverne er delt i tre grupper:

• Grundfarver: Primær farve (tekst, overskrifter, og mørke elementer), Handlingsfarve (knapper, links, og call to action), samt Baggrundsfarve.
• Header & Navigation: Header baggrundsfarve, Header tekstfarve, og Menu baggrundsfarve.
• Footer & USP: Footer baggrundsfarve, Footer tekstfarve, USP baggrundsfarve, og USP tekstfarve.

Et farveskema styrer kun farver. Skrifttype, hjørneafrunding, afstand mellem sektioner, logo, og favicon hører til under Temaindstillinger og bliver ikke rørt, når du skifter skema.

Finjustér farverne selv

Under "Farver" står hver farve i sit eget felt med to muligheder: en farvevælger, du kan klikke på og pege i, og et lille tekstfelt til den hexadecimale farvekode, altså den slags, der ser ud som #2563eb. De to felter følger hinanden, så brug den, du er mest tryg ved. Har temaet defineret en standardfarve for feltet, sidder der til højre et lille cirkelpil-ikon, der sætter farven tilbage til den værdi. Ikonet ændrer kun feltet, så husk at klikke Gem bagefter.

En detalje, det er værd at kende: vælger du et skema og ændrer derefter en enkelt farve, bliver kortet ved med at være markeret. Markeringen fortæller altså hvilket skema du sidst tog udgangspunkt i, ikke at farverne er identiske med skemaet. Vil du tilbage til det rene skema, klikker du bare kortet igen.

Sådan hænger det sammen med Temaindstillinger

De to sider arbejder på de samme farver. Farveskema-siden er en genvej, der kun viser farverne og sætter dem alle på én gang, mens Butik, Design, Temaindstillinger indeholder alt det andet: tekster, billeder, funktioner, og de øvrige designvalg. I Montana ligger farverne dér i afsnittet Tema & Farver.

Ændrer du en farve det ene sted, kan du se den igen det andet, og den værdi du gemte sidst, er den der gælder. Skifter du skema, overskriver du kun de farver, der indgår i skemaet.

Sådan hænger det sammen med dit eget stylesheet

Har du eller din udvikler lagt egen CSS ind under Butik, Design, Stylesheet, bliver den indlæst efter temaets egen CSS. Din egen kode vinder derfor over temaet. Det er smart, når du vil rette noget bestemt, men det er også den typiske forklaring, hvis du skifter farveskema og oplever, at knapperne eller headeren beholder den gamle farve: et sted i dit eget stylesheet står farven skrevet fast. Fjern den faste farve dér, så henter elementet igen farven fra temaet.

Gode råd, inden du trykker Gem

• Tjek kontrasten. Farverne i de indbyggede skemaer er sat sammen, så teksten er læselig. Blander du selv, så hold øje med, at lys tekst ikke ender på lys baggrund. Det rammer både konvertering og tilgængelighed.
• Gå kurven og checkout igennem. Handlingsfarven bruges på "Læg i kurv" og på knapperne til betaling, så klik hele vejen igennem én gang bagefter, også på mobil.
• Husk dine billeder. Header, footer, og menuen følger med skemaet, men bannere og kampagnegrafik gør ikke. Har du grafik med den gamle farve bagt ind, skal den laves om.
• Skriv de gamle farvekoder ned. Har du selv finjusteret farver over tid, så kopiér koderne et sted hen, før du klikker et nyt skema. Der er ingen fortryd-knap eller historik på siden.

Er du helt ny, møder du i øvrigt farveskemaerne allerede i opsætningsguiden. Efter trinnet, hvor du vælger tema, kommer trinnet "Farver" med det samme galleri. Vælger du et tema uden farveskemaer, springes trinnet over.

Til dig der er teknisk

Dette afsnit er kun relevant, hvis du bygger eller vedligeholder dit eget tema.

For at få Farveskemaer frem i menuen skal temaet indeholde en color_scheme.json i sin rodmappe. Filen skal være gyldig JSON og indeholde en schemes-liste. Mangler filen eller nøglen, vises menupunktet ikke, og siden sender brugeren videre til Temaindstillinger.

{
  "groups": [
    {
      "label": "Grundfarver",
      "fields": ["theme.primary", "theme.action", "theme.background"]
    }
  ],
  "schemes": [
    {
      "id": "default",
      "name": "Standard",
      "description": "Kort beskrivelse af udtrykket.",
      "colors": {
        "theme.primary": "#111827",
        "theme.action": "#2563eb",
        "theme.background": "#ffffff"
      }
    }
  ]
}

Nøglerne har formen afsnit.felt og skal svare til felter af typen color i temaets theme_settings.json. Derfra hentes også navnet på hvert felt og værdien bag nulstil-ikonet, så et felt uden tilsvarende definition vises med sin rå nøgle og uden mulighed for at nulstille. groups styrer, hvordan felterne grupperes i kolonner, og schemes styrer kortene i galleriet, hvor farveprøverne tegnes ud fra skemaets colors.

Når brugeren gemmer, skrives farverne som helt almindelige temaindstillinger, mens skemaets id gemmes separat, udelukkende så det rigtige kort kan markeres næste gang. Dit tema skal derfor kun forholde sig til temaindstillingerne, ikke til skema-id'et. Montana omsætter dem til CSS-variabler i :root, blandt andet --color-primary og --color-action. Det mønster er værd at kopiere, for så slår et skemaskift igennem overalt uden rettelser i selve HTML-koden. Skal du linke til filer i temaet, så se Link til stylesheet m.m.

Ofte stillede spørgsmål

Jeg kan slet ikke se Farveskemaer i menuen. Er det noget jeg skal købe?

Nej, det koster ikke noget. Punktet vises kun, hvis dit nuværende tema har farveskemaer indbygget, og det har langtfra alle temaer. Kører du et tema uden, sætter du farverne under Butik, Design, Temaindstillinger i stedet. Hvilket tema din shop kører, kan du se under Butik, Design, Tema.

Hvordan ser jeg, hvilket skema der er valgt lige nu?

Det valgte skema er markeret med en blå ramme om kortet. Har du efterfølgende justeret en farve i hånden, bliver kortet ved med at være markeret, så det viser hvad du tog udgangspunkt i. Vil du have det rene skema tilbage, klikker du kortet igen og gemmer.

Skal jeg kunne CSS for at bruge det her?

Nej. Du klikker et kort og trykker Gem. Vil du finjustere, kan du bruge farvevælgeren og pege på den farve, du vil have, uden at kende en eneste farvekode. Tekstfeltet ved siden af er kun for dem, der har fået en kode udleveret.

Kan jeg fortryde, hvis jeg synes det blev grimt?

Der er ingen fortryd-knap, men du kan altid klikke det gamle skema og gemme igen. Har du selv skruet på enkeltfarver, så kopiér koderne ned først, for de overskrives når du vælger et nyt skema. Cirkelpil-ikonet ved hvert felt fører farven tilbage til temaets standard, hvis temaet har defineret en.

Gælder skemaet for alle mine webshops?

Nej. Valget hører til den enkelte webshop, så har du flere shops, vælger du skema for hver af dem. Det er praktisk, hvis du kører flere brands på samme platform og vil holde dem visuelt adskilt.

Kan jeg planlægge et julefarveskema, der automatisk skifter tilbage bagefter?

Ikke på selve farveskemaerne. Skift af skema gør du manuelt. Har du brug for noget, der tændes og slukkes på bestemte datoer, kan du kigge på stylesheet-varianter under Butik, Design, Stylesheet, som kan tidsstyres og testes mod hinanden.

Ændrer et nyt farveskema mine fakturaer og ordrebekræftelser?

Den printvenlige faktura har sit eget faste udseende og bliver ikke påvirket. I Montana bruger nogle af mailskabelonerne din primære farve på knapperne, så de følger delvist med. Send dig selv en testmail, hvis det er vigtigt, at det hele spiller sammen.

Jeg har gemt, men butikken ser ens ud. Hvad gør jeg?

Prøv først et hårdt genindlæs i browseren, da den kan ligge inde med den gamle version af siden. Sker der stadig ingenting på et bestemt element, skyldes det som regel egen CSS under Design, Stylesheet, der skriver farven fast.

Hvad sker der med mine farver, hvis jeg skifter tema bagefter?

Farverne er gemt som temaindstillinger, og et nyt tema kan bruge andre felter. Skift derfor tema først, og gå så Farveskemaer eller Temaindstillinger igennem bagefter. Har det nye tema ingen farveskemaer, forsvinder menupunktet igen.

Er du i tvivl om noget, eller kan du ikke få farverne til at slå igennem, er du velkommen til at skrive til support@shoporama.dk.