So gestalten Sie eine Produktdetailseite mit Produktelementen in GemPages

Sie können Ihre Produktdetailseite folgendermaßen erstellen:

• Mithilfe eines vorgefertigten Produktdetailseitsabschnitts aus dem Vorlagenbibliothek.
• Mit Produktelementen von Grund auf neu beginnen

Was sind die Produktelemente?

Die Produktelement in GemPages können Sie Shopify-Produktinformationen dynamisch auf Ihrer Seite anzeigen.

Verwendung: Kann nur innerhalb eines Produktmodul, das als Container für alle produktbezogenen Elemente dient.

Untergeordnete Elemente: Verbessern Sie Ihre Produktdetailseite mit Folgendem:

• Hauptelemente: Bild, Titel, Beschreibung, Preis, Varianten, In den Warenkorb-Button
• Andere Elemente: SKU, Produktabzeichen, Conversion-Booster (Countdown-Timer, Lagerzähler usw.)

So gestalten Sie eine Produktdetailseite mit Produktelementen

Schritt 1: Öffnen Sie den Microsoft Store auf Ihrem Windows-PC GemPages-Editor in Ihrem Shopify-Shop. Wählen Sie die Produktseite aus, die Sie bearbeiten möchten, oder erstellen Sie eine neue Seite von Grund auf.

Schritt 2: Ziehen Sie in der linken Seitenleiste per Drag & Drop ein Produktmodul auf Ihre Seite. 

Standardmäßig enthält das Modul Hauptelemente wie Bild, Titel, Beschreibung, Preis, Varianten und Schaltfläche „In den Warenkorb“, automatisch von Shopify synchronisiert.

Wichtige Produktelemente zum Hinzufügen und Anpassen

1. Produkttitel

Der Titel wird standardmäßig angezeigt, wenn Sie das Element hinzufügen. Wenn er entfernt wird oder neu positioniert werden muss, ziehen Sie ihn per Drag & Drop aus der Seitenleiste.

2. Produktbilder und Miniaturansichten (Bild, Video, Videobanner usw.)

Das Bild wird standardmäßig angezeigt, wenn Sie das Produktmodul hinzufügen. Wenn Sie es entfernen oder zusätzliche Bildplatzierungen wünschen, ziehen Sie den Artikelbild Element aus der Seitenleiste an eine neue Position. Dieses Element unterstützt Produktbilder, Videos und Videobanner um Ihr Produkt visuell zu präsentieren.

Mehr lesen: Leitfaden zu Produktbildelementen

3. Produktabzeichen

Produktabzeichen wie „50 % Rabatt“ oder „Limitierte Auflage“ heben die besonderen Eigenschaften Ihres Produkts hervor.

Ziehen Sie im Produktelement das Produktabzeichenelement in den GemPages-Editor.

Mehr lesen: Leitfaden zu Produktabzeichenelementen

4. Produkt-SKU

Durch die Anzeige der SKU (Stock Keeping Unit) können sowohl Kunden als auch Filialleiter Produkte effizient verfolgen.

Suchen Sie nach den Produkt-SKU im Produktelement. Ziehen Sie es per Drag & Drop in den GemPages-Editor.

Mehr lesen: Produkt-SKU-Elementhandbuch

5. Produktbeschreibung

Produktbeschreibungen werden standardmäßig angezeigt, können aber verschoben werden. 

Ziehen Sie die Produktbeschreibung* Element aus der Seitenleiste, wenn Anpassungen erforderlich sind.

6. Produktpreis

Der Preis wird standardmäßig angezeigt und wird direkt von Shopify übernommen.

Positionieren Sie das neu Produktpreis Element, indem Sie es bei Bedarf an die gewünschte Stelle ziehen.

Mehr lesen: Leitfaden zu Produktpreiselementen

7. Produktmenge

Zeigen Sie den Mengenwähler an, damit Kunden die Anzahl der Artikel auswählen können, die sie kaufen möchten.

Wenn Sie die Position ändern oder entfernen Produktmenge Element, ziehen Sie es aus der Seitenleiste zurück an die Stelle, an der es angezeigt werden soll.

Mehr lesen: Produkt Menge Element Guide

8. Produktoptionen/Varianten

Produktvarianten wie Farbe, Größe und Material werden automatisch geladen.

Um die Anzeige anzupassen oder die Position der Produktoptionen zu ändern, ziehen Sie den Produktvarianten Element an die gewünschte Stelle. Sie können verschiedene Stile mit Farbfeldern für Farboptionen oder Dropdown-Menüs zur einfacheren Auswahl anpassen.

Mehr lesen: Leitfaden zu Produktvarianten und Farbmustern

Varianten verarbeiten Attribute wie Farbe, Größe und Material (sofern als Shopify-Varianten definiert). Für zusätzliche Informationen, die sich nicht auf die Artikelnummer auswirken (z. B. Pflegehinweise), verwenden Sie Shopify-Produkt-Metafelder und zeigen Sie diese über dynamischen Text oder benutzerdefinierte Blöcke in Ihrem Produktmodul an.

9. In den Warenkorb/Jetzt kaufen-Button

Diese Schaltfläche ist standardmäßig enthalten und Sie können ihre Farbe, ihren Text und ihre Größe anpassen, damit sie auf der Seite hervorsticht.

Ziehen Sie die Schaltfläche aus der Seitenleiste, wenn sie entfernt oder neu positioniert wurde. Passen Sie das Verhalten der Schaltfläche an, um entweder zur Kasse weiterzuleiten, die Einkaufswagenschublade zu öffnen oder auf derselben Seite zu bleiben.

Mehr lesen: Anleitung zum Button-Element „In den Warenkorb“

10. Conversion-Booster

Das Hinzufügen von Elementen, die Dringlichkeit erzeugen oder soziale Beweise liefern, kann die Konvertierungen erheblich steigern.

• GemPages ermöglicht Ihnen das Hinzufügen Countdown-Timer or Lagerzähler
• Sie können auch integrieren Vertrauensabzeichen or Kundenbewertungen von Drittanbieter-Apps. Detaillierte Anweisungen zur Integration einer Drittanbieter-App in GemPages finden Sie unter Dieser Artikel.

Schritt 4: Wenn Sie mit Ihrem Design zufrieden sind, speichern Sie Ihren Fortschritt und veröffentlichen Sie Ihre Änderungen.

Häufig gestellte Fragen

1. Kann ich eine Produktseitenvorlage für verschiedene Produkte mit unterschiedlichen Informationen verwenden?

Ja. Sie können eine universelle Produktseitenvorlage erstellen mit Produktelement und ziehen Sie einzigartige produktspezifische Inhalte mit Shopify-Produkt-Metafelder. Dadurch kann jedes Produkt seinen eigenen dynamischen Inhalt anzeigen, auch wenn das gleiche Seitendesign verwendet wird.

2. Kann ich den Produkttitel oder die Produktbeschreibung direkt in GemPages bearbeiten?

Nein. Die Elemente „Produkttitel“ und „Produktbeschreibung“ beziehen automatisch Daten aus dem Shopify-Adminbereich. Wenn Sie diese ändern möchten, müssen Sie sie direkt in Ihrem Shopify-Adminbereich bearbeiten.

3. Werden Produkt-Metafelder in allen GemPages-Plänen unterstützt?

Produkt-Metafelder werden in GemPages V7 unterstützt. Stellen Sie jedoch sicher, dass Ihr Plan die Funktion für dynamischen Text enthält, um diese Funktion vollständig nutzen zu können.