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.

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.

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:

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.

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.

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.

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 Ecwid → Shopping 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:

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 (auf Englisch) („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.

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:

• Responsive von CyberChimps
• HEALTHFLEX von PlethoraThemes
• Sammlung von Ecwid-Designs von ThemeForest

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 auf Englisch)