Anpassen bestimmter Seiten mit CSS

Sie können die Gestaltung einzelner Seiten in Ihrem Ecwid-Shop ändern, sei es eine bestimmte Produktdetailseite, eine Kassenschritt-Seite oder eine Kundenkonto-Seite. Mithilfe von CSS-Klassen, können CSS-Regeln erstellt werden, die nur für bestimmte Seiten in Ihrem Ecwid-Schaufenster gelten.

Basierend auf Seite

Produktdetailseite

Eine typische Produktdetailseite hat einen Produktnamen, ein Bild und ein rechtes Feld mit Produktpreis, Artikelnummer, In den Warenkorb-Schaltfläche usw.:

Design auf alle Produktdetailseiten anwenden

Wenn Sie Stile auf alle Produktdetails Ihres Ecwid-Shops anwenden möchten, dann müssen Sie die folgende Klasse in Ihrem CSS verwenden:

.ec-store__product-page

Design auf ausgewählte Produktdetailseiten anwenden

Wenn Sie die Preise auf der jeweiligen Produktdetails ausblenden möchten, müssen Sie den folgenden Code in Ihrem CSS-Theme verwenden:

.ec-store__product-page--123456 .product-details__product-price {
    display: none;
}

Wobei „123456” die eindeutige interne Produkt-ID für das Produkt ist. Wie erhalten Sie die Produkt-ID? (auf Englisch)

Wenn Sie Stile auf mehrere ausgewählte Produktdetailseiten anwenden möchten, können Sie den folgenden Code verwenden:

.ec-store__product-page--123456 .product-details__product-price,
.ec-store__product-page--121221 .product-details__product-price,
.ec-store__product-page--123234 .product-details__product-price {
display: none;
}

Wobei „123456”, „121221”, „123234” die eindeutigen internen Produkt-IDs für das Produkt sind. Dadurch werden Artikelnummern auf drei Produktdetailseiten ausgeblendet.

Design auf alle Produktdetailseiten einer Kategorie anwenden

Um die Produktdetailseiten einer bestimmten Kategorie massenweise anzuwenden, können Sie diese CSS-Klasse verwenden:

.ec-store__product-page--c12345

wo Sie die erforderliche Kategorie-ID (auf Englisch) anstelle von 12345 eingeben.

Sie möchten beispielsweise vorübergehend die Schaltflächen „In den Warenkorb” auf den Produktdetailseiten von Produkten ausblenden, die der Kategorie mit der ID 12345 zugeordnet sind. Hier ist ein Beispiel für CSS-Code, den Sie benutzen können:

.ec-store__product-page--c12345 .details-product-purchase__controls {
display: none;
}

Kategorieseite

Eine typische Kategorieseite zeigt alle Produkte dieser Kategorie in der Raster-Ansicht an:

Die CSS-Änderungen für Kategorieseiten funktionieren ähnlich wie die Produktdetailseiten.

Design auf alle Kategorieseiten anwenden

Wenn Sie Stile auf alle Kategoriedetails Ihres Ecwid-Shops anwenden möchten, dann müssen Sie die folgende Klasse in Ihrem CSS verwenden:

.ec-store__category-page

Wenn Sie beispielsweise die Farbe Ihres Preises auf den Kategorieseiten in dunkelblau ändern wollen, dann müssen Sie diesen Code in Ihrem CSS-Thema verwenden:

 .ec-store__category-page .grid-product .grid-product__price-amount {
color: darkblue;
}

Design auf ausgewählte Kategorieseiten anwenden

Wenn Sie die Farbe Ihres Preises auf einer bestimmten Kategorieseite ändern möchten, müssen Sie den folgenden Code in Ihrem CSS-Thema verwenden:

.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: darkblue;
}

Wobei „4002” die eindeutige interne Kategorie-ID für die Kategorie ist. Wie erhalten Sie die Kategorie-ID?(auf Englisch)  Wenn Sie Stile auf mehrere Kategorieseiten anwenden möchten, aber nicht auf alle, können Sie den folgenden Code verwenden:

.ec-store__category-page--4002 .grid-product .grid-product__price-amount,
.ec-store__category-page--4006 .grid-product .grid-product__price-amount,
.ec-store__category-page--4008 .grid-product .grid-product__price-amount {
color: darkblue;
}

Wobei „4002”, „4006”, „4008” die eindeutigen internen IDs für die Kategorie sind. Als Ergebnis können Sie die Preisfarbe auf drei Kategorieseiten in dunkelblau ändern.

Andere Seiten

Sie können auch auf andere Seiten ein individuelles Design anwenden:

• Seiten „Warenkorb & Kasse”
• Seite „Kontoeinstellungen”

Seiten „Warenkorb & Kasse”

Um das Design auf Warenkorb- und Kassenseite anzuwenden, verwenden Sie die folgenden CSS-Klassen:

.ec-size .ec-store .ec-cart

Seite „Vielen Dank für Ihre Bestellung“

Um das Design nur auf die „Vielen Dank”-Seite anzuwenden, verwenden Sie die folgenden CSS-Klassen:

.ec-size .ec-store .ec-confirmation

Kundenprofil-Seiten

Um das Design auf die Profilseiten des Kunden anzuwenden (verfügbar für Ihre Kunden, nachdem sie sich bei Ihrem Shop angemeldet haben), verwenden Sie die folgenden CSS-Klassen:

Seite „Kontoeinstellungen”:

.ecwid-productBrowser-AccountSettingsPage 

Seite „Bestellungen“

.ecwid-productBrowser-OrdersPage 

Basierend auf Kunde

In einigen Fällen möchten Sie Preise oder Artikelnummern für Kunden ausblenden, die noch kein Konto in Ihrem Shop erstellt haben oder markieren Sie einige Ihrer Artikel für Kunden, die zu einer bestimmten Kundengruppe gehören. Glücklicherweise ist dies mit CSS durchaus möglich. Lassen Sie uns Ihnen zeigen, wie das funktioniert:

Nicht angemeldet oder hat kein Konto

Wenn ein Kunde Ihren Shop zum ersten Mal besucht, besitzt dieser kein Konto in Ihrem Shop und sucht nach einem Produkt, das er benötigt. Möglicherweise möchten Sie für diese Art von Kunden ein individuelles Design anwenden. Dafür müssen Sie die folgende Klasse in Ihrem CSS-Thema verwenden:

body.ecwid-customer-loggedOut

Wenn Sie zum Beispiel Ihren Ecwid-Shop in einen Online-Katalog für Kunden verwandeln möchten, die Ihren Shop zum ersten Mal besuchen oder sich noch nicht bei ihrem Konto angemeldet haben, können Sie ganz einfach den folgenden Code in Ihr CSS-Thema einfügen:

/* Hide prices and add to bag buttons for logged out customers */
body.ecwid-customer-loggedOut .grid-product__price,
body.ecwid-customer-loggedOut .grid-product__button,
body.ecwid-customer-loggedOut .product-details__product-price,
body.ecwid-customer-loggedOut .details-product-purchase__controls {
	display: none;
}

Angemeldet

Vielleicht möchten Sie ein individuelles Design für Kunden anwenden, die sich bei ihrem Konto in Ihrem Shop angemeldet haben und in Ihrem Online-Katalog blättern. Dafür müssen Sie die folgende Klasse in Ihrem CSS-Thema verwenden:

body.ecwid-customer-loggedIn

Angenommen, Sie möchten die Preise für diese Art von Kunden in grüner Farbe anzeigen. In diesem Fall müssen Sie diesen Code auf Ihr CSS-Thema anwenden:

body.ecwid-customer-loggedIn div.grid-product__price .grid-product__price-amount {
 color: green;
}

Sie können auch den Zugriff auf Ihr Schaufenster sperren, es sei denn, ein Besucher meldet sich bei Ihrem Konto an. Mehr erfahren

Gehört zu Kundengruppe

Wenn sich ein Kunde in Ihrem Ecwid-Shop registriert, wird er der Standard-Kundengruppe „Allgemein” mit der ID '0' zugewiesen. Wenn Sie kundenspezifisches Design auf alle Kunden anwenden möchten, die dieser Kundengruppe zugeordnet sind, müssen Sie die folgende Klasse verwenden:

body.ecwid-customer-group-0

Wenn Sie jedoch mehrere Kundengruppen in Ihrem Shop haben und eine große Kundenbasis mit Rabatten, die einer bestimmten Kundengruppe zugewiesen sind, möchten Sie vielleicht die Vorteile ihrer Mitgliedschaft in Ihrem Shop anhand eines benutzerdefinierten Designs für diese Art von Kunden mit folgendem Code hervorheben:

body.ecwid-customer-group-12345

Wobei „12345” die eindeutige Kundengruppen-ID ist. Sie erhalten diesen, indem Sie sich bei dem Konto anmelden, das zu dieser Kundengruppe gehört, und jede Seite im Tool „Element untersuchen” in Ihrem Browser anzeigen. Um die Preisfarbe auf Kategorieseiten für alle Kunden einer bestimmten Kundengruppe auf grün zu ändern, verwenden Sie den folgenden Code:

body.ecwid-customer-group-12345 div.grid-product__price .grid-product__price-amount {
color: green;
}

Wir haben Ihnen gerade einen kleinen Einblick gegeben, was Sie mit benutzerdefinierten CSS-Themen und verschiedenen Seiten- und Kundentypen erreichen können, also probieren Sie es jetzt selbst aus!

Schauen Sie sich unsere Anleitung an, wie Sie das Ecwid-Design ändern können.