Menü

Shop anpassen mit eigenem HTML/CSS

Du kannst eigene Bilder, Texte, Links und sonstige HTML-Elemente hinzufügen.

Um eigenes HTML/CSS für Deinen Shop zu nutzen, stehen Dir unter Shop Einstellungen > SpreadShop > Erweitert > HTML/CSS drei Eingabefelder zur Verfügung:

  • Shop Header
  • Shop Footer
  • CSS Stylesheet

In die Header-/Footer-Zeile kannst Du beliebig HTML eingeben. Um sicher zu gehen, dass Dein Shop funktionstüchtig bleibt, werden wir das HTML überprüfen. Unter https://validator.w3.org/#validate_by_input kannst Du auch selbst nachprüfen, ob Dein HTML funktioniert. Bitte beachte, dass JavaScript aus Sicherheitsgründen nicht verwendet werden kann und wir es ggf. entfernen müssen.

Nachstehend findest Du eine Auswahl definierbarer CSS-Klassen, die für Deinen Shop nützlich sein könnten. Sie sollen Dir die Gestaltung Deines Shops erleichtern. Selbstverständlich kannst Du darüber hinaus auch weitere Klassen anpassen.

Was möchtest Du anpassen? CSS-Klasse
Hintergrundbild oder –farbe .customPageBackground
Kopfzeile .customHeader
Fußzeile mit Impressum und AGB .customFooter
Zähler im Warenkorb und in der Merkliste .customCounter
Hinweise .customNotification
Fehlermeldungen .customNotification.sprd-error
Überschriften, z.B. im Warenkorb .customHeadline
Auswahlelemente (Größe, Farbe) .customSelector
Gewählte Option in den Auswahlelementen .customSelector .sprd-active.sprd-item
Kategorie-Auswahl (nicht-mobil) .customFilterItem, .customSubfilterItem
Hover-Effekt in der Kategorie-Auswahl (nicht-mobil) .customSubfilterItem:hover
Nur Smartphones und keine Tablets oder Desktop-PCs @media screen and (max-width: 767px) .customSelector.sprd-open
Verschiedene Buttons .customButton
Standard-Buttons .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Wichtige Buttons wie z.B. „Kaufen” .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Zweitrangige Buttons wie „In den Warenkorb” (auf der Merkliste) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Suchfeld auf mobilen Geräten, Dropdown-Menüs auf Desktop-PCs .customFilter
Animierte Bilder auf dem Ladebildschirm .sprd-loadable.sprd-loading, .sprd-loader

War dieser Artikel hilfreich?