Admin-utseende: anpassa din adminpanel

Shoporamas administration ser i princip likadan ut för alla. Men du kan själv bestämma hur den ska se ut om du vill ha dina egna färger, din egen logotyp högst upp eller bara en tydligare markering av de beställningar som ni måste reagera snabbt på. Det gör du under Admin-utseende.

I praktiken handlar det om ett textfält där du skriver in några rader, och sedan ser administrationen annorlunda ut för alla på kontot.

Så här hittar du ”Admin-utseende”

Öppna menyn till vänster, bläddra ner till avsnittet Konto, klicka på Företag och välj Admin-utseende.

Sidan består av en ruta som heter Anpassad CSS. Här står det: ”Här kan du anpassa utseendet på din administratörssida med CSS. Ändringarna gäller för alla användare på ditt konto.” Nedanför finns ett stort textfält och längst ner en Spara-knapp.

1. Skriv eller klistra in din CSS i textfältet.
2. Klicka på Spara, eller använd Cmd+S på Mac och Ctrl+S på Windows.
3. Sidan laddas om och du ser resultatet omedelbart i hela administrationsgränssnittet.

Om du vill ångra allt, töm fältet och klicka på Spara. Då återställs standardutseendet. Ingenting går sönder under tiden.

Vad är CSS och vad kan det göra?

CSS är det språk som styr hur en sida ser ut: färger, teckenstorlekar, avstånd och om ett element överhuvudtaget ska visas. Du markerar det du vill ändra och skriver sedan vad som ska hända:

.top-app-bar {
  background: #14532d !important;
}

Regeln säger: ”allt med namnet top-app-bar ska ha en mörkgrön bakgrund”, och top-app-bar är just fältet högst upp i administrationspanelen. !important betyder ”detta väger tyngre än vad Shoporama själv har bestämt”, och det kommer du oftast att behöva. Du kan byta färger, ändra typsnitt och teckenstorlek, göra siffror tydligare, flytta runt på saker och dölja element som du inte använder. Däremot kan du inte lägga till nya funktioner eller infoga JavaScript. Fältet ändrar endast hur administrationspanelen ser ut, aldrig vad den kan göra.

Vem och vad gäller ändringarna för?

• Alla användare på kontot. Det är inte en personlig inställning. Dina kollegor ser ändringen nästa gång de laddar en sida.
• Alla webbutiker inom samma företag. Längre ner kan du se hur du anpassar en enskild butik.
• Endast administratörsgränssnittet, inte din butik. Dina kunder ser ingenting av detta. Om butikens utseende ska ändras görs det i temat under Design.
• Endast när man är inloggad. Inloggningssidan påverkas inte.
• Alla användare som är knutna till företaget kan redigera fältet. Det finns ingen särskild behörighet för detta, så kom överens internt om vem som får ändra det.

Tre exempel som du kan kopiera direkt

1. Ge toppfältet din egen färg

Den enklaste och mest synliga ändringen. Byt ut färgkoden mot din egen:

.top-app-bar {
  background: #14532d !important;
}

2. Färglägg order med en viss fraktmetod

Varje orderrad i orderöversikten får automatiskt en rad namn som beskriver ordern. Ett av dem är fraktmetodens namn med små bokstäver, där allt utom bokstäverna a till z har ersatts med understreck. ”Afhentning” blir till afhentning och ”Post Nord” blir till post_nord. Om beställningar med avhämtning ska vara gula, så att paketavdelningen uppmärksammar dem:

tr.afhentning {
  background: #fff3cd !important;
}

Om du är osäker på det exakta namnet kan du högerklicka på orderraden och välja ”Undersök” eller ”Visa källkod”. Det finns en steg-för-steg-genomgång i Ändra bakgrundsfärgen på order med specifik leverans.

3. Förstora ordernumret

Om du håller telefonen i ena handen och ska hitta ett ordernummer i en lång lista:

.shoporama-order-id-link {
  font-size: 16px;
  font-weight: 700;
}

Lägg in din egen logotyp högst upp

Om du är en byrå som sköter butiken åt en kund, eller om du bara vill ha ditt eget varumärke att titta på, kan du byta ut Shoporama-logotypen längst upp till vänster. Logotypen måste finnas på en adress som kan hämtas via https, och adressen ska skrivas utan citattecken:

.navbar-brand img {
  content: url(https://dit-domaene.dk/logo.svg);
  width: 160px;
}

Om du hellre bara vill dölja logotypen räcker det med display: none.

Kom ihåg mörkt läge

Administrationsgränssnittet finns i både en ljus och en mörk version. Mörkt läge är en personlig inställning som varje användare själv aktiverar, så du kan inte räkna med att dina kollegor använder samma version som du. Din CSS måste fungera i båda lägena.

Fallgropen är ljusa färger. En pastellfärgad bakgrund som ser fin ut i ljus läge blir till en skrikande fläck med oläslig text i mörkt läge. Lösningen är att skriva regeln två gånger och placera body.dark-mode framför den sista:

tr.afhentning {
  background: #fff3cd !important;
}

body.dark-mode tr.afhentning {
  background: #3a3320 !important;
}

Och testa det: aktivera mörkt läge på ditt eget konto, bläddra igenom sidan och inaktivera det igen.

Flera butiker? Ge varje butik sin egen färg

Det klassiska misstaget när man driver flera webbutiker från samma konto är att ändra ett pris eller skicka en beställning till fel butik. En färgad toppmeny per butik löser problemet. Varje webbutik har sitt eget nummer, och det står i adressfältet i webbläsaren. Om det står /admin/da/7/ är du i webbutik nummer 7, och du riktar in den med body.webshop7 framför regeln:

body.webshop1 .top-app-bar {
  background: #14532d !important;
}

body.webshop7 .top-app-bar {
  background: #7c2d12 !important;
}

Det finns inget billigare sätt att undvika att göra ändringar i fel webbutik. Läs mer i avsnittet ”Hur skapar jag ytterligare en webbutik?”.

När är det värt pengarna?

• Byråer och webbutvecklare. Lägg in er egen logotyp och era egna färger så att kunden möts av ert varumärke vid inloggningen.
• Flera butiker på ett konto. Färgkod varje butik så att ingen redigerar på fel ställe.
• Paketering och lager. Markera de beställningar som ska hanteras på ett annat sätt, till exempel hämtning i butiken. Färre felpackningar innebär besparingar.
• Utbildning. Dölj de delar av menyn som en ny kollega inte behöver använda de första veckorna.
• Tillgänglighet. Öka teckenstorleken på ett ställe för alla om siffrorna är svåra att läsa.

Bra att veta innan du sätter igång

• Det handlar om utseende, inte behörigheter. Om du döljer en menypost finns funktionen fortfarande kvar och kan fortfarande nås. Om en medarbetare verkligen ska stängas av styrs detta på användarnivå. Se Så här skapar du flera användare i din butik.
• Fältet accepterar endast CSS. Inte JavaScript, spårningskoder eller HTML. Om du vill lägga in kod i butiken använder du ”Infoga kod” i head och body på din Shoporama-butik.
• Vissa tecken kan inte användas. Anförandetecken, apostrof, större-än-tecknet och et-tecknet fungerar inte i fältet. Se avsnittet om tekniska detaljer nedan.
• Namnen kan ändras. Vi utvecklar kontinuerligt administrationsgränssnittet, vilket innebär att en regel kan sluta fungera efter en uppdatering. Det enda som händer är att ändringen förlorar sin effekt.
• Ser du inte ändringen? Gör en hård omladdning med Cmd+Shift+R eller Ctrl+F5.
• Spara en kopia av din CSS i ett dokument, så kan du alltid infoga den igen.

För dig som är tekniskt kunnig

Fältets innehåll placeras i ett style-element i sidhuvudet på alla administrationssidor för inloggade användare på företaget, enligt plattformens egna stilmallar. Du vinner alltså på ordningen, men både utility-klasser och mörkt läge använder !important på flera ställen, så räkna med att behöva använda det själv.

Tecken du inte kan använda

Innehållet HTML-escapes, och eftersom ett style-element inte avkodar HTML-entiteter överlever inte citattecken, apostrof, >, < och &. I praktiken betyder det:

• Använd efterföljande selektorer, det vill säga .card .card-header, istället för barnselektorn.
• Skriv url(https://...) utan citattecken.
• Undvik content med textvärden, eftersom de kräver citattecken. Bilder via url() fungerar bra.
• Använd max-width och min-width i medieförfrågningar, inte den nyare range-syntaxen.
• CSS-nästning med ett-tecken fungerar inte. Skriv selektorerna fullständigt.

Däremot fungerar @media, calc(), CSS-variabler, pseudoklasser och attributselektorer med värden utan citattecken.

Hakar du kan hänga upp din CSS på

På body finns bland annat webshop<nummer> (butikens nummer från adressen), dark-mode och layout-topmenu. Varje orderrad i orderöversikten har bland annat:

• paid eller unpaid.
• Orderens status, till exempel new, process, sent, pending, ready, cancelled, ready_for_pickup eller picked_up.
• Fraktmetodens namn med gemener, där allt utom bokstäverna a till z har ersatts med understreck. Siffror, mellanslag samt æ, ø och å blir alltså också till understreck.
• ean på beställningar med EAN-nummer, credit_note på kreditnotor samt has_pickup_address eller no_pickup_address beroende på om beställningen ska levereras till en paketbutik.

Den äldre genomgången i Eget stylesheet (Custom CSS) innehåller några ytterligare exempel på selektorer i menyn.

Vanliga frågor

Jag kan inte koda. Kan jag ändå använda det?

Ja. Kopiera exemplen ovan till fältet och ändra bara färgkoden. Om det går fel tömmer du fältet och klickar på Spara, så blir allt som förut. Om du vill ha något mer avancerat kan din webbutvecklare fixa det på några minuter, eller så kan du skriva till support@shoporama.dk.

Påverkar det något för mina kunder i själva webbutiken?

Nej. Fältet gäller enbart administrationen, det vill säga det du själv ser när du är inloggad. Dina kunder märker ingenting. Om butikens utseende ska ändras gör du det i temat under Design.

Gäller min CSS även för mina kollegor?

Ja, och det står också på sidan: ändringarna gäller för alla användare på kontot, i alla webbutiker som tillhör samma företag. Informera därför gärna dina kollegor innan du gör några större ändringar.

Hur ångrar jag om administrationen ser konstig ut?

Gå till Konto, Företag, Admin-utseende, markera allt i fältet, radera det och klicka på Spara. Då återställs standardutseendet. Om du fortfarande ser det gamla utseendet, gör en hård omladdning med Cmd+Shift+R eller Ctrl+F5.

Kan jag ha olika färger på mina olika butiker?

Ja. Skriv body.webshop följt av butikens nummer framför regeln. Numret står i adressfältet i webbläsaren direkt efter språkkoden. Då får varje butik sin egen färg, och det blir svårare att göra ändringar i fel butik.

Fungerar det i mörkt läge?

Din CSS laddas in i båda lägena, men anpassas inte automatiskt. En ljus bakgrundsfärg förblir ljus även för en kollega i mörkt läge. Skriv därför en extra regel med body.dark-mode framför och testa sidan i båda lägena.

Varför fungerar inte min regel?

De tre vanligaste orsakerna: !important saknas, vilket gör att plattformens egen stil tar över, selektorn är felstavad, eller så innehåller regeln citattecken eller ett större-än-tecken, som inte kan användas i fältet. Kontrollera också att sidan har laddats om helt.

Kan jag infoga JavaScript eller ett spårningsskript här?

Nej. Innehållet läggs in som ren CSS, och tecken som ”mindre än” och ”större än” omkodas under processen, så att ett script-tagg aldrig kan köras. Om det behövs ett skript i själva webbutiken finns det en separat plats för det, vilket beskrivs i artikeln om att infoga kod i head och body.

Kan jag dölja menyalternativ så att nya medarbetare inte rör om i priser och inställningar?

Du kan dölja dem visuellt, vilket är bra för att förenkla vardagen. Men det är ingen spärr: funktionen finns fortfarande kvar och kan fortfarande nås. Om en användare verkligen inte ska ha åtkomst styrs detta under Konto, Företag, Användare.

Kan jag byta ut Shoporama-logotypen mot min egen?

Ja. Du klickar på logotypen högst upp och ersätter den med adressen till din egen logotyp. Logotypen måste kunna hämtas via https, och adressen skrivs utan citattecken. Det är särskilt lämpligt för byråer som vill visa upp sitt eget varumärke för kunden.

Om du behöver hjälp med en specifik ändring är du välkommen att skriva till support@shoporama.dk. Berätta gärna exakt vad du vill ska se annorlunda ut och bifoga en skärmdump.