Meny

Anpassa butiken med egen HTML/CSS

Naturligtvis kan du lägga till egna bilder, texter, länkar och andra HTML-element.

Om du vill använda egen HTML/CSS till din butik finns det tre inmatningsfält under Butiksinställningar > SpreadShop > Avancerat > HTML/CSS (observera: Menypunkten ”SpreadShop” syns endast för användare som skapade sitt Spreadshirtkonto före den 30/9 2015):

  • Butikens sidhuvud
  • Butikens sidfot
  • CSS-formatmall

I raden för sidhuvud/sidfot kan du ange valfri HTML. För att vara säker på att din butik förblir funktionsduglig kommer vi att kontrollera din HTML. På https://validator.w3.org/#validate_by_input kan du även själv kontrollera om din HTML fungerar. Observera att JavaScript av säkerhetsskäl inte kan användas och i förekommande fall måste vi ta bort det.

Nedan finns ett urval av definierbara CSS-klasser som kan vara användbara för din butik. De bör underlätta utformningen av din butik. Naturligtvis kan du dessutom även anpassa ytterligare klasser.

Vad vill du anpassa? CSS-klass
Bakgrundsbild eller -färg .customPageBackground
Sidhuvud .customHeader
Sidfot med utgivningsinformation och allmänna villkor .customFooter
Räknare i kundvagnen och önskelistan .customCounter
Upplysningar .customNotification
Felmeddelanden .customNotification.sprd-error
Rubriker, t.ex. i kundvagnen .customHeadline
Urvalselement (storlek, färg) .customSelector
Valt alternativ i urvalselementen .customSelector .sprd-active.sprd-item
Kategoriurval (inte mobil) .customFilterItem, .customSubfilterItem
Hovringseffekt i kategoriurvalet (inte mobil) .customSubfilterItem:hover
Endast smartphones och inga surfplattor eller datorer @media screen and (max-width: 767px) .customSelector.sprd-open
Olika knappar .customButton
Standardknappar .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Viktiga knappar, t.ex. ”Köp” .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Sekundära knappar som ”Lägg i kundvagnen” (på önskelistan) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Sökfält på mobila enheter, rullgardinsmenyer på datorer .customFilter
Animerade bilder på inläsningsskärmen .sprd-loadable.sprd-loading, .sprd-loader

Var denna artikel till hjälp?