Meny

Tilpasse butikken med din egen HTML/CSS

Du kan legge til egne bilder, tekster, lenker og andre HTML-elementer.

For å bruke din egen HTML/CSS-kode i butikken, kan du gå til Butikkinnstillinger > Spreadshop > Utvidet > HTML/CSS (obs: Menypunktet «SpreadShop» er bare synlig for brukere som opprettet Spreadshirt-kontoen sin før 30.9.2015). Der har du tre felter til disposisjon:

  • Shop Header
  • Shop Footer
  • CSS Stylesheet

I Header-/Footer-linjen kan du legge inn HTML-kode akkurat som du vil. For å sikre at butikken fortsatt fungerer, vil vi sjekke HTML-koden. På https://validator.w3.org/#validate_by_input kan du også sjekke selv om HTML-koden fungerer. Vær oppmerksom på at du av sikkerhetsgrunner ikke kan bruke JavaScript, og at vi eventuelt vil fjerne dette.

Nedenfor finner du et utvalg av definerbare CSS-klasser som kan være nyttige for butikken din. De kan gjøre det enklere å utforme butikken din. Selvsagt kan du også tilpasse andre klasser.

Hva vil du tilpasse? CSS-klasse
Bakgrunnsbilde eller -farge .customPageBackground
Tittellinje .customHeader
Bunnlinje med firmainformasjon og forretningsvilkår .customFooter
Teller i handlevognen og i ønskelisten .customCounter
Merknader .customNotification
Feilmeldinger .customNotification.sprd-error
Overskrifter, f.eks. i handlevognen .customHeadline
Valgelementer (størrelse, farge) .customSelector
Valgt alternativ i valgelementene .customSelector .sprd-active.sprd-item
Kategoriutvalg (ikke-mobil) .customFilterItem, .customSubfilterItem
Hover-effekt i kategoriutvalget (ikke-mobil) .customSubfilterItem:hover
Bare smarttelefoner, ingen nettbrett eller desktop-PC-er @media screen and (max-width: 767px) .customSelector.sprd-open
Forskjellige knapper .customButton
Standard-knapper .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Viktige knapper som f.eks. «Kjøp» .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Mindre viktige knapper som f.eks. «I handlevognen» (på ønskelisten) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Søkefelt på mobile enheter, rullegardinmenyer på PC-er .customFilter
Animerte bilder på innlastingsskjermen .sprd-loadable.sprd-loading, .sprd-loader

Var denne artikkelen nyttig?