Eget stylesheet (Custom CSS)

Med funktionen Eget Stylesheet kan du tilføje din egen CSS til både din webshop og dit admin-panel. Det er ideelt til designjusteringer som ændring af farver, skrifttyper, marginer, eller skjulning af elementer, uden at du skal ændre i temafiler. De to steder styres hver for sig: webshoppens CSS ligger under Design → Stylesheet, og admin-panelets under Konto → Firma → Admin-udseende.

Sådan tilføjer du CSS

1. Gå til Design i menuen
2. Klik på Stylesheet
3. Indtast din CSS-kode i tekstfeltet
4. Klik Gem

Din CSS indlæses efter temaets egne stylesheets, så dine regler overskriver standardstilene. Den gælder hele webshoppen, ikke kun forsiden. Skal du style selve admin-panelet, foregår det et andet sted, som beskrevet under Admin-tilpasninger længere nede.

Stylesheet-varianter: flere CSS-versioner på samme tema

Feltet med din CSS er dit hovedstylesheet. Lige under det ligger afsnittet Stylesheet-varianter, hvor du kan gemme alternative udgaver af den samme CSS. En variant er en komplet CSS-version med sit eget navn, sin egen synlighed, og sin egen tidsplan. Du kan have lige så mange varianter du vil, men der vises kun én ad gangen.

Så længe ingen variant er aktiv, bruger shoppen hovedstylesheetet. Bliver en variant aktiv, overtager den, og når den slukkes igen, er hovedstylesheetet tilbage præcis som før.

Sådan opretter du en variant

Der er to veje, og de bruges til hver sit:

• Lav variant af dette (knappen ved siden af Gem): gemmer dit hovedstylesheet og kopierer indholdet af feltet over i en ny variant, som åbnes med det samme. Brug den når du vil bygge videre på det design du allerede har.
• Ny variant (knappen i afsnittet Stylesheet-varianter): starter forfra. Du giver varianten et navn og kan indsætte CSS med det samme, eller lade feltet stå tomt og udfylde det bagefter.

Uanset hvilken vej du vælger, oprettes varianten offline. Den påvirker ikke shoppen, før du selv slår den til eller giver den et datointerval.

Felterne på en variant

Du gemmer med Gem hvis du vil blive på siden, eller Gem og luk hvis du vil tilbage til oversigten. Slet variant fjerner varianten helt.

Hvornår er en variant bedre end bare at rette i CSS'en?

• Kampagner der slukker sig selv. Læg din Black Friday-styling i en variant med en start- og slutdato. Så tænder og slukker den af sig selv, og ingen skal huske at rydde op mandag morgen.
• Sæson og højtider. Gem jule-, påske-, og udsalgsstylingen som hver sin variant, og genbrug dem år efter år i stedet for at bygge dem forfra.
• Eksperimenter uden risiko. Prøv en større omskrivning i en variant. Går det ikke som håbet, slår du bare varianten fra igen.
• Hurtig fortrydelse. Ét klik sætter varianten offline, og shoppen falder tilbage til hovedstylesheetet, som er helt urørt. Du skal ikke først finde ud af hvad du lavede om.
• Split-test. Sammenlign to designs på rigtige besøgende i stedet for at gætte hvilket der sælger bedst.

Statusserne i variantlisten

Status-kolonnen fortæller med et enkelt blik hvad der sker med hver variant:

Handlingerne yderst til højre

En klon får "(kopi)" sat på navnet, oprettes altid offline, og får en prioritet ét trin under originalen. Dermed bliver originalen ved med at vinde indtil du selv beslutter andet, og klonen er et sikkert sted at prøve noget nyt. Det gør den samtidig til det oplagte udgangspunkt for en split-test.

Sletning kan ikke fortrydes. Varianten fjernes samtidig fra de split-tests hvor den indgik.

Sådan vælger systemet hvilken variant der vises

Ved hver sidevisning finder shoppen selv frem til det stylesheet der skal bruges. Rækkefølgen er altid den samme:

1. Først samles alle varianter der er aktive lige nu, altså dem der enten er sat online eller er inde i deres datointerval.
2. Kører der en split-test der dækker mindst to af dem, fordeles de besøgende mellem varianterne.
3. Ellers vinder varianten med den højeste prioritet.
4. Har flere den samme prioritet, vinder den nyeste af dem.
5. Er ingen varianter aktive, bruges hovedstylesheetet.

Online-feltet og datoerne hænger sammen

Det er kombinationen af Online-feltet og de to datofelter der afgør hvornår en variant er i luften:

Prioritet

Prioritet bruges kun når flere varianter er aktive på samme tid. Det højeste tal vinder. Standard er 0, og du må gerne bruge negative tal. Er to varianter aktive med den samme prioritet, vinder den nyeste, altså den du oprettede sidst.

Varianter gælder kun webshoppen

• Varianter ændrer kun det dine kunder ser. Admin-panelet påvirkes ikke.
• Feltet øverst på Stylesheet-siden viser altid hovedstylesheetet, også mens en variant er i luften. Du kan derfor ikke komme til at rette i en variant ved et uheld når du åbner siden.
• Skal du style selve admin, ligger det under Konto → Firma → Admin-udseende. Den CSS findes kun i én version, har ingen varianter, og gælder alle brugere på kontoen.

Hvorfor slår ændringen ikke altid igennem med det samme?

Din shop gemmer færdige sider i en cache, så de indlæses hurtigt. Slår du en variant til eller fra, kan der derfor gå op til fire timer før alle besøgende ser den nye CSS på de sider der er gemt. Kører der en split-test, er cachen automatisk slået fra imens, så hver besøgende altid får den variant vedkommende er placeret i.

Split-test to stylesheet-varianter mod hinanden

Har du to varianter, behøver du ikke gætte på hvilken der virker bedst. Du kan lade dine besøgende afgøre det:

1. Opret mindst to varianter, og slå dem begge online.
2. Så snart to varianter er aktive samtidig, dukker genvejen Opret en split-test af dine stylesheet-varianter op under variantlisten. Du kan også gå direkte til Design → Split-test.
3. Giv testen et navn, og opret den.
4. Tilføj de varianter der skal være med, fordel trafikken mellem dem, og start testen.

En stylesheet-test gælder hele shoppen og ikke en enkelt side. Det gør den til det rigtige valg når du vil teste noget der går igen overalt, som knapfarver, skriftstørrelser, eller afstande omkring køb-knappen.

Sætter du flueben i Brug vinderen som ny standard når testen stopper, ordner Shoporama resten: vinderen slås online og får en højere prioritet end de øvrige, og de tabende varianter slås fra. Du kan altid ændre det manuelt bagefter fra variantlisten.

Hele forløbet, statistikken, og hvordan vinderen findes, er beskrevet i Sådan opretter og kører du en split-test i Shoporama. Vil du først forstå tanken bag, kan du læse mere om split-test som funktion.

Webshop-tilpasninger

Her er eksempler på typiske tilpasninger af webshoppen:

Ændr baggrundsfarve på headeren:

header {
    background-color: #1a1a2e;
}

Ændr skrifttype:

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

Skjul et element:

.element-class {
    display: none;
}

Admin-tilpasninger

Du kan også tilpasse udseendet af admin-panelet med din egen CSS. Den skrives dog et andet sted end shoppens stylesheet, nemlig under Konto → Firma → Admin-udseende, og den gælder alle brugere på kontoen. Nedenfor finder du en komplet oversigt over de CSS-klasser og ID'er du kan bruge.

Ordrelisten — CSS-klasser på ordrerækker

Hver ordrerække i ordrelisten har en række dynamiske CSS-klasser, som du kan bruge til at style ordrer baseret på deres status, betaling, og leveringsmetode.

Betalingsstatus

Eksempel — Rød baggrund på ubetalte ordrer:

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

Ordrestatus

Ordrerækkens status tilføjes direkte som klasse:

Eksempel — Grøn baggrund på sendte og betalte ordrer:

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

Eksempel — Nedtonet visning af annullerede ordrer:

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

Leveringsmetode

Leveringsmetodens navn konverteres automatisk til en CSS-klasse. Alle bogstaver bliver små, og specialtegn erstattes med underscore. Fx bliver "Hjemmeadresse med GLS" til klassen .hjemmeadresse_med_gls.

Eksempel — Farvemarkér ordrer efter leveringsmetode:

/* GLS-ordrer med orange baggrund */
.hjemmeadresse_med_gls {
    background-color: #fff3e0 !important;
}

/* PostNord-ordrer med blå baggrund */
.postdanmark_til_privatadresse {
    background-color: #e3f2fd !important;
}

Betalingsgateway

Hver ordrerække får en klasse baseret på betalingsgatewayens ID i formatet .payment-{ID}. Du finder ID'et ved at gå til Integrationer → Betalingsgateways og se URL'en når du klikker på redigér.

Eksempel — Grøn baggrund for ordrer betalt med en bestemt gateway:

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

Andre ordrerække-klasser

Eksempel — Fremhæv EAN-ordrer:

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

Ordredetaljer — klasser i den udvidede visning

Når du folder en ordre ud i listen, vises ordredetaljerne med disse klasser:

Ordreindhold

Lagerstatus

Eksempel — Rød tekst på varer der ikke er på lager:

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

Knapper i ordrelisten

Knapperne i ordrelisten har faste ID'er, som du kan style:

Primære knapper

Fragtknapper

Eksempel — Fremhæv print-knappen:

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

Eksempel — Skjul fragtknapper du ikke bruger:

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

Webshop-specifik styling

Hvis du administrerer flere webshops fra samme firma, kan du style admin forskelligt pr. webshop. Body-elementet har klassen webshop{ID} hvor ID er webshoppens ID-nummer.

Eksempel — Forskellig header-farve pr. webshop:

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

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

Layout og navigation

Eksempel — Ændr farven på venstremenuen:

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

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

Andre nyttige elementer

Populære use cases

Farvekodning af ordrelisten

En populær opsætning er at farvekode ordrelisten, så du hurtigt kan skelne mellem betalte/ubetalte ordrer og forskellige statusser:

/* Ubetalte ordrer i lys rød */
.unpaid {
    background-color: #fff0f0 !important;
}

/* Betalte og sendte ordrer i lys grøn */
.paid.sent {
    background-color: #f0fff0 !important;
}

/* Annullerede ordrer nedtonet */
.cancelled {
    background-color: #f5f5f5 !important;
    opacity: 0.6;
}

/* EAN-ordrer i lys blå */
.ean {
    background-color: #f0f4ff !important;
}

Fremhæv vigtige handlingsknapper

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

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

Giv ordrelisten mere plads

/* Mindre luft i siderne = mere plads til kolonnerne */
.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

Tydelig markering af varer der ikke er på lager

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

Sådan finder du den rigtige CSS-selector

For at finde den præcise klasse eller ID for et element:

1. Højreklik på elementet i din browser
2. Vælg Undersøg element (Inspect)
3. Find elementets klasse (fx class="unpaid sent") eller ID
4. Brug klassen eller ID'et som CSS-selector i dit stylesheet

Større designændringer

Eget Stylesheet er velegnet til mindre tilpasninger. Til større designændringer anbefales det at redigere selve temafilerne via SFTP. Se artiklen Log på med SFTP for at komme i gang.

CSS cheat sheet

Her er en hurtig oversigt over de mest brugte CSS-egenskaber, så du kan komme i gang uden at skulle slå det op.

Farver

Farver kan angives som navne, hex-koder, eller RGB:

/* Hex-kode (mest brugt) */
color: #ff0000;              /* Rød tekst */
background-color: #f0f0f0;  /* Lys grå baggrund */

/* Farvenavne */
color: red;
background-color: white;

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

Nyttige farvekoder:

Skrifttype (font-family)

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

/* Google Fonts (tilføj import øverst i dit stylesheet) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
font-family: 'Open Sans', sans-serif;

Tekst

font-size: 14px;            /* Tekststørrelse */
font-weight: bold;          /* Fed tekst (eller 400, 600, 700) */
font-style: italic;         /* Kursiv */
text-align: center;         /* Centreret (left, right, center) */
text-decoration: underline; /* Understregning */
text-transform: uppercase;  /* Store bogstaver (lowercase, capitalize) */
line-height: 1.5;           /* Linjeafstand */
letter-spacing: 1px;        /* Bogstavmellemrum */

Baggrund

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

Rammer (border)

border: 1px solid #ccc;           /* Ramme rundt om hele elementet */
border-bottom: 2px solid #333;    /* Kun bund-ramme */
border-left: 4px solid #28a745;   /* Grøn venstre-ramme */
border-radius: 8px;               /* Afrundede hjørner */
border: none;                     /* Fjern ramme */

Afstande (margin og padding)

/* Padding = indvendig afstand */
padding: 10px;              /* Alle sider */
padding: 10px 20px;         /* Top/bund, venstre/højre */
padding-left: 15px;         /* Kun venstre */

/* Margin = udvendig afstand */
margin: 10px;               /* Alle sider */
margin-bottom: 20px;        /* Kun bund */
margin: 0 auto;             /* Centrér et element */

Vis/skjul

display: none;       /* Skjul helt (fylder ikke) */
visibility: hidden;  /* Usynlig (fylder stadig) */
opacity: 0.5;        /* Halvt gennemsigtig (0 = usynlig, 1 = fuld) */

Størrelse

width: 100%;         /* Fuld bredde */
max-width: 800px;    /* Maksimal bredde */
height: 50px;        /* Fast højde */
min-height: 200px;   /* Minimum højde */

Skygger

box-shadow: 0 2px 4px rgba(0,0,0,0.1);    /* Blød skygge */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Kraftigere skygge */
box-shadow: none;                          /* Fjern skygge */

Ofte stillede spørgsmål

Jeg har lavet en variant, men shoppen ser ud præcis som før. Hvad har jeg glemt?

En ny variant oprettes altid offline, så den ikke kan komme i luften ved et uheld. Gå ind på Stylesheet-siden, find varianten i listen, og klik på tænd-og-sluk-ikonet i højre side af rækken. Står der "Aktiv nu" i Status-kolonnen, er den i luften. Ser du stadig det gamle design på shoppen, så vent lidt og prøv igen, for færdige sider gemmes i en cache i op til fire timer.

Bliver variantens CSS lagt oven på mit almindelige stylesheet?

Nej. Så længe varianten er aktiv, er det kun variantens CSS der bruges. Hovedstylesheetet er sat på pause, ikke slettet. Derfor findes knappen "Lav variant af dette": den kopierer hele dit nuværende stylesheet over i den nye variant. Starter du i stedet med "Ny variant" og kun skriver én enkelt regel, er alle dine andre regler væk så længe varianten kører.

Kan jeg få min julestyling til at slukke sig selv?

Ja, og det er en af de bedste grunde til at bruge varianter. Læg julens CSS i en variant, sæt "Vises fra og med" til den dag den skal i luften, og "Vises til og med" til den sidste dag. Begge dage tæller med, og perioden slutter ved midnat. Så tænder og slukker kampagnen af sig selv, også selvom Online-feltet ikke er slået til.

Jeg har rodet med en variant, og nu ser shoppen forkert ud. Hvad gør jeg?

Klik på tænd-og-sluk-ikonet ud for varianten i listen, så den bliver offline. Shoppen falder tilbage til hovedstylesheetet, som ikke er blevet ændret, så du behøver ikke først finde ud af hvad der gik galt i CSS'en. Har varianten datoer på, skal de ryddes samtidig, ellers går den i luften igen inden for sin periode.

Kan jeg lave varianter af farvekodningen i ordrelisten?

Nej. Varianter gælder kun det kunderne ser i webshoppen. CSS til selve admin, altså farvekodningen af ordrer, knapper, og menuer, ligger under Konto → Firma → Admin-udseende, og den findes kun i én version. Til gengæld gælder den for alle brugere på kontoen, så hele holdet ser de samme farver på de samme ordrer.

Jeg har flere webshops. Gælder en variant dem alle?

Nej. Både hovedstylesheetet og varianterne hører til den enkelte webshop, så de skal oprettes i hver shop for sig. Skal flere shops have samme kampagnestyling, kopierer du CSS'en over manuelt. Til gengæld kan du farvekode dine shops forskelligt i admin, hvilket er beskrevet i afsnittet om webshop-specifik styling ovenfor.

Hvad sker der hvis jeg lader CSS-feltet stå tomt i en aktiv variant?

Så kører shoppen helt uden din egen CSS, og kun temaets eget design er tilbage. Det lyder som en fejl, men det kan bruges bevidst: har du mistanke om at en af dine egne regler ødelægger noget, kan du sætte en tom variant i luften et øjeblik og se om problemet forsvinder. Det er også måden at split-teste "med min CSS" mod "uden min CSS".

Hvor mange varianter kan være aktive på samme tid?

Så mange du vil, men der vises kun én ad gangen. Er flere aktive, vinder den med den højeste prioritet, og ved samme prioritet vinder den nyeste. Undtagelsen er en kørende split-test, hvor de besøgende med vilje fordeles mellem to eller flere varianter.

Har du brug for hjælp? Kontakt os på support@shoporama.dk.