Wissensdatenbank
Leitfäden
Academy
Video-Tutorials
Versuchen Sie es mit:
Zuletzt angesehene Artikel:

Inhaltsverzeichnis

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.
Ziehen Sie in Erwägung, das Ecwid-Team für kundenspezifische Entwicklung zu beauftragen, wenn Sie sich bei der Arbeit mit Codes nicht wohl fühlen.

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

Wenn Sie die Instant Site der nächsten Generation verwenden, haben die Codes, die Sie auf Ihr Schaufenster anwenden (der Shop-Abschnitt, in dem Kunden nach Produkten suchen), keinen Einfluss auf die Shop-Blöcke auf der Startseite Ihrer Website. Wenn Sie das Aussehen der Shop-Blöcke anpassen möchten, können Sie das individuell tun, z. B. mit den Design-Einstellungen im Site-Editor.

Buttons

Schriftarten

Produktraster (Shop-Startseite)

Kategorieseite

Produktdetails

Warenkorb

Suchfeld

Kasse

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.

Möchten Sie auch den Text der Buttons ändern? Das können Sie mit dem Shop-Label-Editor tun.
Wenn Ihr Ecwid-Shop zu einer Wix-Website hinzugefügt wurde, legen Sie die Schriftarten in den Einstellungen der Ecwid-App fest.

Ä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:

Buy Now buttons.png

.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;
  }
Beachten Sie, dass, wenn Sie die Buttons Jetzt kaufen und In den Warenkorb ausblenden, Ihre Kunden Ihre Produkte nicht kaufen können. Erfahren Sie mehr darüber, wie Sie Ecwid als Online-Katalog verwenden 

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;
  }
  
Hier finden Sie verschiedene Farb- und Farbtonkombinationen und können eine beliebige Farbe und ihre Hexadezimalzahl auswählen: CSS-Farben.

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:

Screenshot_2019-12-29_at_17.35.03.png

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.

Um Stiländerungen auf alle Produkte anzuwenden, die zu einer einer bestimmten Kategorie gehören, verwenden Sie die CSS-Klasse .ec-store__product-page--c12345. Ändern Sie 12345 in Ihre einzigartige Kategorie-ID (auf Englisch).

Ä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; } 
  
Wenn Sie möchten, dass nur registrierte Kunden Ihr Schaufenster sehen können, verwenden Sie die App Required Login for Storefront Access.

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);
      }
  }
  
Dieser Code funktioniert nur für die Originalversion von Ecwids Instant Site.

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; 
  }
Dieser Code funktioniert für die Originalversion von Ecwids Instant Site. Wenn Sie die Instant Site der nächsten Generation verwenden, können Sie das Aussehen des Suchfeldes im Site-Editor ändern.

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: 

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:


  .ins-tile--footer .ins-tile__made-with:before {
  content: '';
  background: url('https://example.com/your_image.jpg') no-repeat;
  background-size: contain;
  background-position: center;
  height: 50px;
  display: block;
  }
  

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: 

War dieser Beitrag hilfreich?

Großartig! Vielen Dank für Ihr Feedback!

Vielen Dank für Ihr Feedback!

Das tut uns leid! Was ist schief gelaufen?
24 von 35 fanden dies hilfreich
10
Wir verwenden Cookies und ähnliche Technologien, um Ihre Präferenzen zu speichern, die Effektivität unserer Kampagnen zu messen und anonymisierte Daten zu analysieren, um die Leistung unserer Website zu verbessern. Mit der Auswahl von „Akzeptieren“ stimmen Sie der Verwendung von Cookies zu.
Cookies akzeptieren Ablehnen