Erweiterte Anpassungen für die Anzeige von Produkten und Kollektionen für das Shopify-Plugin

Diese erweiterten Einstellungen helfen dir, deine Storefront auf WordPress anzupassen, deine Unternehmensmarke zu personalisieren und das Kauferlebnis deiner Kundschaft zu verbessern.

Auf dieser Seite

Shopify-Plugin und Shopify-Storefront-Komponenten

Das Shopify-Plugin basiert auf den Shopify Storefront Web Components. Die folgenden Komponenten werden als Bausteine für deine Shopify-Storefront verwendet:

Produktkarten-Komponente: Diese Komponente zeigt einzelne Produktinformationen an, die normalerweise in Produktangeboten oder auf Kollektionsseiten angezeigt werden. Sie enthält oft Elemente wie das Produktbild, den Titel, den Preis und eine Schaltfläche zum Hinzufügen zum Warenkorb.
Modale Komponente für die Produkt-Schnellansicht: Diese Komponente zeigt ein modales Fenster über dem vorhandenen Inhalt mit Produktdetails, einer Schaltfläche zum Hinzufügen zum Warenkorb und einem Link zum Anzeigen der vollständigen Produktdetails an.
Produktdetailseiten-Komponente: Diese Komponente zeigt ein einzelnes Produkt mit allen Produktdetails an. Jede Produktdetailseiten-Komponente hat eine eindeutige URL.
Kollektionskomponente: Diese Komponente zeigt von dir erstellte Produktkollektionen an.

Anpassung der Anzeige von Shopify-Produkten und -Kollektionen

Die standardmäßigen Shopify-Storefront-Komponenten in deinem Plugin verfügen über Tools, die dir dabei helfen, ein nahtloses Einkaufserlebnis zu schaffen. Du hast auch die Flexibilität, die Anzeige dieser Komponenten an deine spezifische Markenidentität und deine Designanforderungen anzupassen.

Um solche Anpassungen vorzunehmen, musst du Zugriff haben, um deine WordPress-Theme-Dateien und -Verzeichnisse zu ändern. Der Prozess beinhaltet die Erstellung eines dedizierten Ordners im Verzeichnis deines aktiven WordPress-Themes.

Schritte:

Den Shopify-Ordner erstellen: Erstelle zunächst einen neuen Ordner mit dem Namen Shopify direkt im Verzeichnis deines aktiven Themes. Dieser Ordner dient als zentraler Speicherort für deine benutzerdefinierten Komponenten-Überschreibungen.
Einzelne Komponenten überschreiben: Um eine bestimmte Komponente zu ändern, füge eine PHP-Datei mit einem bestimmten Namen in den neu erstellten Shopify Ordner ein. Die Namenskonvention für diese Überschreibungsdateien ist entscheidend, damit das Plugin deine benutzerdefinierten Versionen erkennt und anwendet:
- Um die Produktkarten-Komponente zu überschreiben, erstelle eine PHP-Datei mit dem Namen product-card.php im Shopify-Ordner.
- Um die modale Komponente für die Produkt-Schnellansicht zu überschreiben, erstelle eine PHP-Datei mit dem Namen modal.php im Shopify-Ordner.
- Um die Produktdetailseiten-Komponente zu überschreiben, erstelle eine PHP-Datei mit dem Namen pdp.php im Ordner Shopify.
- Um die Kollektions-Komponente zu überschreiben, erstelle eine PHP-Datei mit dem Namen component.php im Ordner Shopify.

Nachdem deine benutzerdefinierte PHP-Datei erstellt wurde, ignoriert das Plugin seine standardmäßige Komponentendatei für dieses spezifische Element. Du kannst in diesen Überschreibungsdateien jeden beliebigen Code implementieren, von statischen HTML-Blöcken bis hin zu komplexer PHP-Logik.

Obwohl dringend empfohlen wird, die Shopify Storefront Web Components (wie sie in der Standard-Plug-in-Struktur verwendet werden) für die Konsistenz und den Zugriff auf integrierte Shopify-Funktionalitäten zu nutzen, bist du nicht auf sie beschränkt. Du kannst andere Methoden zum Abrufen und Anzeigen von Produkt- und Kollektionsdaten integrieren, was erweiterte Anpassungen ermöglicht.

Weitere Informationen und Best Practices findest du in der Entwicklerdokumentation für WordPress-Plugins.

Rewrites für Shopify-Produkte und -Kollektionen

Wenn du ein Produkt oder eine Kollektion auf Shopify veröffentlichst, haben jedes Produkt und jede Kollektion eine eindeutige URL. Standardmäßig werden diese URLs mit deiner Shopify-Domain erstellt. Mit der Rewrites-Funktion kannst du mit deiner öffentlichen WordPress-Domain auf diese eindeutigen URLs zugreifen.

Schritte:

Gehe im Shopify-Plugin zu „Einstellungen“.
Stelle im Tab „Erweitert“ sicher, dass die beiden Kontrollkästchen im Abschnitt „Shopify-Link-Rewrites“ aktiviert sind.
Gehe zu „Permalink“.
Klicke auf „Speichern“, um diese neue Regel anzuwenden.
Gehe zu deinem Shopify-Adminbereich und navigiere dann zur Detailseite des Produkts oder der Kollektion, für das bzw. die du einen WordPress-Link erstellen möchtest.
In der Karte für den Suchmaschinen-Eintrag wird eine URL angezeigt, die Kund:innen direkt zu deinem Produkt oder deiner Kollektion weiterleitet. Beispiel: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
Füge products/huskee-reusable-cup am Ende der URL deiner WordPress-Website hinzu. Beispiel: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Verhalten der Produktkarte anpassen

Bei den Shopify Storefront-Komponenten gibt es zwei Arten von Produktdetailkarten:

Schnellansicht: Wenn Kund:innen mit der Maus über die Produktkarte fahren, haben sie die Option Quick Shop. Wenn sie darauf klicken, werden die Produktdetails im Hintergrund in einer Pop-up- oder modalen Ansicht über den vorhandenen Inhalten angezeigt.
Detaillierte Produktseite: Wenn ein:e Kund:in auf die Produktkarte klickt, z. B. auf das Bild oder den Produktnamen, werden die Produktdetails mit einer eindeutigen URL in einer ganzseitigen Ansicht angezeigt.

Du kannst diese Einstellung ändern, um entweder nur eine Schnellansicht, nur eine detaillierte Produktseite oder beides anzuzeigen.

Schritte:

Gehe im Shopify-Plugin in WordPress zu „Einstellungen“.
Gehe im Tab „Erweitert“ zum Abschnitt „Produktansicht“.
Wähle die Option aus, die für deinen Shop am besten geeignet ist.
Klicke auf „Speichern“.