Egen stilmall (anpassad CSS)

Med funktionen ”Eget stylesheet” kan du lägga till din egen CSS till både din webbshop och din adminpanel. Det är perfekt för designjusteringar som att ändra färger, typsnitt, marginaler eller dölja element, utan att du behöver ändra i temafilerna. De två platserna hanteras separat: webbshopens CSS finns under Design → Stylesheet, och adminpanelens under Konto → Företag → Admin-utseende.

Så här lägger du till CSS

1. Gå till Design i menyn
2. Klicka på Stylesheet
3. Skriv in din CSS-kod i textfältet
4. Klicka på Spara

Din CSS laddas in efter temats egna stilmallar, så att dina regler överskriver standardstilarna. Den gäller hela webbutiken, inte bara startsidan. Om du vill anpassa själva adminpanelen görs det på ett annat ställe, som beskrivs under Adminanpassningar längre ner.

Stilarkvarianter: flera CSS-versioner för samma tema

Fältet med din CSS är ditt huvudstilark. Strax under det finns avsnittet Stilarkvarianter, där du kan spara alternativa versioner av samma CSS. En variant är en komplett CSS-version med eget namn, egen synlighet och egen tidsplan. Du kan ha så många varianter du vill, men endast en visas åt gången.

Så länge ingen variant är aktiv använder webbutiken huvudstilsarket. Om en variant aktiveras tar den över, och när den inaktiveras igen återgår huvudstilsarket till exakt samma utseende som tidigare.

Så här skapar du en variant

Det finns två sätt, och de används för olika ändamål:

• Skapa variant av detta (knappen bredvid Spara): sparar din huvudstilmall och kopierar innehållet i fältet till en ny variant, som öppnas direkt. Använd den när du vill bygga vidare på den design du redan har.
• Ny variant (knappen i avsnittet Stylesheet-varianter): börjar om från början. Du ger varianten ett namn och kan lägga in CSS direkt, eller låta fältet stå tomt och fylla i det senare.

Oavsett vilket alternativ du väljer skapas varianten offline. Den påverkar inte webbutiken förrän du själv aktiverar den eller anger ett datumintervall.

Fälten i en variant

Du sparar med Spara om du vill stanna kvar på sidan, eller Spara och stäng om du vill gå tillbaka till översikten. Ta bort variant tar bort varianten helt.

När är en variant bättre än att bara justera i CSS?

• Kampanjer som stängs av automatiskt. Lägg din Black Friday-design i en variant med ett start- och slutdatum. Då aktiveras och inaktiveras den automatiskt, och ingen behöver komma ihåg att städa upp på måndag morgon.
• Säsonger och högtider. Spara jul-, påsk- och rea-stilen som varsin variant och återanvänd dem år efter år istället för att bygga upp dem från grunden.
• Riskfria experiment. Testa en större omskrivning i en variant. Om det inte går som hoppats stänger du bara av varianten igen.
• Snabb ångerrätt. Ett klick tar varianten offline, och webbutiken återgår till huvudstylesheetet, som är helt oförändrat. Du behöver inte först ta reda på vad du ändrade.
• Split-test. Jämför två designer på riktiga besökare istället för att gissa vilken som säljer bäst.

Statusarna i variantlistan

Statuskolumnen visar med ett enda ögonkast vad som händer med varje variant:

Åtgärderna längst till höger

En klon får tillägget ”(kopia)” i namnet, skapas alltid offline och får en prioritet som ligger ett steg under originalet. På så sätt fortsätter originalet att vinna tills du själv bestämmer något annat, och klonen är ett säkert ställe att testa något nytt. Det gör den samtidigt till den självklara utgångspunkten för en split-test.

Raderingen kan inte ångras. Varianten tas samtidigt bort från de split-tester där den ingick.

Så här väljer systemet vilken variant som ska visas

Vid varje sidvisning hittar webbutiken själv den stilmall som ska användas. Ordningen är alltid densamma:

1. Först samlas alla varianter som är aktiva just nu, det vill säga de som antingen har publicerats eller befinner sig inom sitt datumintervall.
2. Om det pågår en split-test som omfattar minst två av dem fördelas besökarna mellan varianterna.
3. I annat fall vinner den variant som har högst prioritet.
4. Om flera har samma prioritet vinner den nyaste av dem.
5. Om inga varianter är aktiva används huvudstilsarket.

Fältet ”Online” och datumfälten hänger ihop

Det är kombinationen av fältet ”Online” och de två datumfälten som avgör när en variant är live:

Prioritet

Prioritet används endast när flera varianter är aktiva samtidigt. Det högsta talet vinner. Standardvärdet är 0, och du får gärna använda negativa tal. Om två varianter är aktiva med samma prioritet vinner den nyaste, det vill säga den du skapade senast.

Varianter gäller endast webbutiken

• Varianter ändrar endast det som dina kunder ser. Adminpanelen påverkas inte.
• Fältet högst upp på sidan Stylesheet visar alltid huvudstylesheetet, även när en variant är aktiv. Du kan därför inte råka redigera en variant av misstag när du öppnar sidan.
• Om du vill anpassa utseendet på själva admin-panelen hittar du det under Konto → Företag → Admin-utseende. Denna CSS finns endast i en version, har inga varianter och gäller alla användare på kontot.

Varför träder ändringen inte alltid i kraft omedelbart?

Din webbutik lagrar färdiga sidor i en cache så att de laddas snabbt. Om du aktiverar eller inaktiverar en variant kan det därför ta upp till fyra timmar innan alla besökare ser den nya CSS-koden på de sidor som har lagrats. Om ett split-test pågår stängs cachen automatiskt av under tiden, så att varje besökare alltid får den variant som hen är placerad i.

Split-testa två stilarkvarianter mot varandra

Om du har två varianter behöver du inte gissa vilken som fungerar bäst. Du kan låta dina besökare avgöra det:

1. Skapa minst två varianter och publicera dem båda online.
2. Så snart två varianter är aktiva samtidigt dyker genvägen Skapa en split-test av dina stilmallsvarianter upp under variantlistan. Du kan också gå direkt till Design → Split-test.
3. Ge testet ett namn och skapa det.
4. Lägg till de varianter som ska ingå, fördela trafiken mellan dem och starta testet.

Ett stylesheet-test gäller hela webbutiken och inte en enskild sida. Det gör det till det rätta valet när du vill testa något som återkommer överallt, såsom knappfärger, teckenstorlekar eller avstånd runt köpknappen.

Om du markerar rutan Använd vinnaren som ny standard när testet avslutas sköter Shoporama resten: vinnaren aktiveras online och får högre prioritet än de övriga, medan de förlorande varianterna inaktiveras. Du kan alltid ändra detta manuellt i efterhand från variantlistan.

Hela processen, statistiken och hur vinnaren utses beskrivs i ”Så här skapar och kör du ett split-test i Shoporama”. Om du först vill förstå tanken bakom kan du läsa mer om split-test som funktion.

Anpassningar av webbutiken

Här är exempel på typiska anpassningar av webbutiken:

Ändra bakgrundsfärgen på sidhuvudet:

header {
    background-color: #1a1a2e;
}

Ändra typsnitt:

body {
    font-family: 'Georgia', serif;
}

Dölj ett element:

.element-class {
    display: none;
}

Administratörsanpassningar

Du kan också anpassa utseendet på adminpanelen med din egen CSS. Den skrivs dock inte i butikens stylesheet, utan under Konto → Företag → Admin-utseende, och den gäller alla användare på kontot. Nedan hittar du en fullständig översikt över de CSS-klasser och ID:n du kan använda.

Orderlistan — CSS-klasser för orderrader

Varje orderrad i orderlistan har en rad dynamiska CSS-klasser som du kan använda för att formatera order utifrån deras status, betalning och leveranssätt.

Betalningsstatus

Exempel — Röd bakgrund för obetalda beställningar:

.unpaid {
    background-color: #ffe0e0 !important;
}

Orderstatus

Orderns status läggs till direkt som klass:

Exempel — Grön bakgrund för skickade och betalda beställningar:

.paid.sent {
    background-color: #ddffeb !important;
}

Exempel — Tonad visning av annullerade beställningar:

.cancelled {
    background-color: #eee !important;
    opacity: 0.7;
}

Leveranssätt

Leveranssättets namn omvandlas automatiskt till en CSS-klass. Alla bokstäver blir små och specialtecken ersätts med understreck. Till exempel blir ”Hemadress med GLS” till klassen .hemadress_med_gls.

Exempel — Markera beställningar med olika färger beroende på leveranssätt:

/* GLS-beställningar med orange bakgrund */
.hemadress_med_gls {
    background-color: #fff3e0 !important;
}

/* PostNord-beställningar med blå bakgrund */
.postdanmark_til_privatadresse {
    background-color: #e3f2fd !important;
}

Betalningsgateway

Varje orderrad tilldelas en klass baserad på betalningsgatewayens ID i formatet .payment-{ID}. Du hittar ID:t genom att gå till Integrationer → Betalningsgateways och titta på URL:en när du klickar på redigera.

Exempel — Grön bakgrund för beställningar som betalats med en viss gateway:

/* Ersätt 12 med din gateways ID */
.payment-12 {
    background-color: #c8e6c9 !important;
}

Andra orderradsklasser

Exempel — Markera EAN-beställningar:

.ean {
    background-color: #c2caff !important;
}

Orderdetaljer — klasser i den utökade vyn

När du expanderar en order i listan visas orderdetaljerna med följande klasser:

Orderinnehåll

Lagerstatus

Exempel — Röd text på varor som inte finns i lager:

.itemsnotinstock {
    color: #ff0000 !important;
    font-weight: bold;
}

Knappar i orderlistan

Knapparna i orderlistan har fasta ID:n som du kan styla:

Primära knappar

Fraktknappar

Exempel — Markera utskriftsknappen:

#btn-print {
    background-color: green !important;
    color: white !important;
}

Exempel — Dölj fraktknappar som du inte använder:

#btn-swipbox,
#btn-gls {
    display: none !important;
}

Webbshopspecifik formatering

Om du administrerar flera webbutiker från samma företag kan du anpassa utseendet på admin-sidan för varje webbutik. Body-elementet har klassen webshop{ID}, där ID är webbutikens ID-nummer.

Exempel — Olika färg på sidhuvudet för varje webbutik:

/* Webbutik med ID 123: röd rubrik */
body.webshop123 nav.top-app-bar {
    background-color: #ad3c3c !important;
}

/* Webbutik med ID 456: blå rubrik */
body.webshop456 nav.top-app-bar {
    background-color: #2a50a6 !important;
}

Layout och navigering

Exempel — Ändra färgen på menyn till vänster:

.drawer-light .drawer-menu .nav-link {
    color: #333 !important;
}

.drawer-light .drawer-menu .nav-link:hover {
    background-color: #f0f0f0 !important;
}

Andra användbara element

Populära användningsfall

Färgkodning av orderlistan

En populär inställning är att färgkoda orderlistan så att du snabbt kan skilja mellan betalda/obetalda order och olika statusar:

/* Obetalda beställningar i ljusrött */
.unpaid {
    background-color: #fff0f0 !important;
}

/* Betalda och skickade beställningar i ljusgrönt */
.paid.sent {
    background-color: #f0fff0 !important;
}

/* Avbeställda beställningar i dämpad färg */
.cancelled {
    background-color: #f5f5f5 !important;
    opacity: 0.6;
}

/* EAN-beställningar i ljusblått */
.ean {
    background-color: #f0f4ff !important;
}

Markera viktiga åtgärdsknappar

/* Grön utskriftsknapp */
#btn-print {
    background-color: #28a745 !important;
    color: white !important;
}

/* Orange GLS-knapp */
#btn-gls-api {
    background-color: #ff9800 !important;
    color: white !important;
}

Ge orderlistan mer utrymme

/* Mindre utrymme på sidorna = mer utrymme för kolumnerna */
.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

Tydlig markering av varor som inte finns i lager

.itemsnotinstock {
    color: #ff0000 !important;
    font-weight: bold;
    font-size: 1.1em;
}

Så här hittar du rätt CSS-selektor

Så här hittar du den exakta klassen eller ID:t för ett element:

1. Högerklicka på elementet i din webbläsare
2. Välj ”Inspektera element” (Inspect)
3. Hitta elementets klass (t.ex. class="unpaid sent") eller ID
4. Använd klassen eller ID:t som CSS-selektor i din stilmall

Större designändringar

Eget Stylesheet lämpar sig väl för mindre anpassningar. För större designändringar rekommenderas det att redigera själva temafilerna via SFTP. Se artikeln Logga in med SFTP för att komma igång.

CSS-cheat sheet

Här är en snabb översikt över de vanligaste CSS-egenskaperna, så att du kan komma igång utan att behöva slå upp dem.

Färger

Färger kan anges som namn, hex-koder eller RGB:

/* Hex-kod (vanligast) */
color: #ff0000;              /* Röd text */
background-color: #f0f0f0;  /* Ljusgrå bakgrund */

/* Färgnamn */
color: red;
background-color: white;

/* RGB med genomskinlighet */
background-color: rgba(0, 0, 0, 0.1);  /* Svart, 10 % synlig */

Användbara färgkoder:

Teckensnitt (font-family)

/* Byt typsnitt */
font-family: 'Georgia', serif;
font-family: 'Arial', sans-serif;
font-family: 'Courier New', monospace;

/* Google Fonts (lägg till import högst upp i din stilmall) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
font-family: 'Open Sans', sans-serif;

Text

font-size: 14px;            /* Textstorlek */
font-weight: bold;          /* Fet text (eller 400, 600, 700) */
font-style: italic;         /* Kursiv */
text-align: center;         /* Centrerad (left, right, center) */
text-decoration: underline; /* Understrykning */
text-transform: uppercase;  /* Versaler (lowercase, capitalize) */
line-height: 1.5;           /* Radavstånd */
letter-spacing: 1px;        /* Bokstavsavstånd */

Bakgrund

background-color: #f0f0f0;
background-image: url('https://example.com/bg.png');
background-size: cover;     /* Fyll hela området */
background-repeat: no-repeat;

Ram (border)

border: 1px solid #ccc;           /* Ram runt hela elementet */
border-bottom: 2px solid #333;    /* Endast bottenram */
border-left: 4px solid #28a745;   /* Grön vänsterram */
border-radius: 8px;               /* Avrundade hörn */
border: none;                     /* Ta bort ram */

Avstånd (margin och padding)

/* Padding = inre avstånd */
padding: 10px;              /* Alla sidor */
padding: 10px 20px;         /* Övre/nedre, vänster/höger */
padding-left: 15px;         /* Endast vänster */

/* Margin = yttre avstånd */
margin: 10px;               /* Alla sidor */
margin-bottom: 20px;        /* Endast nedtill */
margin: 0 auto;             /* Centrera ett element */

Visa/dölj

display: none;       /* Dölj helt (tar inte plats) */
visibility: hidden;  /* Osynlig (tar fortfarande plats) */
opacity: 0.5;        /* Halvt genomskinlig (0 = osynlig, 1 = helt genomskinlig) */

Storlek

width: 100%;         /* Full bredd */
max-width: 800px;    /* Maximal bredd */
height: 50px;        /* Fast höjd */
min-height: 200px;   /* Minsta höjd */

Skuggor

box-shadow: 0 2px 4px rgba(0,0,0,0.1);    /* Mjuk skugga */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Starkare skugga */
box-shadow: none;                          /* Ta bort skugga */

Vanliga frågor

Jag har skapat en variant, men webbutiken ser ut precis som tidigare. Vad har jag glömt?

En ny variant skapas alltid offline, så att den inte kan publiceras av misstag. Gå till sidan Stylesheet, hitta varianten i listan och klicka på på/av-ikonen till höger om raden. Om det står ”Aktiv nu” i kolumnen Status är den live. Om du fortfarande ser den gamla designen i butiken, vänta lite och försök igen, eftersom färdiga sidor sparas i cachen i upp till fyra timmar.

Läggs variantens CSS ovanpå mitt vanliga stylesheet?

Nej. Så länge varianten är aktiv används endast variantens CSS. Huvudstilsarket är pausat, inte raderat. Därför finns knappen ”Skapa variant av detta”: den kopierar hela ditt nuvarande stilsark till den nya varianten. Om du istället börjar med ”Ny variant” och bara skriver en enda regel, försvinner alla dina andra regler så länge varianten är aktiv.

Kan jag få min julstyling att stängas av automatiskt?

Ja, och det är en av de bästa anledningarna till att använda varianter. Lägg julens CSS i en variant, ställ in ”Visas från och med” till den dag den ska gå live och ”Visas till och med” till den sista dagen. Båda dagarna räknas, och perioden slutar vid midnatt. Då aktiveras och avaktiveras kampanjen av sig själv, även om fältet ”Online” inte är aktiverat.

Jag har mixat till det med en variant, och nu ser webbutiken fel ut. Vad gör jag?

Klicka på på/av-ikonen bredvid varianten i listan så att den blir offline. Butiken återgår till huvudstylesheetet, som inte har ändrats, så du behöver inte först ta reda på vad som gick fel i CSS:en. Om varianten har datum angivna måste dessa rensas samtidigt, annars aktiveras den igen inom sin giltighetsperiod.

Kan jag skapa varianter av färgkodningen i orderlistan?

Nej. Varianter gäller endast det som kunderna ser i webbutiken. CSS för själva adminpanelen, det vill säga färgkodningen av order, knappar och menyer, finns under Konto → Företag → Admin-utseende, och den finns endast i en version. Däremot gäller den för alla användare på kontot, så att hela teamet ser samma färger på samma beställningar.

Jag har flera webbutiker. Gäller en variant för alla?

Nej. Både huvudstilsarket och varianterna hör till den enskilda webbutiken, så de måste skapas separat för varje butik. Om flera butiker ska ha samma kampanjutseende kopierar du CSS-koden manuellt. Däremot kan du färgkoda dina webbutiker olika i admin, vilket beskrivs i avsnittet om webbutiksspecifik utformning ovan.

Vad händer om jag lämnar CSS-fältet tomt i en aktiv variant?

Då körs webbutiken helt utan din egen CSS, och endast temats egen design återstår. Det låter som ett fel, men det kan användas medvetet: om du misstänker att en av dina egna regler orsakar problem kan du publicera en tom variant en stund och se om problemet försvinner. Det är också ett sätt att göra en A/B-testning av ”med min CSS” mot ”utan min CSS”.

Hur många varianter kan vara aktiva samtidigt?

Så många du vill, men endast en visas åt gången. Om flera är aktiva vinner den med högst prioritet, och vid samma prioritet vinner den senaste. Undantaget är en pågående split-test, där besökarna medvetet fördelas mellan två eller flera varianter.

Behöver du hjälp? Kontakta oss på support@shoporama.dk.