Färgscheman: växla mellan flera färgpaletter

Ett färgschema är en färdig färgpalett för din webbutik. Istället för att lägga in enskilda färger ett fält i taget väljer du ett schema, klickar på Spara, och vips så får hela butiken ett nytt utseende. Knappar, sidhuvud, meny, sidfot och USP-fält ändras samtidigt, så att färgerna fortfarande harmonierar med varandra efteråt.

Färger är något av det billigaste du kan justera. Du kan ge butiken en säsongsanpassad look inför julen, prova en mer dämpad stil eller anpassa butiken till din logotyp utan att behöva anlita en utvecklare. Och om du ångrar dig klickar du bara på det gamla färgschemat igen.

Var hittar du färgscheman

Du hittar sidan under Butik, Design, Färgscheman, precis under Tema-inställningar i Design-menyn.

Sidan öppnas med rubriken ”Välj färgschema” och ett galleri med kort. Varje kort visar en rad färgprover, färgschematets namn och en kort beskrivning. Längre ner finns avsnittet ”Färger” med de enskilda färgfälten, och längst ner finns en Spara-knapp som följer med när du bläddrar.

Hittar du inte menyalternativet? Då har ditt tema inga färgscheman

Det här är det viktigaste att veta innan du letar förgäves: Färgscheman visas bara i menyn om det tema som din butik använder just nu har inbyggda färgscheman. Om det inte har det finns menyalternativet inte alls, och om du går direkt till adressen skickas du vidare till Temainställningar.

Tekniskt sett krävs det att temat innehåller en fil med namnet color_scheme.json i sin rotmapp, alltså på samma plats som temats övriga inställningsfil theme_settings.json. Om filen inte finns där, eller om listan över färgscheman saknas, finns det inget menyalternativ.

Bland Shoporamas inbyggda teman är det Montana och MontanaB2B som har färgscheman. Om du använder ett annat tema, till exempel Delaware, eller ett tema som en utvecklare har skapat åt dig, ställer du istället in färgerna en och en under temainställningarna. Om du vill ha färgscheman i ditt eget tema kan din utvecklare lägga till filen.

Så här byter du färgschema

1. Gå till Butik, Design, Färgscheman.
2. Bläddra igenom galleriet. Det färgschema som är valt just nu är markerat med en blå ram runt kortet.
3. Klicka på det kort du vill använda. Färgfälten längre ner fylls omedelbart med färgschemats färger, så att du kan se de exakta färgkoderna innan du sparar.
4. Om du vill justera en enskild färg gör du det nu (se nästa avsnitt).
5. Klicka på Spara längst ner. Cmd+S på Mac eller Ctrl+S på Windows ger samma resultat.

Ingenting händer i butiken förrän du klickar på Spara, så du kan lugnt klicka dig fram mellan färgschemana. När du har sparat rensas webbutikens cache automatiskt. Om du fortfarande ser de gamla färgerna ska du göra en hård uppdatering (Cmd+Shift+R eller Ctrl+F5), eftersom webbläsaren kan hålla kvar den gamla versionen ett ögonblick.

Vad innehåller ett färgschema?

Ett schema består av ett namn, en kort beskrivning av uttrycket och en färg för var och en av de färgroller som temat arbetar med. Färgproverna på kortet visar dem alla, och om du håller muspekaren över ett prov kan du se vilken roll det fyller.

I Montana finns det åtta färgscheman: Standard, Varm, Kall, Natur, Elegant, Rosa, Lyx och Sand. Färgerna är indelade i tre grupper:

• Grundfärger: Primärfärg (text, rubriker och mörka element), Åtgärdsfärg (knappar, länkar och uppmaningar till handling) samt Bakgrundsfärg.
• Sidhuvud och navigering: Bakgrundsfärg för sidhuvud, textfärg för sidhuvud och bakgrundsfärg för meny.
• Sidfot & USP: Sidfotsbakgrundsfärg, sidfotstextfärg, USP-bakgrundsfärg och USP-textfärg.

Ett färgschema styr endast färgerna. Teckensnitt, hörnrundning, avstånd mellan sektioner, logotyp och favicon hör till temainställningarna och påverkas inte när du byter schema.

Finjustera färgerna själv

Under ”Färger” finns varje färg i ett eget fält med två alternativ: en färgväljare som du kan klicka på och peka i, och ett litet textfält för den hexadecimala färgkoden, alltså den typ som ser ut som #2563eb. De två fälten fungerar på samma sätt, så använd det du känner dig mest bekväm med. Om temat har definierat en standardfärg för fältet finns det till höger en liten cirkelpil som återställer färgen till det värdet. Ikonen ändrar endast fältet, så kom ihåg att klicka på Spara efteråt.

En detalj som är värd att känna till: om du väljer ett schema och sedan ändrar en enskild färg förblir kortet markerat. Markeringen visar alltså vilket schema du senast utgick ifrån, inte att färgerna är identiska med schemat. Om du vill återgå till det tomma schemat klickar du bara på kortet igen.

Så här hänger det ihop med temainställningarna

De två sidorna använder samma färger. Sidan med färgscheman är en genväg som endast visar färgerna och tillämpar dem alla på en gång, medan Butik, Design och Tema-inställningar innehåller allt annat: texter, bilder, funktioner och övriga designval. I Montana finns färgerna i avsnittet Tema & Färger.

Om du ändrar en färg på det ena stället kan du se den på det andra, och det värde du sparade senast är det som gäller. Om du byter färgschema skriver du endast över de färger som ingår i schemat.

Så här hänger det ihop med din egen stilmall

Om du eller din utvecklare har lagt in egen CSS under Butik, Design, Stylesheet, laddas den in efter tematets egen CSS. Din egen kod har därför företräde framför temat. Det är praktiskt när du vill justera något specifikt, men det är också den vanligaste förklaringen om du byter färgschema och märker att knapparna eller rubriken behåller den gamla färgen: någonstans i ditt eget stilark är färgen fastställd. Ta bort den fasta färgen där, så hämtar elementet färgen från temat igen.

Tips innan du klickar på Spara

• Kontrollera kontrasten. Färgerna i de inbyggda färgschemana är sammansatta så att texten är läsbar. Om du blandar färgerna själv, se till att ljus text inte hamnar på en ljus bakgrund. Det påverkar både konvertering och tillgänglighet.
• Gå igenom varukorgen och kassan. Handlingsfärgen används på ”Lägg i varukorgen” och på betalningsknapparna, så klicka dig igenom hela processen en gång efteråt, även på mobilen.
• Tänk på dina bilder. Sidhuvud, sidfot och menyn ingår i färgschemat, men det gör inte banners och kampanjgrafik. Om du har grafik där den gamla färgen är inbäddad måste den göras om.
• Skriv ner de gamla färgkoderna. Om du själv har finjusterat färgerna över tid, kopiera koderna till ett annat ställe innan du väljer ett nytt färgschema. Det finns ingen ångra-knapp eller historik på sidan.

Om du är helt ny kommer du för övrigt att stöta på färgschemana redan i installationsguiden. Efter steget där du väljer tema kommer steget ”Färger” med samma galleri. Väljer du ett tema utan färgscheman hoppas steget över.

För dig som är tekniskt kunnig

Det här avsnittet är endast relevant om du bygger eller underhåller ditt eget tema.

För att färgscheman ska visas i menyn måste temat innehålla en color_scheme.json i sin rotmapp. Filen måste vara giltig JSON och innehålla en lista över färgscheman. Om filen eller nyckeln saknas visas inte menyalternativet, och sidan omdirigerar användaren till Tema-inställningar.

{
  "groups": [
    {
      "label": "Grundfärger",
      "fields": ["theme.primary", "theme.action", "theme.background"]
    }
  ],
  "schemes": [
    {
      "id": "default",
      "name": "Standard",
      "description": "Kort beskrivning av utseendet.",
      "colors": {
        "theme.primary": "#111827",
        "theme.action": "#2563eb",
        "theme.background": "#ffffff"
      }
    }
  ]
}

Nycklarna har formen avsnitt.fält och ska motsvara fält av typen color i temats theme_settings.json. Därifrån hämtas även namnet på varje fält och värdet bakom återställningsikonen, så att ett fält utan motsvarande definition visas med sin råa nyckel och utan möjlighet att återställa. groups styr hur fälten grupperas i kolumner, och schemes styr korten i galleriet, där färgproverna ritas utifrån schemat colors.

När användaren sparar skrivs färgerna som helt vanliga temainställningar, medan schematets id sparas separat, enbart för att rätt kort ska kunna markeras nästa gång. Ditt tema behöver därför endast ta hänsyn till temainställningarna, inte till schematets id. Montana omvandlar dem till CSS-variabler i :root, bland annat --color-primary och --color-action. Det mönstret är värt att kopiera, eftersom ett schema-byte då slår igenom överallt utan att du behöver göra några ändringar i själva HTML-koden. Om du behöver länka till filer i temat, se Länk till stilmall m.m.

Vanliga frågor

Jag ser inte alls ”Färgscheman” i menyn. Är det något jag måste köpa?

Nej, det kostar ingenting. Alternativet visas endast om ditt nuvarande tema har inbyggda färgscheman, och det har långt ifrån alla teman. Om du använder ett tema utan färgscheman ställer du in färgerna under Butik, Design, Temainställningar istället. Vilket tema din butik använder kan du se under Butik, Design, Tema.

Hur ser jag vilket färgschema som är valt just nu?

Det valda färgschemat markeras med en blå ram runt kortet. Om du senare har justerat en färg manuellt förblir kortet markerat, så att det visar vad du utgick ifrån. Vill du återgå till det ursprungliga färgschemat klickar du på kortet igen och sparar.

Måste jag kunna CSS för att använda det här?

Nej. Du klickar på ett kort och trycker på Spara. Vill du finjustera kan du använda färgväljaren och peka på den färg du vill ha, utan att behöva känna till en enda färgkod. Textfältet bredvid är endast till för dem som har fått en kod utdelad.

Kan jag ångra mig om jag tycker att det blev fult?

Det finns ingen ångra-knapp, men du kan alltid klicka på det gamla temat och spara igen. Om du själv har justerat enskilda färger ska du först kopiera koderna, eftersom de skrivs över när du väljer ett nytt tema. Cirkelpilen bredvid varje fält återställer färgen till temats standard, om temat har en sådan definierad.

Gäller färgschemat för alla mina webbutiker?

Nej. Valet gäller för varje enskild webbshop, så om du har flera butiker väljer du ett färgschema för var och en av dem. Det är praktiskt om du driver flera varumärken på samma plattform och vill hålla dem visuellt åtskilda.

Kan jag planera ett julfärgschema som automatiskt återgår till standarden efteråt?

Inte när det gäller själva färgschemana. Du byter schema manuellt. Om du behöver något som aktiveras och inaktiveras på vissa datum kan du titta på stylesheet-varianter under Butik, Design, Stylesheet, som kan tidsstyras och testas mot varandra.

Påverkar ett nytt färgschema mina fakturor och orderbekräftelser?

Den utskriftsvänliga fakturan har sitt eget fasta utseende och påverkas inte. I Montana använder vissa e-postmallar din primära färg på knapparna, så de följer delvis med. Skicka ett testmejl till dig själv om det är viktigt att allt stämmer överens.

Jag har sparat, men butiken ser likadan ut. Vad gör jag?

Prova först att ladda om sidan i webbläsaren, eftersom den kan ha den gamla versionen av sidan lagrad. Om det fortfarande inte händer något med ett visst element beror det oftast på egen CSS under Design, Stylesheet, som låser färgen.

Vad händer med mina färger om jag byter tema senare?

Färgerna sparas som temainställningar, och ett nytt tema kan använda andra fält. Byt därför tema först och gå sedan igenom Färgscheman eller Temainställningar efteråt. Om det nya temat inte har några färgscheman försvinner menyalternativet igen.

Om du är osäker på något eller inte får färgerna att visas som de ska är du välkommen att skriva till support@shoporama.dk.