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

Inhaltsverzeichnis

Anpassen des Ecwid-Shop-Designs an eine Wordpress-Website

Wenn Sie einen Ecwid-Shop zu einer WordPress-Website hinzufügen, passt Ecwid sein Design an die Website an. Das Schaufenster übernimmt automatisch die Schriftarten und Farben Ihrer WordPress-Website und fügt sich nahtlos ein. Diese Funktion ist standardmäßig vorhanden und für alle Ecwid-Shops verfügbar.

Sie können das Design des Shops auch mithilfe von Blockeinstellungen, Designs oder CSS-Codes anpassen. All diese Optionen helfen Ihnen, die Produkte nach Ihren Designvorlieben darzustellen: Wählen Sie das Seitenverhältnis, das zu Ihren Produktbildern passt, wählen Sie, welche Informationen Sie auf den Shopseiten anzeigen möchten, legen Sie Farben für Schaltflächen, Links, Texte usw. fest.

Bevor Sie beginnen, vergewissern Sie sich, dass Ihr WordPress-Dashboard und das Ecwid-Plug-in auf dem neuesten Stand sind, um auf alle in diesem Artikel beschriebenen Design-Einstellungen zugreifen zu können. Um die Updates zu überprüfen, gehen Sie zu: WordPress Adminbereich → Plugins.

Design-Einstellungen auf einer WordPress-Website

Wir empfehlen, Ecwid zu einer WordPress-Website hinzuzufügen, indem Sie unser offizielles Plug-in Ecwid E-commerce Shopping Cart verwenden. Mit dem Plug-in können Sie den Shop und bestimmte Produkte ganz einfach zu verschiedenen Seiten der Website hinzufügen, das Design des Shops auf jeder Seite separat ändern, Shop-Widgets (Warenkorb-Symbol, Suchfeld usw.) hinzufügen und vieles mehr.

Zusammengefasst können Sie das Design Ihres Shops in den Blockeinstellungen anpassen, in denen Sie Ecwid hinzugefügt haben:

customize_ecwid_store_on_wordpress.png

Hier ist die allgemeine Methode zum Ändern des Shop-Designs in WordPress:

  1. Gehen Sie zum WordPress Dashboard → Seiten und öffnen Sie die Seite mit dem Shop.
  2. Klicken Sie auf den Block mit dem Shop. Auf der rechten Seite sehen Sie die Einstellungen des Blocks.
  3. Ändern Sie die Einstellungen des Blocks nach Belieben.
  4. Klicken Sie auf Vorschau, um zu sehen, wie der Shop mit den neuen Einstellungen aussehen wird.
  5. Klicken Sie auf Aktualisieren, um die Änderungen zu speichern.
Es ist wichtig, dass Sie das Design, wie oben beschrieben, in den Einstellungen des Blocks ändern. Wenn Sie die Einstellungen für das Shop-Design auf der Registerkarte Gestaltung direkt in Ihrer Ecwid-Verwaltung ändern, werden diese Einstellungen nicht auf Ihrer Website angezeigt, da sie von den Einstellungen des Blocks überschrieben werden.

In den Einstellungen des Blocks können Sie Folgendes ändern:

  • Welche Inhalte auf Kategorie- und Produktseiten angezeigt werden: Produkttitel, SKU, Preis usw.
  • Welche Links für die Shopnavigation angezeigt werden sollen: Breadcrumbs, Anmeldelink usw.
  • Größe und Seitenverhältnis für Kategorien und Produktvorschaubilder.
  • Farben für Schaltflächen, Texte, Links, Hintergrund und Preis.
  • Und eine Menge anderer Einstellungen, die Sie im Blockabschnitt finden.
Die Blockeinstellungen gelten nur innerhalb eines bestimmten Blocks. Wenn Sie ein unterschiedliches Design für verschiedene Produktkategorien haben möchten, fügen Sie sie zu separaten Seiten hinzu und bearbeiten Sie das Design in jedem Shop-Block.

Design des Warenkorb-Symbols

Ihre Kunden verwenden das Warenkorb-Symbol, um ihren Einkauf abzuschließen. Wenn Sie Ecwid zu WordPress hinzufügen, wird in der rechten unteren Ecke standardmäßig ein Warenkorb-Symbol hinzugefügt.

Ecwid-Warenkorb-Symbol in WordPress

Sie können die Position ändern, auswählen, ob Sie die Anzahl der Artikel/Zwischensumme im Warenkorb anzeigen möchten, einen Rahmen festlegen und ein Symbol auswählen.

Wenn sich das Warenkorb-Symbol an einer anderen Stelle der Website befindet (z. B. in der Kopfzeile), können Sie dieses standardmäßig eingefügte Warenkorb-Widget entfernen und den Kunden einen einzigen Warenkorb zur Verfügung stellen.

So ändern Sie das Erscheinungsbild Ihres Warenkorb-Symbols:

  1. Gehen Sie zu WordPress Dashboard → Design → Anpassen.
  2. Klicken Sie im Menü der Seitenleiste auf EcwidShopping Cart Widget (Warenkorb-Widget).
  3. Passen Sie die Einstellungen des Warenkorb-Widgets nach Ihren Vorstellungen an. Das Erscheinungsbild des Warenkorb-Widgets ändert sich in der Vorschau, sobald Sie neue Einstellungen vornehmen.
  4. Wählen Sie die entsprechende Option zum Anzeigen eines leeren Warenkorbs, wenn Sie das Warenkorb-Symbol auch dann anzeigen möchten, wenn sich keine Produkte im Warenkorb befinden.
  5. Sobald Sie Ihre bevorzugte Ansicht gefunden haben, klicken Sie auf Veröffentlichen:

Ecwid WordPress Plug-in für das Warenkorb-Widget

Um das Warenkorb-Widget, das standardmäßig hinzugefügt wird, auszublenden, wählen Sie in der ersten Designoption Warenkorb anzeigen die Option „Nicht anzeigen“. Wenn Sie Ihren Shop für Besucher Ihrer Webseite hervorheben möchten, wählen Sie „Auf allen Seiten anzeigen“. Das Warenkorb-Symbol zeigt an, dass die Webseite einen Shop besitzt.

Benutzerdefinierte CSS-Codes

Sie können CSS-Codes verwenden, um sonst nicht verfügbare Anpassungen vorzunehmen. Nehmen wir an, Sie möchten die Symbole in der Fußzeile („Bestellungen verfolgen“, „Favoriten“, „Anmelden“ und „Warenkorb“) an den oberen Rand des Schaufensters verschieben. Es gibt keine integrierte Einstellung, um dies zu ändern, aber Sie können CSS-Code verwenden. Sie sollten Ihre benutzerdefinierten CSS-Codess für Ihren Ecwid-Shop in den WordPress-Einstellungen hinzufügen. 

So fügen Sie einen CSS-Code zu Ihrer WordPress-Website hinzu:

  1. Gehen Sie zu WordPress Dashboard → Design → Anpassen.
  2. Klicken Sie in der linken Seitenleiste auf Zusätzliches CSS.
  3. Fügen Sie Ihre CSS-Codes in das Feld ein.
  4. Veröffentlichen Sie die Änderungen.

Auf diese Weise können Sie CSS-Codes für Ihre WordPress-Website und auch für Ihren Ecwid-Shop hinzufügen.

Wenn Sie den für Ihre Anpassung richtigen CSS-Code nicht finden oder erstellen können, kann unser Team eine maßgeschneiderte Lösung für Sie entwerfen. Senden Sie unserem Anpassungsteam eine Anfrage, um ein Angebot zu erhalten.

Designs für WordPress

Ecwid ist mit jedem WordPress-Design kompatibel. Dazu gehören kostenlose Designs von WordPress, Premium-Designs von Drittanbietern oder selbst erstellte Designs.

Ecwid verfügt über ein integriertes Tool, das Ihr Shop-Design und WordPress-Design in Einklang bringt. Unabhängig davon, welches Design Sie verwenden, erkennt Ecwid das Farbschema Ihrer Website (anhand des Textes, der Links, des Hintergrunds und der Schaltflächen) und übernimmt es automatisch in das Design Ihres Shops.

Wenn Sie sich noch nicht für ein WordPress-Design entschieden haben, werfen Sie einen Blick auf die folgenden:

Sie können das Design Ihres Shops aufwerten, indem Sie Slider erstellen. WordPress hat dafür ein großartiges Plug-in. Smart Slider 3 ist ein leistungsstarkes Tool zur Erstellung von Slidern mit einer benutzerfreundlichen Oberfläche und vielen Anpassungsoptionen.

FAQ

Mein WordPress-Editor zeigt keine Blockeinstellungen für den Shop an

Sie haben die obigen Anweisungen gelesen, können aber in Ihrem WordPress-Editor die genannten Shop-Einstellungen nicht finden? Dafür gibt es zwei mögliche Erklärungen:

  1. Sie verwenden eine alte Version von WordPress.
    Lösung: Aktualisieren Sie Ihr WordPress auf die neueste Version. Vergewissern Sie sich außerdem, dass Ihr Ecwid-Plug-in auf dem neuesten Stand ist: Gehen Sie zum WordPress-Adminbereich → Plug-ins → Installierte Plug-ins → Ecwid E-Commerce Shopping Cart. Klicken Sie auf Aktualisieren, wenn Sie sehen, dass eine neue Plug-in-Version für Sie verfügbar ist.
  2. Sie haben den Shop zu Ihrer Website hinzugefügt, bevor der WordPress-Block-Editor (auch bekannt als Gutenberg) eingeführt wurde.
    Lösung: Aktualisieren Sie Ihr WordPress auf die neueste Version, entfernen Sie den Shop und fügen Sie ihn dann erneut hinzu. Folgen Sie den Anweisungen, wie Sie einen Ecwid-Shop zu einer WordPress-Website hinzufügen.

Sie konnten Ihr Problem nicht lösen? Kontaktieren Sie uns. Wir kümmern uns darum.

Änderungen am Shop-Design spiegeln sich nicht auf der Website wider

Dies kann passieren, wenn Sie die Designeinstellungen direkt unter Ecwid-Verwaltung → Gestaltung ändern. Diese Änderungen werden sich nicht auf Ihrer WordPress-Website widerspiegeln, da sie von den Design-Einstellungen im Shop-Block überschrieben werden.

Sie müssen das Design Ihres Shops im WordPress-Editor über die Blockeinstellungen ändern, in denen sich der Shop befindet. Lesen Sie die Anweisungen hier: Design-Einstellungen auf einer WordPress-Website.

Kann ich verschiedene Designs für verschiedene Produktkategorien festlegen?

Ja, Sie können verschiedene Designs verwenden, wenn Sie Ihren Shop mit dem Ecwid-Plug-in zu WordPress hinzufügen. Hier erfahren Sie, wie Sie verschiedene Designs für Shop-Kategorien auf verschiedenen WordPress-Webseiten einstellen können:

  1. Ordnen Sie die Produkte den Kategorien zu, falls noch nicht geschehen.
  2. Fügen Sie Produktkategorien zu verschiedenen Seiten der Website hinzu.
  3. Ändern Sie das Shop-Design eines jeden Blocks.

Da Designänderungen nur für den Shop-Block gelten, in dem Sie sie festgelegt haben, können Sie Shop-Kategorien auf verschiedenen Website-Seiten haben, die unterschiedlich aussehen.

Verwandte Artikel

Mit Ecwid E-Commerce auf WordPress verkaufen
Ersteinrichtung des Ecwid-Shops
Die 15 besten kostenlosen WordPress-Designs für Ihre E-Commerce-Website (Blog)

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?
22 von 39 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