Menu

Shop aanpassen met eigen HTML/CSS

Natuurlijk! Je kunt eigen afbeeldingen, teksten, links en andere HTML-elementen toevoegen.

Om eigen HTML/CSS voor je shop te gebruiken, staan onder Shop instellingen > SpreadShop > Uitgebreid > HTML/CSS drie invoervelden ter beschikking (opmerking: Het menupunt ‘SpreadShop’ is alleen zichtbaar voor gebruikers die hun Spreadshirt account voor 30-9-2015 hebben aangemaakt.):

  • Shop-header
  • Shop voettekst
  • CSS Stylesheet

In de header-/voettekst-regel kun je een willekeurige HTML invullen. Om ervoor te zorgen dat je shop blijft functioneren, zullen wij de HTML controleren. Onder https://validator.w3.org/#validate_by_input kun je ook zelf controleren of je HTML functioneert. Let wel dat JavaScript om veiligheidsredenen niet kan worden gebruikt en we het zo nodig moeten verwijderen.

Hierna vind je een selectie aan definieerbare CSS-klassen die voor je shop kunnen worden gebruikt. Ze helpen je bij het inrichten van je shop. Vanzelfsprekend kun je daarnaast nog meer klassen aanpassen.

Wat wil je aanpassen? CSS-klasse
achtergrondbeeld of -kleur .customPageBackground
header .customHeader
voettekst met Juridische informatie en Algemene Voorwaarden .customFooter
teller in winkelwagentje en op verlanglijstje .customCounter
opmerkingen .customNotification
foutmeldingen .customNotification.sprd-error
titels, bv. in het winkelwagentje .customHeadline
selectie-elementen (grootte, kleur) .customSelector
gekozen optie in de selectie-elementen .customSelector .sprd-active.sprd-item
categorie-selectie (niet mobiel) .customFilterItem, .customSubfilterItem
hover-effect in der categorie-selectie (niet mobiel) .customSubfilterItem:hover
alleen smartphones en geen tablets of desktop PCs @media screen and (max-width: 767px) .customSelector.sprd-open
verschillende buttons .customButton
standaard buttons .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
belangrijke buttons zoals bv. ‘kopen’ .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
minder belangrijke buttons zoals ‘in het winkelwagentje’ (op het verlanglijstje) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
lightbox .customLightbox
zoekveld op mobiele apparaten, drop-down menu’s op desktop PCs .customFilter
geanimeerde afbeeldingen op het laadscherm .sprd-loadable.sprd-loading, .sprd-loader

Heeft dit artikel je geholpen?