CSS ist eine Gestaltungssprache, die vor allem für Websites genutzt wird. Sie können in Ihrem Shop eigenen CSS-Code nutzen und damit das Design Ihres Shops modifizieren.
Die Änderungen am CSS-Code sind für Ihren gesamten Shop gültig und nicht nur für die Seite, die Sie bei der Bearbeitung des Codes im Editor geöffnet haben. Die einzige Ausnahme sind die Seiten des Bestellprozesses. Auf diese hat der CSS-Code keine Auswirkungen.
Änderungen am CSS-Code können negative Auswirkungen auf das Design und die Funktionalität Ihres Shops haben und auch das Responsive Design Ihres Shops beeinträchtigen.
Eigener CSS-Code sollte nur von erfahrenen Nutzern eingeben werden. Überprüfen Sie Ihren Shop nach allen Änderungen sorgfältig. Bitte beachten Sie auch, dass die automatisch eingespielten Updates Auswirkungen auf den Programmcode Ihres Shops haben. Prüfen Sie deshalb regelmäßig, ob der von Ihnen eingegebene CSS-Code noch seinen Zweck erfüllt und ob er Design oder Funktionalität nach dem Update beeinträchtigt.
So fügen Sie eigenen CSS-Code ein
- Wählen Sie im Administrationsbereich im Hauptmenü Editor.
- Wählen Sie in Ihrem Shop auf der rechten Seite das Pinsel-Symbol unten.
- Wählen Sie </>.
- Fügen Sie Ihren eigenen CSS-Code ein.
- Wählen Sie Speichern.
- Wählen Sie Ihren Shop anzeigen und überprüfen Sie, ob die Änderungen korrekt angezeigt werden oder ob es Probleme mit der Darstellung Ihres Shops gibt.
Die Einstellungen für den eigenen CSS-Code werden nur auf den momentan ausgewählten Stil angewandt. Wenn Sie den Stil oder die Design-Vorlage wechseln, werden zuvor gemachte Einstellungen nicht mehr berücksichtigt. Wenn Sie zum vorherigen Stil zurückwechseln, treten die Einstellungen wieder in Kraft.
Ihre Shopsoftware prüft automatisch, ob der von Ihnen eingegebene CSS-Code valide ist.
Sie müssen bei Ihrem eigenen CSS-Code keinen Stylesheet type eingeben.
Code-Schnipsel
Im Folgenden finden Sie Code-Schnipsel, mit denen Sie das Design einzelner Elemente Ihres Shops anpassen können.
Zusätzliche Schriftarten nutzen
Im Editor Ihres Shops haben Sie die Wahl aus einer Vielzahl von Schriften.
Über CSS stehen Ihnen zusätzlich Hunderte weitere Schriften von Google Fonts zur Verfügung.
- Wenn Sie zusätzliche Schriften nutzen möchten, besuchen Sie zunächst Google Fonts.
- Finden Sie dort die passende Schrift und klicken Sie sie an.
- Jetzt haben Sie die Auswahl aus verschiedenen Styles dieser Schrift. Wählen Sie beim gewünschten Style + Select this style.
- Wählen Sie bei Use on the Web die Option @import.
- Im Feld darunter wird Ihnen ein CSS-Code angezeigt. Kopieren Sie ihn ohne die Befehle <style> und </style>.
Das Ergebnis sieht dann beispielsweise so aus:
@import url('https://fonts.googleapis.com/css2?family=Schrift:ital,wght@1,600&family=Ranchers&family=Texturina:wght@900&display=swap');
- Fügen Sie nun diesen Codeschnipsel wie oben beschrieben im Editor Ihres Shops als benutzerdefiniertes CSS ein.
- Jetzt können Sie definieren, für welche Elemente Ihres Shops die Schrift genutzt werden soll.
Geben Sie dazu zusätzlich folgenden CSS-Code ein und ersetzen Sie „Schriftname“ durch den Namen der gewünschten Schrift.
Allgemeine Schrift (Menü, Footer, Texte)
html, body, .body
{
font-family: 'Schriftname';
}
H1-Überschriften
.body h1
{
font-family: 'Schriftname';
}
H2-Überschriften
.body h2
{
font-family: 'Schriftname';
}
H3-Überschriften
.body h3
{
font-family: 'Schriftname';
}
Fließtext
p
{
font-family: 'Schriftname';
}
Schriftgrößen ändern
Mit folgendem Code können Sie die Schriftgrößen Ihres Shops ändern. Geben Sie dafür anstelle von „30px“ die gewünschte Schriftgröße ein.
H1-Überschriften
.body h1
{
font-size: 30px;
}
H2-Überschriften
.body h2
{
font-size: 30px;
}
H3-Überschriften
.body h3
{
font-size: 30px;
}
Fließtext
.body p
{
font-size: 30px;
}
Die USP-Leiste anpassen
Sie können das Design der USP-Leiste Ihres Shops anpassen. Damit die Leiste sichtbar ist, müssen Sie mindestens einen USP angegeben haben. Weitere Informationen zum Thema USPs finden Sie im Artikel Alleinstellungsmerkmale (USPs) im Header Ihres Shops.
Schriftfarbe für die USP-Leiste ändern
.body .header-usp-list-item-wrapper
{
color: white;
}
Geben Sie anstelle von „white“ die gewünschte Farbe bzw. ihren Hexcode ein.
Farbe der Icons in der USP-Leiste ändern
.body .header-usp-list-item-wrapper [class*=" usp-"], .body .header-usp-list-item-wrapper [class^=usp-]
{
color: white;
}
Geben Sie anstelle von „white“ die gewünschte Farbe bzw. ihren Hexcode ein.
Hintergrundfarbe der USP-Leiste ändern
.body section.section.section-usp, .body .header-usp, .body .header-usp-list
{
background-color: white;
}
Geben Sie anstelle von „white“ die gewünschte Farbe bzw. ihren Hexcode ein.
CSS-Einstellungen von Inhaltselementen ändern
- Öffnen Sie Ihren Shop im Browser Chrome.
- Klicken Sie mit der rechten Maustaste auf das entsprechende Inhaltselement und dann auf Untersuchen.
- Bewegen Sie die Maus über das Element und die ID des Elements wird Ihnen so angezeigt:
- Nutzen Sie die ID, um eigenen CSS-Code dafür zu bestimmen.
Ein Beispiel für die ID „block-961b71c8-2d80-4fc5-8e97-5b3f849f9efb“:
#block-961b71c8-2d80-4fc5-8e97-5b3f849f9efb {
border-bottom: 1px solid black;
}
Media Queries
Sie können die Darstellung einer Seite für verschiedene Ausgabemedien festlegen.
Desktop view
/* Desktop view */
@media (min-width: 991px){
/*Ihr CSS-Code*/
}
Tablet view
/* Tablet portrait view */
@media (max-width: 768px){
/* Ihr CSS-Code */
}
Mobile view
/* Smartphone view */
@media (max-width: 428px){
/* Ihr CSS-Code */
}