Eget stilark (tilpasset CSS)

Med funksjonen «Eget stilark» kan du legge til din egen CSS både i nettbutikken og i administrasjonspanelet. Dette er ideelt for designjusteringer som endring av farger, skrifttyper, marginer eller skjuling av elementer, uten at du trenger å endre i temafilene. De to stedene styres hver for seg: nettbutikkens CSS finnes under Design → Stylesheet, og administrasjonspanelets under Konto → Firma → Admin-utseende.

Slik legger du til CSS

1. Gå til Design i menyen
2. Klikk på «Stylesheet»
3. Skriv inn CSS-koden din i tekstfeltet
4. Klikk på «Lagre»

CSS-koden din lastes inn etter temaets egne stilark, slik at reglene dine overstyrer standardstilene. Dette gjelder hele nettbutikken, ikke bare forsiden. Hvis du vil tilpasse selve administrasjonspanelet, må du gjøre det et annet sted, som beskrevet under «Administrasjonstilpasninger» lenger ned.

Stilarkvarianter: flere CSS-versjoner på samme tema

Feltet med CSS-koden din er hovedstilarket ditt. Rett under det finner du avsnittet «Stilarkvarianter», der du kan lagre alternative versjoner av den samme CSS-koden. En variant er en komplett CSS-versjon med eget navn, egen synlighet og egen tidsplan. Du kan ha så mange varianter du vil, men det vises bare én om gangen.

Så lenge ingen variant er aktiv, bruker nettbutikken hovedstylesheetet. Blir en variant aktiv, tar den over, og når den deaktiveres igjen, er hovedstylesheetet tilbake akkurat som før.

Slik oppretter du en variant

Det finnes to måter, og de brukes til forskjellige formål:

• Lag variant av dette (knappen ved siden av Lagre): lagrer hovedstylesheetet ditt og kopierer innholdet i feltet over til en ny variant, som åpnes umiddelbart. Bruk den når du vil bygge videre på designet du allerede har.
• Ny variant (knappen i avsnittet «Stilark-varianter»): starter på nytt. Du gir varianten et navn og kan legge inn CSS med en gang, eller la feltet stå tomt og fylle det ut senere.

Uansett hvilken metode du velger, opprettes varianten offline. Den påvirker ikke nettbutikken før du selv aktiverer den eller angir et datointervall for den.

Feltene i en variant

Du lagrer med «Lagre» hvis du vil bli på siden, eller «Lagre og lukk» hvis du vil tilbake til oversikten. «Slett variant» fjerner varianten helt.

Når er en variant bedre enn å bare endre i CSS-en?

• Kampanjer som slås av av seg selv. Legg Black Friday-stilen din i en variant med start- og sluttdato. Da slås den på og av av seg selv, og ingen trenger å huske å rydde opp mandag morgen.
• Sesonger og høytider. Lag egne varianter for jule-, påske- og salgsstylingen, og bruk dem på nytt år etter år i stedet for å lage dem på nytt hver gang.
• Eksperimenter uten risiko. Prøv en større endring i en variant. Hvis det ikke går som håpet, slår du bare varianten av igjen.
• Rask tilbakestilling. Ett klikk setter varianten offline, og nettbutikken går tilbake til hovedstylesheetet, som er helt uendret. Du trenger ikke først å finne ut hva du endret.
• Split-test. Sammenlign to design på ekte besøkende i stedet for å gjette hvilket som selger best.

Statusene i variantlisten

Statuskolonnen viser med et enkelt blikk hva som skjer med hver variant:

Handlingene helt til høyre

En klon får «(kopi)» lagt til i navnet, opprettes alltid offline og får en prioritet ett trinn under originalen. Dermed fortsetter originalen å vinne inntil du selv bestemmer noe annet, og klonen er et trygt sted å prøve ut noe nytt. Det gjør den samtidig til det opplagte utgangspunktet for en splittest.

Sletting kan ikke angres. Varianten fjernes samtidig fra de splittestene den inngikk i.

Slik velger systemet hvilken variant som vises

Ved hver sidevisning finner nettbutikken selv frem til hvilket stylesheet som skal brukes. Rekkefølgen er alltid den samme:

1. Først samles alle varianter som er aktive akkurat nå, altså de som enten er lagt ut eller befinner seg innenfor sitt datointervall.
2. Hvis det pågår en splittest som omfatter minst to av dem, fordeles de besøkende mellom variantene.
3. Ellers vinner varianten med høyest prioritet.
4. Hvis flere har samme prioritet, vinner den nyeste av dem.
5. Hvis ingen varianter er aktive, brukes hovedstylesheetet.

«Online»-feltet og datoene henger sammen

Det er kombinasjonen av «Online»-feltet og de to datofeltene som avgjør når en variant er live:

Prioritet

Prioritet brukes kun når flere varianter er aktive samtidig. Det høyeste tallet vinner. Standardverdien er 0, og du kan gjerne bruke negative tall. Hvis to varianter er aktive med samme prioritet, vinner den nyeste, altså den du opprettet sist.

Varianter gjelder kun nettbutikken

• Varianter endrer bare det kundene dine ser. Administrasjonspanelet påvirkes ikke.
• Feltet øverst på Stylesheet-siden viser alltid hovedstylesheetet, også mens en variant er aktiv. Du kan derfor ikke komme til å redigere en variant ved et uhell når du åpner siden.
• Hvis du skal style selve admin-panelet, finner du det under Konto → Firma → Admin-utseende. Denne CSS-filen finnes kun i én versjon, har ingen varianter og gjelder for alle brukere på kontoen.

Hvorfor trer endringen ikke alltid i kraft umiddelbart?

Nettbutikken din lagrer ferdige sider i en cache, slik at de lastes inn raskt. Hvis du slår en variant på eller av, kan det derfor ta opptil fire timer før alle besøkende ser den nye CSS-en på sidene som er lagret. Hvis det pågår en splittest, blir cachen automatisk slått av i den perioden, slik at hver besøkende alltid får den varianten vedkommende er plassert i.

Split-test to stilarkvarianter mot hverandre

Hvis du har to varianter, trenger du ikke å gjette på hvilken som fungerer best. Du kan la besøkende avgjøre det:

1. Opprett minst to varianter, og publiser dem begge.
2. Så snart to varianter er aktive samtidig, dukker snarveien Opprett en splittest av stilarkvariantene dine opp under variantlisten. Du kan også gå direkte til Design → Splittest.
3. Gi testen et navn, og opprett den.
4. Legg til variantene som skal være med, fordel trafikken mellom dem og start testen.

En stylesheet-test gjelder hele nettbutikken, ikke bare en enkelt side. Det gjør den til det riktige valget når du vil teste noe som går igjen overalt, som knappfarger, skriftstørrelser eller avstander rundt kjøpsknappen.

Hvis du merker av for «Bruk vinneren som ny standard når testen avsluttes», ordner Shoporama resten: vinneren aktiveres online og får høyere prioritet enn de andre, mens de tapende variantene deaktiveres. Du kan alltid endre dette manuelt i etterkant fra variantlisten.

Hele prosessen, statistikken og hvordan vinneren blir funnet, er beskrevet i «Slik oppretter og kjører du en splittest i Shoporama». Hvis du først vil forstå tanken bak, kan du lese mer om splittest som funksjon.

Tilpasninger av nettbutikken

Her er eksempler på typiske tilpasninger av nettbutikken:

Endre bakgrunnsfargen på toppteksten:

header {
    background-color: #1a1a2e;
}

Endre skrifttype:

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

Skjul et element:

.element-class {
    display: none;
}

Administratorinnstillinger

Du kan også tilpasse utseendet på admin-panelet med din egen CSS. Denne skrives imidlertid et annet sted enn nettbutikkens stilark, nemlig under Konto → Firma → Admin-utseende, og den gjelder for alle brukere på kontoen. Nedenfor finner du en fullstendig oversikt over CSS-klassene og ID-ene du kan bruke.

Ordreoversikten — CSS-klasser på ordrerader

Hver ordrerad i ordrelisten har en rekke dynamiske CSS-klasser som du kan bruke til å style ordrer basert på status, betaling og leveringsmåte.

Betalingsstatus

Eksempel — Rød bakgrunn på ubetalte bestillinger:

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

Ordrestatus

Ordrekøens status legges til direkte som klasse:

Eksempel — Grønn bakgrunn på sendte og betalte bestillinger:

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

Eksempel — Dempet visning av kansellerte bestillinger:

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

Leveringsmetode

Navnet på leveringsmetoden konverteres automatisk til en CSS-klasse. Alle bokstaver blir små, og spesialtegn erstattes med understreker. For eksempel blir «Hjemmeadresse med GLS» til klassen .hjemmeadresse_med_gls.

Eksempel — Marker bestillinger med farge etter leveringsmetode:

/* GLS-bestillinger med oransje bakgrunn */
.hjemmeadresse_med_gls {
    background-color: #fff3e0 !important;
}

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

Betalingsgateway

Hver ordrelinje får en klasse basert på betalingsgatewayens ID i formatet .payment-{ID}. Du finner ID-en ved å gå til Integrasjoner → Betalingsgatewayer og se på URL-en når du klikker på «Rediger».

Eksempel — Grønn bakgrunn for bestillinger betalt med en bestemt gateway:

/* Erstatt 12 med ID-en til din gateway */
.payment-12 {
    background-color: #c8e6c9 !important;
}

Andre klasser for ordrerekker

Eksempel — Fremhev EAN-bestillinger:

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

Ordredetaljer — klasser i den utvidede visningen

Når du utvider en ordre i listen, vises ordredetaljene med disse klassene:

Ordreinnhold

Lagerstatus

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

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

Knapper i bestillingslisten

Knappene i bestillingslisten har faste ID-er som du kan style:

Primære knapper

Fraktknapper

Eksempel — Fremhev utskriftsknappen:

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

Eksempel — Skjul fraktknapper du ikke bruker:

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

Nettbutikk-spesifikk styling

Hvis du administrerer flere nettbutikker fra samme firma, kan du tilpasse utseendet i administrasjonsgrensesnittet for hver enkelt nettbutikk. Body-elementet har klassen webshop{ID}, der ID er nettbutikkens ID-nummer.

Eksempel — Ulik farge på toppteksten for hver nettbutikk:

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

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

Layout og navigasjon

Eksempel — Endre fargen på menyen til venstre:

.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 bruksområder

Fargekoding av ordrelisten

En populær innstilling er å fargekode ordrelisten, slik at du raskt kan skille mellom betalte/ubetalte ordrer og ulike statuser:

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

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

/* Avbestilte ordrer med redusert gjennomsiktighet */
.cancelled {
    background-color: #f5f5f5 !important;
    opacity: 0.6;
}

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

Fremhev viktige handlingsknapper

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

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

Gi bestillingslisten mer plass

/* Mindre mellomrom på sidene = mer plass til kolonnene */
.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

Tydelig markering av varer som ikke er på lager

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

Slik finner du riktig CSS-selektor

For å finne den nøyaktige klassen eller ID-en til et element:

1. Høyreklikk på elementet i nettleseren din
2. Velg «Undersøk element » (Inspect)
3. Finn elementets klasse (f.eks. class="unpaid sent") eller ID
4. Bruk klassen eller ID-en som CSS-selektor i stilarket ditt

Større designendringer

«Eget stylesheet» egner seg godt til mindre tilpasninger. For større designendringer anbefales det å redigere selve temafilene via SFTP. Se artikkelen «Logg inn med SFTP» for å komme i gang.

CSS-sjekkliste

Her er en rask oversikt over de mest brukte CSS-egenskapene, slik at du kan komme i gang uten å måtte slå det opp.

Farger

Farger kan angis som navn, heksadesimalkoder eller RGB:

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

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

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

Nyttige fargekoder:

Skrifttype (font-family)

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

/* Google Fonts (legg til import øverst i stilarket ditt) */
@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;          /* Fet tekst (eller 400, 600, 700) */
font-style: italic;         /* Kursiv */
text-align: center;         /* Sentrert (left, right, center) */
text-decoration: underline; /* Understreking */
text-transform: uppercase;  /* Store bokstaver (lowercase, capitalize) */
line-height: 1.5;           /* Linjeavstand */
letter-spacing: 1px;        /* Bokstavavstand */

Bakgrunn

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

Rammer (border)

border: 1px solid #ccc;           /* Ramme rundt hele elementet */
border-bottom: 2px solid #333;    /* Kun ramme nederst */
border-left: 4px solid #28a745;   /* Grønn ramme på venstre side */
border-radius: 8px;               /* Avrundede hjørner */
border: none;                     /* Fjern ramme */

Avstander (margin og padding)

/* Padding = innvendig avstand */
padding: 10px;              /* Alle sider */
padding: 10px 20px;         /* Topp/bunn, venstre/høyre */
padding-left: 15px;         /* Kun venstre */

/* Margin = ytre avstand */
margin: 10px;               /* Alle sider */
margin-bottom: 20px;        /* Kun nederst */
margin: 0 auto;             /* Sentrer et element */

Vis/skjul

display: none;       /* Skjul helt (tar ikke plass) */
visibility: hidden;  /* Usynlig (tar fortsatt plass) */
opacity: 0.5;        /* Halvt gjennomsiktig (0 = usynlig, 1 = fullt) */

Størrelse

width: 100%;         /* Full bredde */
max-width: 800px;    /* Maksimal bredde */
height: 50px;        /* Fast høyde */
min-height: 200px;   /* Minimumshøyde */

Skygger

box-shadow: 0 2px 4px rgba(0,0,0,0.1);    /* Myk skygge */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Sterkere skygge */
box-shadow: none;                          /* Fjern skygge */

Ofte stilte spørsmål

Jeg har laget en variant, men nettbutikken ser akkurat ut som før. Hva har jeg glemt?

En ny variant opprettes alltid offline, slik at den ikke kan publiseres ved et uhell. Gå inn på Stylesheet-siden, finn varianten i listen og klikk på på/av-ikonet til høyre i raden. Hvis det står «Aktiv nå» i Status-kolonnen, er den publisert. Hvis du fremdeles ser det gamle designet på nettbutikken, må du vente litt og prøve igjen, for ferdige sider lagres i en cache i opptil fire timer.

Blir variantens CSS lagt oppå mitt vanlige stylesheet?

Nei. Så lenge varianten er aktiv, er det kun variantens CSS som brukes. Hovedstylesheetet er satt på pause, ikke slettet. Derfor finnes knappen «Lag variant av dette»: den kopierer hele ditt nåværende stylesheet over til den nye varianten. Hvis du i stedet starter med «Ny variant» og bare skriver én enkelt regel, forsvinner alle de andre reglene dine så lenge varianten er aktiv.

Kan jeg få julestilen min til å slå seg av av seg selv?

Ja, og det er en av de beste grunnene til å bruke varianter. Legg jule-CSS-en i en variant, sett «Vises fra og med» til den dagen den skal gå live, og «Vises til og med» til den siste dagen. Begge dagene teller med, og perioden slutter ved midnatt. Da slås kampanjen på og av av seg selv, selv om «Online»-feltet ikke er aktivert.

Jeg har rotet med en variant, og nå ser nettbutikken feil ut. Hva gjør jeg?

Klikk på på/av-ikonet ved siden av varianten i listen, slik at den blir offline. Nettbutikken går tilbake til hovedstylesheetet, som ikke har blitt endret, så du trenger ikke å finne ut hva som gikk galt i CSS-en først. Hvis varianten har datoer, må disse fjernes samtidig, ellers blir den publisert igjen innenfor sin periode.

Kan jeg lage varianter av fargekodingen i bestillingslisten?

Nei. Varianter gjelder kun det kundene ser i nettbutikken. CSS for selve administrasjonsgrensesnittet, altså fargekodingen av ordrer, knapper og menyer, ligger under Konto → Firma → Utseende på administrasjonsgrensesnittet, og den finnes kun i én versjon. Til gjengjeld gjelder den for alle brukere på kontoen, slik at hele teamet ser de samme fargene på de samme ordrene.

Jeg har flere nettbutikker. Gjelder én variant for alle?

Nei. Både hovedstylesheetet og variantene tilhører den enkelte nettbutikk, så de må opprettes i hver butikk for seg. Hvis flere butikker skal ha samme kampanjestil, kopierer du CSS-en manuelt. Til gjengjeld kan du fargekode nettbutikkene dine forskjellig i administrasjonspanelet, noe som er beskrevet i avsnittet om nettbutikk-spesifikk styling ovenfor.

Hva skjer hvis jeg lar CSS-feltet stå tomt i en aktiv variant?

Da kjører nettbutikken helt uten din egen CSS, og bare temaets eget design er igjen. Det høres ut som en feil, men det kan brukes bevisst: hvis du mistenker at en av dine egne regler forårsaker problemer, kan du sette en tom variant i drift et øyeblikk og se om problemet forsvinner. Det er også måten å gjennomføre en A/B-test på, der du sammenligner «med min CSS» mot «uten min CSS».

Hvor mange varianter kan være aktive samtidig?

Så mange du vil, men det vises bare én om gangen. Hvis flere er aktive, vinner den med høyest prioritet, og ved lik prioritet vinner den nyeste. Unntaket er en pågående splittest, der besøkende bevisst fordeles mellom to eller flere varianter.

Trenger du hjelp? Kontakt oss på support@shoporama.dk.