Nettbutikk design

Endret Mon, 04 Apr 2022 ved 09:34 AM

Målet med dette dokumentet er å gi en kort innføring i hvordan man selv kan endre på design på sin nettbutikk.

Tilgang

For kunder som ønsker å endre på sitt eget design vil det kunne gis FTP tilgang til kundens egen template mappe. Ta kontakt med kundeservice hos oss for å få slik tilgang.

Denne mappen inneholder en fil som heter headeradd.tpl og en CSS-mappe som inneholder en kundespesifikk CSS-fil.

Hvis man f.eks har en butikk som heter MCButikken så vil strukturen være slik:

/headeradd.tpl

/css/MCButikken.css

Filene

Innholdet i headeradd.tpl blir lastet inn i <head> taggen til nettbutikken. Her er det mulig å legge inn referanser til egne JavaScript og CSS-filer.

headeradd.tpl inkluderer allerede den kundespesifikke CSS-filen.

I CSS filen kan man legge inn sine egne CSS regler for å få sitt eget uttrykk på nettbutikken.

Det er ikke mulig å endre på markup (HTML), bare CSS.

Endring på design

Det ligger allerede noen variabler klare i CSS-filen for å styre farger på forhåndsdefinerte elementer.

Den viktigste her er main-override-color. Denne setter hovedfargen for nettbutikken.

--main-override-color: #d11; vil for eksempel gi en rød temafarge på hele nettbutikken siden #d11 er en rød farge.

Dette vil påvirke fargene til header, footer, knapper og diverse andre elementer.

Det finnes flere variabler for å kunne styre dette på et litt lavere nivå. I CSS filen ligger de tilgjengelige variablene dokumentert. Les kommentarene over de ulike variablene i filen for å forstå hva de gjør.

I tillegg til å styre basis farger med de forhåndsdefinerte variablene er det også mulig å legge sine egne CSS-regler.

Vi har i stor grad prøvd å lage CSS-reglene våre så generelle som mulig, slik at det skal være lett å overstyre.

Her må en designer se på de eksisterende reglene i nettbutikken og overstyre det som det er behov for.

Oppbyggingen av nettbutikken

Alle sider i nettbutikken består av header, pageContent og footer.

Header og footer er det samme på alle sider, mens pageContent endrer seg.

De fleste sider har en h1 eller h2 overskrift.

Alle knapper er en a tag, med klassen "button".

Alle inputs er en label med klasse "qField". Dette inkluderer tekst input, select bokser, checkboxer osv.

Dette er generelle ting som er brukt over hele løsningen.

Hvis man for eksempel vil ha runde hjørner på knappene istedenfor firkantet kan man legge inn følgende regel:

a.button {

border-radius: 5em;

}

Dette vil da påvirke alle knapper i løsningen.

Det finnes tilsvarende muligheter for de fleste andre elementer som er gjenbrukt i nettbutikken som f.eks qFields.

Ellers har hver side (f.eks handlekurv eller checkout) regler som styrer visningen der. Disse er gjerne mer spesifikke og sikter seg direkte inn på denne siden, i motsetning til å være en generell klasse som blir gjenbrukt rundt i løsningen.

Dette gjelder også ting som header, footer og meny.

NB! Quick3 og Quick3 nettbutikk er under kontinuerlig videreutvikling. Dette gjør at både markup og css kan bli endret. Det anbefales derfor at det skrives så generelle regler som mulig når man gjør endringer for å redusere potensielle problemer med bakover kompatibilitet.

Hvis du ønsker å gjøre større endringer anbefales det at du tar kontakt for å diskutere måter å løse det på som ivaretar integriteten i løsningen. Gode forbedringsforslag vurderer vi som regel å bygge inn i fremtidige versjoner av standardløsningen.