Schaltflächenelement „Produkt in den Warenkorb legen“

Über die Schaltfläche „Warenkorb“

Der Button „In den Warenkorb“ ist für jeden Shop von großer Bedeutung, da Kunden damit Produkte mit einem einfachen Klick in ihren Warenkorb legen können. Bei GemPages wird dieser Button als Warenkorb-Button bezeichnet und bietet zahlreiche weitere Funktionen, die über das bloße Hinzufügen von Produkten in den Warenkorb hinausgehen.

Um Ihrer Seite die Schaltfläche „Warenkorb“ hinzuzufügen, befolgen Sie bitte die nachstehenden Schritte. 

Schritt 1: Im GemPages Dashboard, wählen Sie die Seite aus, an der Sie arbeiten möchten, und öffnen Sie den Editor.

Schritt 2: Da der Warenkorb-Button ein untergeordnetes Element des Produktelement, muss es in einem Produktmodul verschachtelt sein, um ordnungsgemäß zu funktionieren. Wenn Sie kein Produktmodul haben, ziehen Sie eines per Drag & Drop auf Ihre Seite.

Schritt 3: Ziehen Sie das Element „Warenkorb-Schaltfläche“ per Drag & Drop an die gewünschte Stelle im Produktmodul.

Klicken Sie nach dem Hinzufügen auf das Element, um auf die Einstellungen im linke SeitenleisteDie Konfiguration ist in zwei Hauptregisterkarten unterteilt: Einstellungen , Erweitert.

Konfigurieren der Registerkarte „Einstellungen“

Layout

Wählen Sie die Layouteinstellungen der Schaltfläche so aus, dass sie zu Ihrem Seitendesign passen.

Produktquelle

Geben Sie an, mit welchem Produkt die Schaltfläche verknüpft werden soll. Dadurch wird sichergestellt, dass die Schaltfläche ordnungsgemäß funktioniert, indem sie mit den richtigen Produktdaten synchronisiert wird.

Größe

• Länge: Legen Sie die Schaltflächenbreite fest.
• Höhe: Passen Sie die Höhe der Schaltfläche an.
• Polsterung: Definieren Sie die Polsterung innerhalb der Schaltfläche.

Hintergrund

Passen Sie die Hintergrundfarbe der Schaltfläche mithilfe der Farbauswahl an. So können Sie die Schaltfläche an Ihren Markenstil anpassen.

Shape

• Grenze: Wählen Sie den Rahmenstil, z. B. „Linie“ oder „Durchgehend“, um der Schaltfläche eine visuelle Kontur zu verleihen.
• CORNER: Wählen Sie aus, wie abgerundet die Ecken sein sollen (Scharf, Abgerundet oder Pille).
• Shadow: Wenden Sie einen Schlagschatten an und passen Sie ihn an, um der Schaltfläche ein erhabenes oder geschichtetes Aussehen zu verleihen.

Icon

• Symbol auswählen: Wählen Sie ein Symbol aus, das auf der Schaltfläche angezeigt werden soll, oder laden Sie eine neue SVG-Datei hoch.
• Symbolposition: Positionieren Sie das Symbol auf der linken oder rechten Seite des Textes.
• Abstand: Passen Sie den Abstand zwischen Symbol und Text an.

Text

• Inhalt: Sie können den auf der Schaltfläche „Warenkorb“ angezeigten Text vollständig anpassen. Der Standardtext lautet „IN DEN WARENKORB“, Sie können ihn jedoch in einen beliebigen Text ändern, der Ihrem Design und Ihren Zielen entspricht.
• Stile: Wählen Sie aus den verfügbaren vordefinierten Stilen einen Stil für die Beschriftung der Warenkorbschaltfläche aus.
• Schriftart: Wählen Sie die Schriftart für Ihre Beschriftung aus dem Dropdown-Menü. Falls Sie andere Schriftarten verwenden möchten, lesen Sie die Anleitung zur Verwendung einer benutzerdefinierte Schriftart hier.
• Formate: Bestimmen Sie Ihre bevorzugte Schriftgröße.

Klicken Sie auf Schaltfläche „Mehr anzeigen“ um weitere Anpassungsoptionen anzuzeigen. 

• Font Gewicht: Wählen Sie die gewünschte Schriftstärke aus dem bereitgestellten Dropdown-Menü.
• Linienhöhe: Passen Sie die Höhe des Textes an, indem Sie einen Prozentwert angeben.
• Buchstaben-Abstand: Ändern Sie den Abstand zwischen Buchstaben, indem Sie einen Wert in Pixeln eingeben.
• Transformieren: Wandeln Sie den Text nach Wunsch in Großbuchstaben, Kleinbuchstaben oder Großbuchstaben um.

Separator

Aktivieren Sie diesen Schalter, um eine visuelle Trennlinie zwischen Text und Preis innerhalb der Schaltfläche hinzuzufügen. Sie können zwischen Linien-, Punkt- und Balkenstilen wählen.

Preis

Aktivieren Sie diese Option, um den Preis des Produkts auf der Schaltfläche anzuzeigen.

• Layout: Wählen Sie das bevorzugte Layout für die Preisanzeige.
• Produktpreis: Passen Sie an, wie der aktuelle Preis angezeigt wird.
• Vergleichspreis: Optional den ursprünglichen (durchgestrichenen) Preis für Werbeaktionen anzeigen.

Hover-Effekt

Passen Sie das Hover-Verhalten der Schaltfläche an.

• Hintergrund: Legen Sie beim Schweben eine neue Hintergrundfarbe fest.
• Textfarbe: Ändern Sie die Textfarbe beim Hovern für eine bessere Interaktivität.

Nicht vorrätig

Mit dieser Option können Sie die Anzeige der Warenkorbschaltfläche anpassen, wenn der Lagerbestand des Produkts 0 erreicht. Durch Aktivieren der Custom Style Umschalten, werden zusätzliche Gestaltungsoptionen für die Schaltfläche angezeigt, mit denen Sie ihr Erscheinungsbild weiter anpassen können.

Weiterleiten an

Diese Option definiert, was passieren wird nachdem ein Kunde geklickt hat Klicken Sie auf die Schaltfläche „In den Warenkorb“. Sie können zwischen folgenden Aktionen wählen:

• Weiter einkaufen: Keine Weiterleitung. Der Kunde bleibt auf der aktuellen Seite, nachdem er das Produkt in den Warenkorb gelegt hat.
• Zum Checkout gehenLeitet den Kunden zur Standard-Checkout-Seite von Shopify weiter. mit den Artikeln, die sich im Warenkorb befinden (falls vorhanden).
• Warenkorb öffnen: Öffnet die Warenkorbschublade oder die Warenkorbseite, abhängig von Ihren Designeinstellungen.
• URL öffnen: Leitet den Benutzer zu einer bestimmten URL weiter. Es erscheint ein neues Eingabefeld, in das Sie den Ziellink einfügen können.

Nutzen Sie diese Einstellung strategisch, um Kunden durch Ihren Conversion-Funnel zu führen. Führen Sie sie beispielsweise für Cross-Selling-Möglichkeiten zum Warenkorb oder bei Impulskäufen direkt zur Kasse.

Ausrichten

Wählen Sie die Ausrichtung der Schaltfläche innerhalb ihres Abschnitts: links, mittig oder rechts.

Hinweis: Die horizontale Ausrichtung ist deaktiviert, wenn die Breite auf 100 % oder mehr eingestellt ist.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zur Registerkarte „Erweitert“ und folgen Sie den Anweisungen in Dieser Artikel.

Mit Abonnements verwenden (Abonnement in den Warenkorb legen)

Bevor du beginnst

• Installieren und konfigurieren Sie ein Abonnement-App (z.B, Appstle, Aufladen, Subify, Sealusw.) und setzen Kaufoptionen (Verkaufspläne) für das Produkt in Shopify Admin.
• Stellen Sie sicher, dass die App Abonnement-Widget (Umschaltung zwischen Einmal- und Abonnement, Lieferintervall usw.) ist für dieses Produkt aktiviert.

In GemPages einrichten

Schritt 1: Legen Sie die Produkt Element, Variantenselektoren, die Abonnement-Widgetund die Schaltfläche „Warenkorb“ innerhalb desselben Produktmoduls (Reihenfolge: Selektoren → Widget → In den Warenkorb).

Schritt 2: In Schaltfläche „Warenkorb“ > Einstellungen > Produktquelle, bestätigen Sie, dass es auf die gleiches Produkt als Widget.

Schritt 3: In Weiterleiten an, vorziehen Warenkorb öffnen or Weiter einkaufen damit der Verkaufsplan vor dem Bezahlvorgang ordnungsgemäß angehängt wird.

Schritt 4: Speichern und pVeröffentlichen Sie Ihre Seite. Wählen Sie auf der Live-Seite eine Abonnement im Widget und klicken Sie auf In den Warenkorb um zu überprüfen, ob die Einkaufswagenposition als Abonnement.

Wichtige Notizen

• Widget-Auswahl steuert das Verhalten: wenn Abonnieren ausgewählt ist, enthält die Warenkorbzeile eine Verkaufsplan-ID. Wenn Einmal, tut es nicht.
• Platzieren Sie das Abonnement-Widget und die Schaltfläche „Warenkorb“ im selben Produktmodul (Widget über der Schaltfläche).
• Die Schaltfläche zeigt den Variantenpreis an; Abonnementrabatte/-bezeichnungen werden im Widget oder in der Warenkorbschublade/an der Kasse angezeigt.
• Bevorzugen "Warenkorb öffnen" oder "Weiter einkaufen" für die Weiterleiten an Abschnitt, sodass der Verkaufsplan vor dem Bezahlen angehängt wird.
• Die ausgewählte Variante muss zum Verkaufsplan des Produkts gehören.
• Verwenden Sie für Warenkorbaktionen die Schaltfläche „Produktkorb“, nicht das allgemeine Schaltflächenelement.

Fehlerbehebung bei Problemen mit dem Hinzufügen zum Warenkorb in GemPages

Wenn Ihre Schaltfläche „In den Warenkorb“ in GemPages nicht wie erwartet funktioniert, finden Sie hier einige häufige Probleme und deren Lösungen:

1. Stellen Sie sicher, dass die Schaltfläche in einem Produktmodul verschachtelt ist

Das Schaltfläche „Warenkorb“ muss innerhalb eines Produktmodul um korrekt zu funktionieren. Wenn es sich außerhalb dieses Moduls befindet, funktioniert es nicht.​

Lösung:

• Ziehen Sie im GemPages Editor per Drag & Drop eine Produktmodul auf Ihre Seite.
• Platzieren Sie dann die Schaltfläche „Warenkorb“ innerhalb dieses Moduls.​

Durch diese Einrichtung wird sichergestellt, dass die Schaltfläche korrekt mit den Produktdaten verknüpft ist.

 2. Konfigurieren Sie die Aktion der Schaltfläche richtig

Stellen Sie sicher, dass die Schaltflächenaktion auf „In den Warenkorb“ eingestellt ist. Wenn sie auf eine andere Aktion, wie z. B. „Link zur Seite“, eingestellt ist, werden keine Produkte in den Warenkorb gelegt.

Lösung:

• Wähle aus In den Warenkorb Schaltfläche im GemPages-Editor.
• Stellen Sie im Einstellungsbereich rechts sicher, dass die Aktion auf "In den Warenkorb legen."​

Diese Konfiguration stellt sicher, dass die Schaltfläche die gewünschte Aktion ausführt.

 3. Vermeiden Sie die Verwendung des generischen „Button“-Elements für Warenkorbaktionen

GemPages bietet eine generische Taste Element, ist aber nicht für Warenkorbfunktionen konzipiert. Die Verwendung zum Hinzufügen von Produkten zum Warenkorb kann zu Problemen führen.​

Lösung: Verwenden Sie die Schaltfläche „Warenkorb“ anstelle des generischen Button-Elements.​

Diese speziellen Schaltflächen sind auf Warenkorbaktionen zugeschnitten und gewährleisten die ordnungsgemäße Funktionalität.

4. Produktsichtbarkeit und -verfügbarkeit prüfen

Wenn das Produkt im Vertriebskanal des Online-Shops nicht aktiv oder verfügbar ist, funktioniert die Schaltfläche „In den Warenkorb“ nicht.​

Lösung:

• Navigieren Sie in Ihrem Shopify-Adminbereich zu Produkte und wählen Sie das entsprechende Produkt aus.
• Stellen Sie sicher, dass der Produktstatus Aktives.
• Der Vertriebskanäle und Apps, bestätige das Online-Shop ist ausgewählt.​

Dadurch wird sichergestellt, dass das Produkt in Ihrem Geschäft zum Kauf verfügbar ist.

Häufig gestellte Fragen zum Element „In den Warenkorb“

1. Warum kann ich in einem gespeicherten Designbereich keinen „In den Warenkorb“-Button hinzufügen?

Gespeicherte Themenabschnitte in GemPages können nicht bearbeitet werden, und es können keine neuen Elemente darin hinzugefügt werden, einschließlich der Schaltfläche „In den Warenkorb“. Um eine Schaltfläche „In den Warenkorb“ zu verwenden, erstellen Sie einen Neuer AbschnittFügen Sie alle benötigten Elemente ein (Produkt → In den Warenkorb), dann Den gesamten Abschnitt speichern als neuer, wiederverwendbarer Themenbereich.

Erfahren Sie mehr über den Themenbereich: GemPages Themenbereich & FAQs.

2. Warum wird der Preis nicht auf meinem „In den Warenkorb“-Button angezeigt?

Stellen Sie sicher, dass die Preis Die Option ist im Tab „Einstellungen“ aktiviert. Falls Ihr Produkt keinen Preis hat oder nicht verfügbar ist, wird der Preis möglicherweise nicht angezeigt.

3. Warum sieht die Schaltfläche „In den Warenkorb“ beim Überfahren mit der Maus anders aus?

Prüfen Sie die Hover-Effekt Einstellungen. Sie können unterschiedliche Hintergrund- oder Textfarben für den Hover-Zustand konfiguriert haben.

4. Warum ist die Ausrichtungsoption deaktiviert?

Die Ausrichtung ist deaktiviert, wenn die Schaltflächenbreite auf eingestellt ist. 100% oder größer, da das Element bereits die gesamte verfügbare Breite einnimmt.

5. Kann ich den „In den Warenkorb“-Button in einem Popup platzieren?

• Verwenden regulär Schaltflächenelement um das Popup zu öffnen.
• Der eigentliche „In den Warenkorb“-Button sollte auf der Hauptproduktseite bleiben.

6. Wie kann ich erreichen, dass sich nach dem Hinzufügen zum Warenkorb ein Slider-Warenkorb öffnet?

Sie benötigen keinen benutzerdefinierten Code – einstellen Warenkorb-Schaltfläche → Weiterleitung zu → Warenkorb öffnenKonfigurieren Sie anschließend den Warenkorb oder den Slider Ihres Themes wie folgt: dem Leitfaden.