Falls Sie einen Webshop in Ihrem HTML Skript eingebettet haben und das Aussehen dieses Shops ändern wollen, empfehlen wir Ihnen ein CSS Stylesheet auf Ihrem Webspace hinzuzufügen. Damit können Sie die Schriftart, Farben und mehr ändern.
Sie können die CSS Datei auf der Shopfront Seite in Ihrem Webshop Adminbereich herunterladen. Falls Sie schon eine CSS Datei haben, können Sie die Styles, die unten aufgelistet sind, nutzen und diese zu Ihrer bereits bestehenden Datei hinzufügen.
Wo soll ich die CSS Datei abspeichern?
Wir empfehlen Ihnen die CSS Datei im selben Ordner abzuspeichern, wo auch Ihre HTML Datei für den Shop liegt. In der HTML müssen Sie einen Link zu der CSS Datei anlegen.
Der Link zu Ihrer CSS Datei sollte so aussehen:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Ersetzen Sie shopfront-embed-style.css mit dem Namen Ihrer CSS Datei, falls Sie diese umbenannt haben. Sie sollten den Link direkt nach dem head-tag platzieren, aber vor dem schließenden /head-tag.
Style Parameter
Sie können folgende Parameter ändern:
- Schriftfamilie
- Schriftfarbe
- Füllfarbe
- Dropdown Menü
- Ränder
- Fokus Farbe
- Promotion-Label
- Webshop in mobiler Ansicht
Schriftfamilie
Mit der Schriftfamilie können Sie die Hauptschriftart ändern, die in Ihrem Webshop genutzt wird. Die erste Schriftart ist auch die, die angezeigt werden wird. Die anderen zwei sind Backup-Schriftarten, falls die erste Schriftart nicht gefunden wird.
Beispiel:
font-family: "Times New Roman",Times,serif;
Schriftfarbe
Standardmäßig ist die Schriftfarbe dieselbe Farbe für Texte, Links, Maus-Hover und mehr. Falls Sie die Farben ändern wollen, ändern Sie einfach den HEX Code.
Falls Sie verschiedene Farben nutzen wollen, wenn Sie z.Bsp. mit der Maus über einen Link fahren, trennen Sie die Parameter von der Liste und geben jedem einen eigenen HEX Farbcode.
Beispiel:
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Füllfarbe
Füllfarben werden für die Hintergründe der Symbole in Ihrem Shop verwendet. Ändern Sie die Farben, indem Sie die Einstellungen unten nutzen.
SVG Symbolfarbe
Die Füllfarbe wird für SVG Symbole in Ihrem Webshop verwendet, z.Bsp. das Einkaufswagen-Symbol. Sie können die Farbe ändern, indem Sie den HEX Code ändern.
Beispiel:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Hintergrundfarbe (Webshop)
Diese Einstellung legt eine Hintergrundfarbe für Ihren gesamten Webshop fest. Sie können die Farbe ändern, indem Sie den HEX Code ändern.
Beispiel:
.onecom-webshop-main {
background-color: #fdfdfd
}
Dropdown Menü
Ihre Auswahlleiste für die Kategorien und auch die Sortierung Ihrer Produkte sind Dropdown Menüs. Sie können die Farbe für das Dropdown Menü anpassen.
Hintergrundfarbe (Dropdown)
Hier wird die Farbe für den Hintergrund bestimmt. Ändern Sie einfach den HEX Code in Ihrem Code entsprechend.
Beispiel:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Randfarbe (Dropdown)
Die gewählte Farbe bestimmt hierbei, welche Farbe der Rand Ihres Dropdown Menüs hat. Ändern Sie die HEX und RGBA Codes im Code auf die gewünschten Farben.
Beispiel:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Textfarbe (Dropdown)
Diese Einstellung bestimmt die Farbe Ihres Textes, der im Dropdown Menü verwendet wird. Sie können die Farbe ändern, indem Sie den HEX Farbcode ändern.
Beispiel:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Ausgewählter Wert (Dropdown)
Diese Einstellung bestimmt die Farbe des Textes des auswählten Elements im Dropdown Menü. Sie können die Farbe ändern, indem Sie den HEX color code ändern.
Beispiel:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Maus-Hover-Farbe (Dropdown)
Die zwei folgenden Einstellungen bestimmen die Schriftfarbe beim Maus-Hover als auch die Hintergrundfarbe. Ändern Sie die HEX und RGBA Codes im Code auf die gewünschten Farben.
Beispiel:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Ränder
Randfarbe für den Zurück-Button
Diese Einstellung bestimmt die Randfarbe für Ihren Zurück-Button, den "Zurück zum Shop" Button und beim Zahlvorgang. Ändern Sie den HEX Code für die gewünschte Farbe.
Beispiel:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Rand, der um die Bestelldetails genutzt wird
Während des Zahlvorgangs sehen Sie eine Box mit eine Übersicht über die Artikel, die Sie gekauft haben. Mit dieser Einstellung können Sie die Farbe des Randes um diese Box ändern.
Beispiel:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Überschrift-Rand
Mit dieser Einstellung können Sie die Farbe des Unterstriches unter Überschriften ändern, z.Bsp. auf der Bezahlseite. Ändern Sie einfach die HEX Farbe auf die von Ihnen gewünschte Farbe.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Unterer Rand
Mit dieser Einstellung wird eine Linie unter den Elementen auf der Bezahlseite gesetzt. Ändern Sie einfach die gewünschte HEX Farbe.
Beispiel:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Fokus Farbe
Die Fokus Farbe wird für Preise, das Einkaufswagen-Symbol und mobile Slider verwendet. Ändern Sie einfach die HEX Farbe auf die von Ihnen gewünschte Farbe.
Beispiel:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Fokus Farbe bei Maus-Hover
Dies sind die selben Einstellungen wie oben, nur für Maus-Hovers. Ändern Sie die RGBA Farben auf die gewünschten Farben.
Beispiel:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Promotion-Label
Mit dieser Einstellung legen Sie die Farbe des Textes und Hintergrundes des Promotion-Labels fest. Sie können ein Promotion-Label für ein Produkt hinzufügen, um es noch mehr herauszuheben. Lesen Sie auch unsere Anleitung, wie Sie Produkte in Ihrem Webshop promoten können.
Beispiel:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Webshop in mobiler Ansicht
Falls Sie das Aussehen Ihres Webshops in der mobilen Ansicht verändern wollen, können Sie Ihren eigenen "viewport" Meta-Tag zum Head-Abschnitt der HTML Datei mit Ihrem Webschop hinzufügen.
Falls wir keinen solchen Meta-Tag erkennen, werden wir automatisch folgenden Meta-Tag für das perfekte mobile Aussehen hinzufügen:
meta name="viewport" content="width=320, initial-scale=1"
Verwandte Artikel:
