Fargeskjemaer: bytt mellom flere fargepaletter

Et fargeskjema er en ferdig fargepalett for nettbutikken din. I stedet for å legge inn enkeltfarger ett felt om gangen, velger du et skjema, klikker på «Lagre», og så får hele butikken et nytt utseende. Knapper, topptekst, meny, bunntekst og USP-felt endres samlet, slik at fargene fortsatt passer sammen etterpå.

Farger er noe av det billigste du kan justere på. Du kan gi butikken et sesongskifte til jul, prøve et mer dempet utseende eller tilpasse butikken til logoen din uten å måtte ansette en utvikler. Og hvis du angrer, klikker du bare på det gamle fargevalget igjen.

Hvor finner du fargevalg

Du finner siden under Butikk, Design, Fargeskjemaer, rett under Tema-innstillinger i Design-menyen.

Siden åpnes med overskriften «Velg fargepalett» og et galleri med kort. Hvert kort viser en stripe med fargeprøver, skjemas navn og en kort beskrivelse. Lenger ned finner du avsnittet «Farger» med de enkelte fargefelt, og nederst på siden er det en «Lagre»-knapp som følger med når du blar nedover.

Finner du ikke menypunktet? Da har temaet ditt ikke fargeskjemaer

Dette er det viktigste du må vite før du leter forgjeves: Fargeskjemaer vises bare i menyen hvis temaet nettbutikken din bruker akkurat nå, har innebygde fargeskjemaer. Har det ikke det, finnes ikke menypunktet i det hele tatt, og hvis du går direkte til adressen, blir du sendt videre til Tema-innstillinger.

Teknisk sett krever dette at temaet inneholder en fil med navnet color_scheme.json i rotmappen, altså samme sted som temaets øvrige konfigurasjonsfil theme_settings.json. Hvis filen ikke er der, eller hvis den mangler listen over fargevalg, finnes det ikke noe menyvalg.

Blant Shoporamas innebygde temaer er det Montana og MontanaB2B som har fargeskjemaer. Hvis du bruker et annet tema, for eksempel Delaware, eller et tema en utvikler har laget for deg, angir du i stedet fargene enkeltvis under Temainnstillinger. Hvis du ønsker fargeskjemaer i ditt eget tema, kan utvikleren din legge til filen.

Slik endrer du fargepaletten

1. Gå til Butikk, Design, Fargeskjemaer.
2. Bla gjennom galleriet. Det fargevalget som er valgt akkurat nå, er markert med en blå ramme rundt kortet.
3. Klikk på kortet du vil bruke. Fargefeltet lenger ned fylles umiddelbart med fargene i skjemat, slik at du kan se de nøyaktige fargekodene før du lagrer.
4. Hvis du vil justere en enkelt farge, kan du gjøre det nå (se neste avsnitt).
5. Klikk på «Lagre» nederst. Cmd+S på Mac eller Ctrl+S på Windows gir samme resultat.

Det skjer ingenting i nettbutikken før du klikker på «Lagre», så du kan trygt klikke deg rundt mellom fargepalettene. Når du har lagret, tømmes nettbutikkens cache automatisk. Hvis du fremdeles ser de gamle fargene, kan du foreta en hard oppdatering (Cmd+Shift+R eller Ctrl+F5), da nettleseren kan holde fast ved den gamle versjonen et øyeblikk.

Hva inneholder et fargeskjema?

Et fargevalg består av et navn, en kort beskrivelse av stilen og en farge for hver av fargerollene som temaet bruker. Fargeprøvene på kortet viser dem alle, og hvis du holder musepekeren over en prøve, kan du se hvilken rolle den fyller.

I Montana finnes det åtte skjemaer: Standard, Varm, Kjølig, Natur, Elegant, Rose, Luksus og Sand. Fargene er delt inn i tre grupper:

• Grunnfarger: Primærfarge (tekst, overskrifter og mørke elementer), Handlingsfarge (knapper, lenker og call to action) samt Bakgrunnsfarge.
• Topptekst og navigasjon: Bakgrunnsfarge for topptekst, tekstfarge for topptekst og bakgrunnsfarge for meny.
• Bunntekst og USP: Bakgrunnsfarge for bunntekst, tekstfarge for bunntekst, bakgrunnsfarge for USP og tekstfarge for USP.

Et fargevalg styrer kun farger. Skrifttype, avrundede hjørner, avstand mellom seksjoner, logo og favikon hører under temainnstillinger og påvirkes ikke når du bytter fargevalg.

Juster fargene selv

Under «Farger» står hver farge i sitt eget felt med to alternativer: en fargevelger du kan klikke på og peke i, og et lite tekstfelt for den heksadesimale fargekoden, altså den typen som ser ut som #2563eb. De to feltene fungerer på samme måte, så bruk det du føler deg mest komfortabel med. Hvis temaet har definert en standardfarge for feltet, finnes det til høyre et lite ikon med en sirkelpil som tilbakestiller fargen til den verdien. Ikonet endrer bare feltet, så husk å klikke på «Lagre» etterpå.

En detalj det er verdt å vite: hvis du velger et skjema og deretter endrer en enkelt farge, forblir kortet merket. Merkingen indikerer altså hvilket skjema du sist tok utgangspunkt i, ikke at fargene er identiske med skjemaet. Hvis du vil tilbake til det rene skjemaet, klikker du bare på kortet igjen.

Slik henger det sammen med temainnstillinger

De to sidene bruker de samme fargene. Fargeskjema-siden er en snarvei som bare viser fargene og setter dem alle på en gang, mens Butikk, Design, Tema-innstillinger inneholder alt det andre: tekster, bilder, funksjoner og de øvrige designvalgene. I Montana finner du fargene i seksjonen Tema og farger.

Hvis du endrer en farge på det ene stedet, kan du se den igjen på det andre, og den verdien du lagret sist, er den som gjelder. Hvis du bytter fargepalett, overskriver du bare de fargene som inngår i paletten.

Slik henger det sammen med ditt eget stilark

Hvis du eller utvikleren din har lagt inn eget CSS under Butikk, Design, Stylesheet, lastes det inn etter temaets eget CSS. Din egen kode har derfor forrang fremfor temaet. Dette er praktisk når du vil endre noe spesifikt, men det er også den vanligste årsaken hvis du bytter fargevalg og opplever at knappene eller toppteksten beholder den gamle fargen: et sted i ditt eget stilark er fargen fastsatt. Fjern den faste fargen der, så henter elementet fargen fra temaet igjen.

Gode råd før du trykker på «Lagre»

• Sjekk kontrasten. Fargene i de innebygde skjemaene er satt sammen slik at teksten er lesbar. Hvis du blander fargene selv, må du passe på at lys tekst ikke havner på lys bakgrunn. Det påvirker både konvertering og tilgjengelighet.
• Gå gjennom handlekurven og kassen. Handlingsfargen brukes på «Legg i handlekurven» og på betalingsknappene, så klikk deg gjennom hele prosessen én gang etterpå, også på mobil.
• Husk bildene dine. Topptekst, bunntekst og menyen følger med malen, men bannere og kampanjegrafikk gjør ikke det. Hvis du har grafikk med den gamle fargen innebygd, må den lages om.
• Skriv ned de gamle fargekodene. Hvis du selv har finjustert fargene over tid, bør du kopiere kodene til et sted før du velger et nytt fargevalg. Det finnes ingen «Angre»-knapp eller historikk på siden.

Hvis du er helt ny, møter du for øvrig fargepalettene allerede i oppsettveiviseren. Etter trinnet der du velger tema, kommer trinnet «Farger» med det samme galleriet. Velger du et tema uten fargepaletter, hoppes trinnet over.

Til deg som er teknisk anlagt

Dette avsnittet er kun relevant hvis du utvikler eller vedlikeholder ditt eget tema.

For å få fargeskjemaene til å vises i menyen, må temaet inneholde en color_scheme.json-fil i rotmappen. Filen må være gyldig JSON og inneholde en schemes-liste. Hvis filen eller nøkkelen mangler, vises ikke menypunktet, og siden sender brukeren videre til Temainnstillinger.

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

Nøklene har formen avsnitt.felt og skal samsvare med felter av typen color i temaets theme_settings.json. Der hentes også navnet på hvert felt og verdien bak nullstillingsikonet, slik at et felt uten tilsvarende definisjon vises med sin rå nøkkel og uten mulighet for å nullstille. groups styrer hvordan feltene grupperes i kolonner, og schemes styrer kortene i galleriet, der fargeprøvene tegnes ut fra skjemaets colors.

Når brukeren lagrer, skrives fargene som helt vanlige temainnstillinger, mens skjemaets ID lagres separat, utelukkende for at riktig kort skal kunne merkes neste gang. Temaet ditt skal derfor kun forholde seg til temainnstillingene, ikke til skjema-ID-en. Montana konverterer dem til CSS-variabler i :root, blant annet --color-primary og --color-action. Dette mønsteret er verdt å kopiere, for da vil et skjemaskift gjelde overalt uten at du trenger å gjøre endringer i selve HTML-koden. Hvis du skal lenke til filer i temaet, se Lenke til stilark m.m.

Ofte stilte spørsmål

Jeg ser ikke «Fargeskjemaer» i menyen i det hele tatt. Er det noe jeg må kjøpe?

Nei, det koster ingenting. Punktet vises bare hvis ditt nåværende tema har innebygde fargevalg, og det har langt fra alle temaer. Hvis du bruker et tema uten fargeskjemaer, angir du fargene under «Butikk», «Design», «Temainnstillinger» i stedet. Du kan se hvilket tema butikken din bruker under «Butikk», «Design», «Tema».

Hvordan ser jeg hvilket fargevalg som er valgt akkurat nå?

Det valgte fargevalget er markert med en blå ramme rundt kortet. Hvis du senere har justert en farge manuelt, forblir kortet markert, slik at det viser hva du tok utgangspunkt i. Hvis du vil ha det rene fargevalget tilbake, klikker du på kortet igjen og lagrer.

Må jeg kunne CSS for å bruke dette?

Nei. Du klikker på et kort og trykker på «Lagre». Hvis du vil finjustere, kan du bruke fargevelgeren og peke på fargen du ønsker, uten å kjenne en eneste fargekode. Tekstfeltet ved siden av er kun for de som har fått utdelt en kode.

Kan jeg angre hvis jeg synes det ble stygt?

Det finnes ingen «Angre»-knapp, men du kan alltid klikke på det gamle temaet og lagre på nytt. Hvis du selv har justert enkeltfarger, må du først kopiere kodene, for de blir overskrevet når du velger et nytt tema. Sirkelpil-ikonet ved hvert felt tilbakestiller fargen til temaets standard, hvis temaet har definert en.

Gjelder fargevalget for alle nettbutikkene mine?

Nei. Valget gjelder for den enkelte nettbutikk, så hvis du har flere butikker, må du velge fargepalett for hver av dem. Dette er praktisk hvis du driver flere merkevarer på samme plattform og ønsker å holde dem visuelt adskilt.

Kan jeg planlegge et julefargeskjema som automatisk skifter tilbake etterpå?

Ikke på selve fargepalettene. Du må bytte fargepalett manuelt. Hvis du trenger noe som slås på og av på bestemte datoer, kan du se på stylesheet-varianter under Butikk, Design, Stylesheet, som kan tidsstyres og testes mot hverandre.

Vil et nytt fargevalg endre fakturaene og ordrebekreftelsene mine?

Den utskriftsvennlige fakturaen har sitt eget faste utseende og påvirkes ikke. I Montana bruker noen av e-postmalene din primærfarge på knappene, så de følger delvis med. Send deg selv en test-e-post hvis det er viktig at alt henger sammen.

Jeg har lagret, men butikken ser lik ut. Hva skal jeg gjøre?

Prøv først å tvinge nettleseren til å laste inn siden på nytt, da den kan ha den gamle versjonen av siden lagret. Hvis det fortsatt ikke skjer noe med et bestemt element, skyldes det vanligvis egen CSS under Design, Stylesheet, som fastsetter fargen.

Hva skjer med fargene mine hvis jeg bytter tema senere?

Fargene er lagret som temainnstillinger, og et nytt tema kan bruke andre felt. Bytt derfor tema først, og gå deretter gjennom Fargeskjemaer eller Temainnstillinger etterpå. Hvis det nye temaet ikke har noen fargeskjemaer, forsvinner menyelementet igjen.

Hvis du er i tvil om noe, eller ikke får fargene til å vises, kan du gjerne skrive til support@shoporama.dk.