Ecwid CSS-Codebuch
Sie können das Aussehen Ihres Ecwid-Shops mithilfe von Cascading Style Sheets (CSS) ganz einfach anpassen. Dieses Codebuch enthält eine Sammlung von CSS-Rezepten, die Ihnen helfen, Ihren Ecwid-Shop nach Belieben zu gestalten. Das Codebuch führt nicht alle Möglichkeiten auf. Wenn Sie die HTML-Vorlagen und das CSS-Stylesheet ändern, sind Ihre Möglichkeiten im Prinzip grenzenlos.
Wenn Sie CSS noch nicht kennen, sollten Sie sich für eine Einarbeitung die folgenden Tutorials ansehen:
- Die Einführung in CSS (auf Englisch) ist ein Video-Tutorial des Ecwid-Teams.
- Das CSS-Einsteiger-Tutorial erklärt Ihnen die wichtigsten Grundlagen, um loszulegen.
- Die CSS-Beispiele führen Sie durch die grundlegenden Funktionen der Sprache mit praktischen Beispielen, die Sie ausprobieren können.
Verzeichnis von CSS-Codes
Dieses Codebuch ist in Abschnitte unterteilt, die sich mit den Elementen des Ecwid-Schaufensters befassen. Jeder Abschnitt enthält CSS-Codes, die Sie direkt in Ihren Shop einfügen können. Verwenden Sie den Code unverändert oder nehmen Sie die gewünschten Anpassungen vor.
Erfahren Sie, wie Sie CSS-Codes zu Ihrem Ecwid-Shop hinzufügen →
Buttons
- Ändern der Farbe aller großen Buttons auf einmal
- Ändern der Farbe des Buttons „In den Warenkorb“
- Ändern der Farbe des Buttons „Jetzt kaufen“
- Ändern der Farbe des Buttons „Kasse“
- Ändern der Farbe des Buttons „Weiter“
- Ändern der Farbe des Buttons „Bestellung aufgeben“
- Ändern der Farbe aller kleineren Buttons
- Ändern der Farbe des Buttons „Mehr hinzufügen“
- Ändern der Farbe des Buttons „Zur Kasse“
- Ändern der Farbe des Buttons „Weiter einkaufen“ auf der Warenkorbseite
- Platzieren der Buttons „Jetzt kaufen“ auf derselben Ebene
- Ausblenden des Buttons „In den Warenkorb“ auf allen Produktseiten
Schriftarten
Produktraster (Shop-Startseite)
- Ändern von Farbe und Größe des Preistexts im Produktraster
- Deaktivieren des Zoom-Effekts für Produkt-Vorschaubilder
- Platzieren der Symbole „Bestellungen verfolgen“, „Favoriten“, „Warenkorb“ und „Mein Konto“ oben auf einer Schaufensterseite
- Ausblenden von Produktbildern
Kategorieseite
- Zentrieren der Produkte in Kategorien
- Ändern der Preisfarbe auf einer bestimmten Kategorieseite
- Deaktivieren des Zoom-Effekts für Kategorie-Vorschaubilder
- Anzeigen einer gleichen Anzahl von Kategorien pro Zeile
- Deaktivieren des Mouseover-Effekts für Kategorietitel
- Ausblenden von Vorschaubildern und Titeln für Kategorien
- Ausblenden von Kategoriebildern
- Ausblenden von Kategoriekarten auf der Shop-Startseite
Produktdetails
- Ändern der Schriftfarbe und -größe
- Ändern der Farbe des Tags „Im Angebot“
- Anzeigen der Galeriebilder in voller Größe auf Mobilgeräten
- Entfernen des Namens unter dem Detailbild in einer Galerie
- Öffnen des Abschnitts „Mehr anzeigen“ auf Produktseiten
- Anzeigen von „ähnlichen Produkten“ oben auf einer Seite
- Ausblenden des Preises für bestimmte Produkte
- Ausblenden von Preisen bei nicht angemeldeten Kunden
Warenkorb
- Ändern des Stils des Buttons „Produkt entfernen“
- Entfernen des Mengenfelds
- Erweitern des Felds für den Rabattcoupon
- Anzeigen des leeren Warenkorbs auf der Instant Site (Originalversion)
Suchfeld
- Anpassen des Suchwidget-Designs
- Anpassen des Stils des Suchbuttons
- Verschieben des Suchfelds
- Anpassen des Suchfelds auf der Instant Site (Originalversion)
Kasse
- Entfernen der Lieferzeit von den Namen der Versandarten
- Ändern der Kreditkartenlogos in den Zahlungsoptionen an der Kasse
- Anzeigen der Kreditkartenlogos in der Shop-Fußzeile
Buttons
In Ihrem Shop gibt es viele große und kleine Buttons wie „In den Warenkorb“ oder „Weiter“. Sie können sie alle auf einmal oder einzeln bearbeiten.
Ändern der Farbe aller großen Buttons auf einmal
Die großen Buttons in Ihrem Shop sind In den Warenkorb und Weiter einkaufen auf der Produktseite sowie Weiter, Kasse und Bestellung aufgeben. Verwenden Sie den folgenden CSS-Code, um alle größeren Buttons auf einmal zu aktualisieren. Ändern Sie #F0F8FF und „black“ im Beispiel in eine beliebige Farbe, die Ihnen gefällt:
/*Buttonfarbe*/
.ec-size .ec-store .form-control--primary .form-control__button
{ background-color: red;}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}
/*Textfarbe*/
.ec-size .ec-store .form-control--primary .form-control__button {
color: black;
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}
Hier finden Sie verschiedene Farb- und Farbtonkombinationen und können eine beliebige Farbe und ihre Hexadezimalzahl auswählen: CSS-Farben.
Ändern der Farbe des Buttons „In den Warenkorb“
Ersetzen Sie #FFA500 (orange) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
/*Buttonfarbe*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}
/*Textfarbe*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: #000000;
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: #000000;
}
Ändern der Farbe des Buttons „Jetzt kaufen“
Die Buttons „Jetzt kaufen“ werden auf Kategorieseiten angezeigt. Ersetzen Sie #FFFAFA (Buttonfarbe, schneeweiß) und #000000 (Textfarbe, schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
.ec-size .ec-store .grid-product__buy-now .form-control__button {
background: #FFFAFA;
color: #000000;
}Wenn Sie einen Kaufbutton zu Ihrer Website oder Ihrem Blog hinzugefügt haben, kann das Layout ebenfalls den Button „Jetzt kaufen“ enthalten. Um die Farbe dieses Buttons zu ändern, können Sie den folgenden Code verwenden (ersetzen Sie die Farbcodes mit den gewünschten):
.ecsp .ecwid-btn--primary,
.ecwid .ecwid-btn--primary {background-color:#2A54D8;}
.ecsp .ecwid-btn--primary:hover,
.ecwid .ecwid-btn--primary:hover {background-color:#2A54D8;}
Ändern der Farbe des Buttons „Kasse“
Ersetzen Sie #FFFFFF (weiß) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
/*Buttonfarbe*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
background-color: #FFFFFF;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}
/*Textfarbe*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}Ändern der Farbe des Buttons „Weiter“
Ersetzen Sie #FFFFFF (weiß) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
/*Buttonfarbe*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
background-color: #FFFFFF;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
background: #FFFFFF;
}
/*Textfarbe*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
color: #000000
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
color: #000000
}
Ändern der Farbe des Buttons „Bestellung aufgeben“
Ersetzen Sie #FFFFFF (weiß) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
/*Buttonfarbe*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
background-color: #FFFFFF;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
background: #FFFFFF;
}
/*Textfarbe*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
color: #000000
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
color: #000000
}
Ändern der Farbe aller kleineren Buttons auf einmal
Sie können auch die kleineren Buttons wie Mehr hinzufügen, Zur Kasse und Weiter einkaufen auf der Warenkorbseite ändern. Hier sind die Codes zum Ändern dieser Buttons. Ersetzen Sie #FFFFFF (weiß) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
So ändern Sie die Farben der Buttons Mehr hinzufügen und Zur Kasse:
/*Buttonfarbe*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
background-color: #FFFFFF;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
background-color: #FFFFFF;
}
/*Textfarbe*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
color: #000000;
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
color: #000000;
}
So ändern Sie die Farbe des Buttons Weiter einkaufen:
/*Buttonfarbe*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}
/*Textfarbe*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}
Ändern der Farbe des Buttons „Mehr hinzufügen“
Ersetzen Sie #FFA500 (orange) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
/*Buttonfarbe*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
background-color: #FFA500;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
background: #FFA500;
}
/*Textfarbe*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
color: #000000;
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
color: #000000;
}Ändern der Farbe des Buttons „Zur Kasse“
Ersetzen Sie #FFA500 (orange) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
/*Buttonfarbe*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: #FFA500;
}
/*Buttonfarbe bei Mouseover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}
/*Textfarbe*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}
/*Textfarbe bei Mouseover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}Ändern der Farbe des Buttons „Weiter einkaufen“ auf der Warenkorbseite
Ersetzen Sie #FFA500 (orange) und #000000 (schwarz) durch die Farbcodes, die in Ihrem Shop erscheinen sollen.
/*Buttonfarbe*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}
/*Buttonfarbe bei Mouseover*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}
/*Textfarbe*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}
/*Textfarbe bei Mouseover*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}
Platzieren der Buttons „Jetzt kaufen“ auf derselben Ebene
Wenn Ihre Produkttitel unterschiedlich lang sind, sind die Buttons „Jetzt kaufen“ auf der Schaufensterseite möglicherweise nicht richtig ausgerichtet. So richten Sie die Kaufbuttons in einer Rasteransicht aus:
.grid-product__wrap {
display: flex;
}
.grid-product__price {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
Ausblenden des Buttons „In den Warenkorb“ auf allen Produktseiten
Blenden Sie den Button „In den Warenkorb“ auf allen Produktseiten aus, indem Sie den unten stehenden CSS-Code verwenden:
.details-product-purchase__controls {
display: none;
}Schriftarten
Sie können die Standard-Schriftfamilie und ihre Farbe für den gesamten Shop festlegen.
Ändern aller Schriftarten
So ändern Sie die Schriftfamilie für den gesamten Shop. Ersetzen Sie NAME_OF_FONT durch den tatsächlichen Schriftnamen:
.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
font-family: NAME_OF_FONT !important;
}
Ändern der Schriftfarbe
So ändern Sie die Farbe aller Schriftarten auf einmal. Ändern Sie #262626 (sehr dunkles Grau) im Beispiel in eine beliebige Farbe:
.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
color: #262626 !important;
}
Produktraster (Shop-Startseite)
Das Produktraster ist ein Layout, das mehrere Produkte enthält und an folgenden Stellen zu finden ist:
- Auf den Kategorieseiten.
- Im Abschnitt mit der Sammlung der ausgewählten Produkte auf der Startseite.
- Im Raster für ähnliche Produkte, unter dem Hauptprodukt auf einer Produktseite.
Ändern von Farbe und Größe des Preistexts im Produktraster
So ändern Sie Farbe oder Größe der Preistexte im Produktraster. Ändern Sie „blue“ und „20px“ in eine beliebige Farbe und Schriftgröße.
/*Produkttitel auf der Katalogseite*/
/*Change font color*/
.ec-size .ec-store .grid-product__title-inner {
color: blue;
}
/*Produktpreis auf der Katalogseite*/
/*Change font color*/
.ec-size .ec-store .grid-product__price-amount {
color: blue;
}
/*Ändern der Schriftgröße*/
.ec-size .ec-store .grid-product__price-value.ec-price-item {
font-size: 20px !important;
}Deaktivieren des Zoom-Effekts für Produkt-Vorschaubilder
Wenn Sie den Mauszeiger auf ein Produkt-Vorschaubild setzen, sehen Sie den Zoom-Effekt. Diese Funktion ist für alle Ecwid-Shops standardmäßig aktiviert. Wenn Sie sie für Ihren Online-Shop deaktivieren möchten, können Sie den unten stehenden CSS-Code verwenden:
.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
transform: none;
}Platzieren der Symbole „Bestellungen verfolgen“, „Favoriten“, „Warenkorb“ und „Mein Konto“ oben auf einer Schaufensterseite
Die Fußzeilen-Schaltflächen „Bestellungen verfolgen“, „Favoriten“, „Warenkorb“ und „Mein Konto“ befinden sich standardmäßig am unteren Rand der Schaufensterseite. So verschieben Sie sie an den Anfang der Seite:
.ec-size .ec-store__category-page .ec-store__content-wrapper,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
order: -1;
}Kategorie
Shop mit verschiedenen Produktlinien verwenden Kategorien, um Produkte zu organisieren und Käufern zu helfen, das Gewünschte zu finden. Sie können Stiländerungen auf eine Kategorie und/oder auf alle Kategorien gleichzeitig anwenden.
Um Stiländerungen auf alle Kategorie-Detailseiten Ihres Ecwid Shops anzuwenden, verwenden Sie die CSS-Klasse .ec-store__category-page.
Wenn Sie noch keine Kategorien haben, gehören alle Ihre Produkte zur Standardkategorie „Shop-Startseite“. Um Stiländerungen auf alle Produkte anzuwenden, die zu einer Kategorie der Shop-Startseite gehören, verwenden Sie die CSS-Klasse ec-store__category-page--0.
Zentrieren der Produkte in Kategorien
So zentrieren Sie Produkte auf Kategorieseiten (funktioniert am besten, wenn Sie nur wenige Produkte in einer Kategorie haben):
.ec-size .ec-store .grid__products {
justify-content: center;
}
Ändern der Preisfarbe auf einer bestimmten Kategorieseite
So ändern Sie die Preisfarbe auf einer bestimmten Kategorieseite. Ändern Sie 4002 in Ihre eindeutige Kategorie-ID (auf Englisch). Ersetzen Sie #FFA500 (orange) und durch den Farbcode, der in Ihrem Shop erscheinen soll.
.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: #FFA500;
}Deaktivieren des Zoom-Effekts für Kategorie-Vorschaubilder
Wenn Sie den Mauszeiger auf ein Kategorie-Vorschaubild setzen, sehen Sie den Zoom-Effekt. Diese Funktion ist für alle Ecwid-Shops standardmäßig aktiviert. Wenn Sie sie für Ihren Online-Shop deaktivieren möchten, können Sie den unten stehenden CSS-Code verwenden:
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
transform: none;
}Anzeigen einer bestimmten Anzahl von Kategorien pro Zeile
Sie können festlegen, wie viel Platz die Kategorien auf der gesamten Seitenbreite einnehmen sollen. Wenn Sie z. B. die Breite für Kategorien auf 20 % der Seitenfläche einstellen, erhalten Sie 5 Kategorien in einer Zeile, oder wenn Sie die Breite auf 25 % einstellen, erhalten Sie 4 Kategorien pro Zeile, und so weiter.
So zeigen Sie eine bestimmte Anzahl von Kategorien pro Zeile an:
.ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
width: 20% !important;
}
Deaktivieren des Mouseover-Effekts für Kategorietitel
Verwenden Sie den folgenden Abschnitt:
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
transform: none;
}Ausblenden von Vorschaubildern und Titeln für Kategorien
Für Kategorien ohne Bilder zeigt Ecwid einen Farbverlauf als Platzhalterbild im Schaufenster an:
Sie können Ihre eigenen Bilder hinzufügen. Oder Sie können die Bilder und Titel der Kategoriekarten komplett ausblenden (z. B. wenn Sie das horizontale Menü als Shop-Navigation verwenden):
.ec-size .ec-store .grid__categories {
display: none;
}Ausblenden von Kategoriekarten auf der Shop-Startseite
Wenn Sie eine kompaktere Ansicht für Ihre erste Shop-Seite wünschen (z. B. um dort nur das horizontale Menü und vorgestellte Produkte anzuzeigen), können Sie die Kategoriekarten auf der Shop-Startseite ausblenden. Gleichzeitig können Sie Kategoriekarten in Ihren Kategorieseiten aufbewahren, sodass Kunden dort Unterkategorien sehen können, falls vorhanden.
.ec-size .ec-store.ec-store__category-page--0 .ec-grid .grid__categories {
display: none;
}Produktdetails
Auf der Produktseite werden Produktbild, Name, Preis, Beschreibung usw. angezeigt. Sie können das Aussehen des Inhalts ändern und einige Komponenten ausblenden.
Ändern der Schriftfarbe und -größe
So ändern Sie Schriftfarbe und -größe auf der Produktseite. Ändern Sie #FFA500 (orange) und 20px in eine beliebige Farbe und Schriftgröße.
Titelfarbe:
/*Produkttitel auf der Produktseite*/
.ec-size .ec-store .product-details .product-details__product-title {
color: #FFA500;
}Ändern der Schriftfarbe und -größe:
/*Produktpreis auf der Produktseite*/
.ec-size .ec-store .ec-price-item {
color: #FFA500;
}
.ec-size .ec-store .ec-price-item {
font-size: 20px;
}SKU-Farbe:
/*Produkt-SKU auf der Produktseite*/
.ec-size .ec-store .product-details__product-sku {
color: #FFA500;
}
Mengenfarbe:
/*Mengenangabe auf der Produktseite*/
.ec-size .ec-store .details-product-purchase__place {
color: #FFA500;
} Schriftfarbe und -größe des Preises pro Einheit:
/*Felder für den Preis pro Einheit auf der Produktseite*/
.ec-size .ec-store .product-details__price-per-unit-block {
font-size: 20px;
color: #FFA500;
}Ändern der Farbe des Tags „Im Angebot“
Sie können die Farbe des Tags „IM ANGEBOT“ ändern. Ändern Sie RED in den Feldern „background-color“ und „border-color“ in die von Ihnen gewünschte Farbe:
/*Farbe des Labels „Im Angebot“*/
.ec-size .ec-store .label--notice {
background-color: RED;
}
.ec-size .ec-store .label--notice::after,
.ec-size .ec-store .label--notice::before {
color: RED;
}Anzeigen der Galeriebilder in voller Größe auf Mobilgeräten
Fügen Sie den folgenden Selektor und die folgende Eigenschaft hinzu:
.ec-size:not(.ec-size--s) .ec-store .product-details .product-details__gallery {
width: 100vw;
margin-left: calc(env(safe-area-inset-left) - var(--global-tile-padding) * 1px);
}
Entfernen des Namens unter dem Detailbild in einer Galerie
So entfernen Sie den Text unter dem Detailbild:
div.pswp__caption__center {
display:none;
} Öffnen des Abschnitts „Mehr anzeigen“ auf Produktseiten
Die Option Mehr anzeigen erlaubt eine kompakte Ansicht der Produktseite, wenn ein Produkt eine lange Beschreibung hat. Verwenden Sie diesen Code, um eine ausführliche Beschreibung des Produkts anzuzeigen:
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--s .ec-store .product-details__product-description::after {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed~.product-details-module__btn-more {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed::after {
content: none;
}
#productDescription img {
display: inline;
}Anzeigen von „ähnlichen Produkten“ oben auf einer Seite
Zugehörige bzw. ähnliche Produkte werden standardmäßig am unteren Rand der Produktseiten angezeigt. So verschieben Sie sie an den Anfang der Produktseiten:
.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__content-wrapper .ec-related-products {
order: -1;
}Ausblenden des Preises für bestimmte Produkte
Sie können den Preis auf der jeweiligen Produktseite auch ausblenden. Ändern Sie 123456 in Ihre eindeutige interne Produkt-ID für das Produkt: (Wo finde ich die Produkt-ID? (auf Englisch))
.ec-store__product-page--123456 .product-details__product-price {
display: none;
}Ausblenden von Preisen bei nicht angemeldeten Kunden
Sie können Preise vor nicht angemeldeten Besuchern verbergen. Ihr Katalog ist für alle Besucher zugänglich, aber nur registrierte Kunden können die Preise sehen und einkaufen. Dies ist besonders nützlich, wenn Sie Großhandelspreise geheim halten möchten.
Nachfolgend finden Sie einen CSS-Code zum Ausblenden der Preise und der Buttons In den Warenkorb und Jetzt kaufen . In diesem Fall können nur registrierte Kunden Bestellungen aufgeben. Nicht angemeldete Kunden können Ihren Katalog nur ansehen.
/*Preis auf der Katalogseite ausblenden*/
body.ecwid-customer-loggedOut .grid-product__price {
display: none;
}
/*Buttons „Jetzt kaufen“ auf der Katalogseite ausblenden*/
body.ecwid-customer-loggedOut .grid-product__button.grid-product__buy-now {
display: none;
}
/*Preis auf der Produktdetailseite ausblenden*/
body.ecwid-customer-loggedOut .details-product-price__value,
body.ecwid-customer-loggedOut .details-product-price-compare__container {
display: none;
}
/*„In den Warenkorb“ auf der Produktdetailseite ausblenden*/
body.ecwid-customer-loggedOut .details-product-purchase__add-buttons {
display: none;
}
Wenn Sie in einem Land ansässig sind, in dem der Hinweis Preis inkl. MwSt. neben dem Produktpreis angezeigt wird, müssen Sie außerdem den folgenden CSS-Code hinzufügen, um diesen Text im Schaufenster auszublenden:
body.ecwid-customer-loggedOut .product-details__product-price-taxes { display: none; }
Warenkorb
Ändern des Stils des Buttons „Produkt entfernen“
Ihre Kunden können ein Produkt aus einem Warenkorb mithilfe des (X)-Symbols entfernen. Es wird rechts vom Produkt im Warenkorb angezeigt.
Sie können die Höhe und Breite des Zeichens, die Dicke der Linien, die Abrundung der Ecken sowie die Farbe ändern, um es auffälliger zu machen.
Hier ist der Code, den Sie in Ihren Shop einfügen müssen:
.ec-size .ec-store .ec-cart-item__control-inner svg {
opacity: 1.5;
color: red;
width: 30px;
height: 30px;
border-radius: 10px;
}
.ec-size .ec-store .ec-cart-item__control-inner svg g {
stroke-width: 2px;
}
Geben Sie in der Zeile „color“ eine beliebige Farbe ein, die Ihr Zeichen haben soll.
Je größer die Breite und die Höhe sind, desto größer wird das Zeichen sein.
Entfernen des Mengenfelds
So blenden Sie die Menge auf der Warenkorbseite aus:
.ec-size .ec-store .ec-cart-item__count {
display: none;
}Erweitern des Felds für den Rabattcoupon
Sie können das Feld für den Rabattcoupon (und die Geschenkkarte) im Warenkorb erweitern:
.ec-size .ec-store .ec-cart-coupon__wrap { visibility: visible }
.ec-size .ec-store .ec-cart-coupon:not(.ec-cart-coupon--applied) .ec-cart-coupon__button--apply {
display: block;
}
.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__wrap {
display: flex;
align-items: center;
height: auto;
}
.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__text {
display: none;
}Anzeigen des leeren Warenkorbs auf der Instant Site (Originalversion)
Standardmäßig wird das Warenkorbsymbol auf der Instant Site angezeigt, wenn der Warenkorb ein Produkt enthält. Wenn Sie möchten, können Sie das Warenkorbsymbol auch dann anzeigen, wenn dieser leer ist:
.float-icons__icon--cart.off:not(.off2) {
opacity: 1;
height: 48px;
padding-top: 12px;
transform: translateX(-8px);
pointer-events: auto;
}
@media (min-width: 414px) {
.float-icons__icon--cart.off:not(.off2) {
height: 68px;
padding-top: 16px;
transform: translateX(-16px);
}
}
@media (min-width: 768px) {
.float-icons__icon--cart.off:not(.off2) {
padding-top: 24px;
transform: translateX(-24px);
}
}
Suchfeld
Ein Suchwidget hilft Ihren Kunden bei der Suche nach Produkten in Ihrem Shop. Sie können das Aussehen des Suchfelds selbst ändern oder es verschieben.
Anpassen des Suchwidget-Designs
Fügen Sie die folgenden Selektoren und Eigenschaften hinzu oder passen Sie an. Ändern Sie die Größe und ersetzen Sie Farbcodes wie #000000 durch den Farbcode, der erscheinen soll.
/* Stile für Eingabefelder */
input.ecwid-search-widget__input[type="text"] {
width: 100px; /* Breite nach Bedarf ändern*/
height: 20px; /* Höhe nach Bedarf ändern*/
border: solid 1px red; /* Rahmenfarbe ändern */
background-color: #000000; /* Hintergrundfarbe ändern */
font-size: 12px; /* Schriftgröße im Suchfeld ändern */
color: #000000; /* Schriftfarbe im Suchfeld ändern */
}Anpassen des Stils des Suchbuttons
Fügen Sie die folgenden Selektoren und Eigenschaften hinzu oder passen Sie an. Ersetzen Sie „image/button_search.png“ durch den tatsächlichen absoluten Pfad zum Hintergrundbild. Zum Beispiel: http://www.example.com/images/button_bg.png
/* Stile der Suchbuttons */
button.ecwid-search-widget__btn {
width: 20px; /* Breite nach Bedarf ändern*/
height: 10px; /* Höhe nach Bedarf ändern*/
border: solid 1px #ffffff; /*Rahmenfarbe ändern */
background: transparent url(image/button_search.png) no-repeat bottom center !important; /*Hintergrundbild hinzufügen*/
}Verschieben des Suchfelds
Je nach der gewünschten Position des Suchwidgets geben Sie die entsprechenden Werte für margin-left und margin-left ein, um es zu verschieben.
/* Verschieben des Suchwidgets*/
.ecwid-search-widget {
max-width: 170px; /* Breite nach Bedarf ändern*/
position:relative;
margin-left: 400px; /* Linken Rand nach Bedarf ändern*/
margin-top: 10px; /* Oberen Rand nach Bedarf ändern*/
}Anpassen des Suchfelds auf der Instant Site (Originalversion)
Ersetzen Sie #F3F6F9 durch den Farbcode, der erscheinen soll.
.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect {
border: 1px solid #e6e6e6;
}
.search-panel .text-field {
background-color: #F3F6F9;
border: 2px solid #DC230A;
}Kasse
Entfernen der Lieferzeit von den Namen der Versandarten
Einige Versandanbieter (wie USPS, FedEx usw.) fügen den Namen der Versandarten eine Lieferzeit hinzu. Wenn Sie einen Online-Versandanbieter in Ihrem Ecwid-Shop verwenden, können Sie sehen, dass die Versandarten an der Kasse wie folgt angezeigt werden: USPS Priority Mail (1-3 Tage). Es ist möglich, diese Lieferzeit über CSS zu verbergen:
span.ecwid-shippingOption-days, span.ecwid-Invoice-ShippingDetails-transitTime {
display:none !important;
}Ändern der Kreditkartenlogos in den Zahlungsoptionen an der Kasse
Die Logos unter den Zahlungsoptionen helfen Kunden, sofort zu erkennen, wie sie zahlen können. Sie können einen CSS-Code verwenden, um verschiedene Logos anzuzeigen, z. B. um hervorzuheben, welche Kredit- oder Debitkarten verwendet werden können.
Verwenden Sie diesen CSS-Code:
/* Aktuelle Logos der Zahlungsart ausblenden */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X)
div.ec-cart-accept__icons {
display: none;
}
/* Eigenes Logo für die Zahlungsart hinzufügen */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X)
.ec-radiogroup__info:after {
content: '';
background: url('https://example.com/your_image.jpg') no-repeat;
background-size: contain;
height: 40px;
width: 60px; /* Die Breite sollte je nach Ihrem Logo angepasst werden */
display: block;
}
wobei Sie https://example.com/your_image.jpg durch eine URL zu Ihrem Logo und X in :nth-child(X) durch die Nummer der Zahlungsart an der Kasse ersetzen sollten. Wenn zum Beispiel 3 Zahlungsarten an der Kasse angezeigt werden und Sie unter der zweiten neue Logos anzeigen möchten, sollten Sie 2 in den Code einfügen, etwa so: :nth-child(2).
Sie können die folgenden Kreditkartenlogos verwenden:
- Discover: https://sassme.ecwid.com/static/v1/icons/discover.svg
- Mastercard: https://sassme.ecwid.com/static/v1/icons/mastercard.svg
- Amex: https://sassme.ecwid.com/static/v1/icons/amex.svg
- Visa: https://sassme.ecwid.com/static/v1/icons/visa.svg
Anzeigen der Kreditkartenlogos in der Shop-Fußzeile
Falls Sie zeigen müssen, welche Karten Sie in Ihrem Shop akzeptieren (z. B. um Google dazu zu bringen, Ihr Konto für Google Shopping zu genehmigen), können Sie mit dem folgenden CSS-Code Kartenlogos in der Fußzeile hinzufügen:
wobei Sie https://example.com/your_image.jpg durch eine URL zu Ihrem Bild mit Logos ersetzen sollten.
Sie können die folgenden Kreditkartenlogos verwenden: