Sticky-In-den-Warenkorb-Element

Über das Sticky Add-to-Cart-Element

A Sticky-Add-to-Cart-Button auf einer Webseite ist eine Schaltfläche, die sichtbar bleibt und „Stöcke“ beim Scrollen auf dem Bildschirm. Es ist ein wertvolles UI-Element auf E-Commerce-Websites, das das Einkaufserlebnis verbessert, indem es einfachen Zugriff auf den Warenkorb bietet und den Bezahlvorgang optimiert. 

Es trägt zu einem besseren Engagement der Benutzer, verbesserten Konversionsraten und einer allgemeinen Benutzerzufriedenheit bei, indem es Reibungspunkte beim Online-Einkauf reduziert.

Wie fügt man seiner Seite ein Sticky-Add-to-Cart-Element hinzu?

Um eine Sticky-Add-to-Cart-Funktion in GemPages Editor v7 zu integrieren, befolgen Sie bitte diese Schritte:

Schritt 1: Besuchen Sie das GemPages Dashboard > Seiten > Kollektion, und klicken Sie dann auf die Seite Ihrer Zielsammlung, um den Editor zu finden.

Schritt 2: Suchen Sie in der linken Seitenleiste nach dem "Sticky In den Warenkorb" und ziehen Sie es per Drag & Drop auf Ihre Seite.

Wichtig: Das Sticky-Add-to-Cart-Element kann nur in der zuerst or letzte Abschnitt Ihrer Seite.

Diese Einschränkung ist beabsichtigt und trägt dazu bei, dass die fixierte Leiste auf verschiedenen Geräten und bei unterschiedlichem Scrollverhalten korrekt funktioniert. Da das Element beim Scrollen fixiert bleiben soll, könnte eine Platzierung in der Seitenmitte zu Layoutkonflikten, Überlappungen oder inkonsistenter Darstellung mit anderen Bereichen führen.

Um ein stabiles und reibungsloses Einkaufserlebnis zu gewährleisten, unterstützt GemPages die Platzierung des Sticky Add-to-Cart-Buttons nur im obersten oder untersten Bereich der Seitenstruktur.

Standardmäßig ist das Sticky-Add-to-Cart-Element mit den folgenden wichtigen Komponenten vorinstalliert:

• Produktmodul (Produktbild, Produkttitel und Produktpreis)
• Produktvarianten & Swatches
• Produktmenge
• Produkt in den Warenkorb legen

Dieses vorgefertigte Setup stellt sicher, dass Ihre Sticky Bar sofort einsatzbereit ist. Sie können einfach "Speichern" , "Veröffentlichen" die Seite, und die Sticky-Funktion „In den Warenkorb“ ist auf Ihrer Live-Seite bereit. 

Für eine nahtlose Integration in Ihr gesamtes Seitendesign haben Sie jedoch die volle Flexibilität, sowohl das Sticky Add-to-Cart selbst als auch seine untergeordneten Elemente anzupassen.

Konfigurieren der Registerkarte „Einstellungen“

Wenn Sie die auswählen Sticky Add-to-Cart-Element, finden Sie alle Konfigurationsoptionen bequem in der linken Seitenleiste, darunter:

Layout

Von dem Layout Im Abschnitt „In den Warenkorb“ können Sie die Position der klebrigen Schaltfläche „In den Warenkorb“ auf Ihrer Seite auswählen:

• Untere Position
• Oben auf der Seite (funktioniert wie eine klebrige benutzerdefinierte Kopfzeile mit Warenkorb-Schaltfläche)

Manche Händler möchten einen „In den Warenkorb“-Button in ihrer Kopfzeile platzieren, damit dieser beim Scrollen sichtbar bleibt. Da für die Funktion „In den Warenkorb“ ein Produktmodul erforderlich ist (das in einer Theme-Kopfzeile nicht unterstützt wird), ist die beste Alternative die Verwendung des Sticky Add-to-Cart-Element.

Indem Sie die Layoutposition auf Oben, es verhält sich wie eine Kopfzeilen-Warenkorbschaltfläche und ist immer zugänglich, ohne das Seitendesign zu stören.

Größe

Das Größe Im Abschnitt „In den Warenkorb“ können Sie die Gesamtabmessungen Ihrer Sticky-Schaltfläche steuern und sicherstellen, dass sie nahtlos in Ihr Seitenlayout passt.

Breite: Passen Sie die Breite des Elements an. Sie können einen bestimmten Wert (in Pixeln) in das Feld eingeben oder aus den verfügbaren Optionen auswählen:

• Inhalt anpassen (Auto): Die Schaltfläche wird automatisch an die Größe ihres Inhalts (Text + Symbol) angepasst.
• Voll (100 %): Die Schaltfläche wird erweitert, sodass sie die gesamte Breite ihres Containers ausfüllt und auf der Seite besser hervorgehoben wird.

Polsterung: Die Polsterung definiert den internen Abstand zwischen dem Inhalt der Schaltfläche (Text, Symbol, Preis) und ihren Rändern.

Hintergrund

Stellen Sie ein solide or Farbverlaufshintergrund für Ihren Sticky Add-to-Cart. Sie können die Farbe anpassen durch:

• Geben Sie den Farbcode ein
• Ziehen Sie die Farbfelder oder wählen Sie sie aus.
• Verwenden Sie die Farbauswahl, um eine beliebige Farbe auf Ihrer aktuellen Seite auszuwählen
• Wählen Sie eine der Aktuelle Farben  or Empfohlen für Sie Listen

Wenn Sie es vorziehen Bildhintergrund, laden Sie ein neues Bild hoch oder wählen Sie es aus Ihrer Galerie aus, um es als Hintergrund des Elements festzulegen.

Shape

• Grenze: Sie können die Rahmenfarbe, -stärke und -kontur ändern.
• CORNER: Die Abschnittsecke kann quadratisch, rund oder pillenförmig sein. Sie können auch einen genauen Radius eingeben, um die Ecke des Elements nach Ihren Wünschen anzupassen.
• Shadow: Fügen Sie einen Schatten hinzu und passen Sie seine Anzeige an (Größe, Farbe, Unschärfe und Entfernung).

Anzeigeoption

Legen Sie die Bedingung fest, wann Ihr Sticky-Add-to-Cart auf Ihrer Seite angezeigt wird. Sie können zwei Optionen wählen:

• Immer anzeigen: Der Sticky-Add-to-Cart-Button bleibt beim Scrollen durch die Seite stets sichtbar. Dies gewährleistet einen schnellen Zugriff auf den Warenkorb und reduziert Reibungsverluste während des Einkaufs.
• Nach dem ersten Warenkorb-Button: Dieses Element wird erst angezeigt, nachdem die erste Standardschaltfläche „In den Warenkorb“ angezeigt wird. Diese Option trägt dazu bei, Redundanz am oberen Seitenrand zu vermeiden und verleiht der Schaltfläche mehr Kontext.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zu Erweitert und folgen Sie den Anweisungen in Dieser Artikel.

Häufig gestellte Fragen zum Sticky-Add-to-Cart-Element

1. Ist die Funktion „Sticky Add-to-Cart“ auf Mobilgeräten responsiv?

Ja. Die standardmäßige Funktion „Sticky Add-to-Cart“ ist vollständig responsiv. Auf Mobilgeräten wird sie in einem vereinfachten Format angezeigt (normalerweise nur die Schaltfläche), um Platz zu sparen und ein übersichtliches Layout zu gewährleisten.

2. Warum wird mein Sticky Add-to-Cart nicht auf der Live-Seite angezeigt?

Eine häufige Ursache ist, dass Anzeigeoption eingestellt ist „Nach dem ersten Warenkorb-Button“ während Ihre Seite enthält keine Schaltfläche „In den Warenkorb“ oberhalb des Falzes. In diesem Fall wird die Sticky Bar nie angezeigt.

Wie repariert man:

• Ändern Sie die Anzeigeoption zu "Immer zeigen" or
• Fügen Sie ein ein Schaltfläche zum Warenkorb hinzufügen zu Ihrer Seite, wenn Sie die Anzeigeoption „Nach der Schaltfläche „Erster Warenkorb““ bevorzugen.

3. Kann ich für die Sticky-In-den-Warenkorb-Funktion einen Bildhintergrund verwenden?

Ja. Im Bereich „Hintergrund“ können Sie entweder eine Vollton-/Farbverlaufsfarbe festlegen oder ein Bild hochladen, das als Hintergrund für die Schaltfläche verwendet werden soll.

4. Wie kann ich die Form des Sticky Add-to-Cart ändern?

Im Shape Einstellungen können Sie die Grenze, Eckenradius (quadratisch, rund oder pillenförmig) und Schatten.

5. Die Funktion „In den Warenkorb“ wird auf Mobilgeräten nicht angezeigt. Was kann ich tun?

Dies kann mehrere Gründe haben:

• Sichtbarkeitseinstellungen: Überprüfen Sie die Einstellungen des Elements auf der Registerkarte „Erweitert“ und stellen Sie sicher, dass es auf Mobilgeräten nicht ausgeblendet ist.
• Anzeigeoption: Wenn eingestellt auf Nach dem ersten Warenkorb-Button, Ihr mobiles Layout jedoch keine standardmäßige Schaltfläche „In den Warenkorb“ oberhalb des Falzes enthält, wird die Sticky Bar nicht angezeigt. Wechseln Sie zu Immer zeigen.
• Layoutunterschiede auf Mobilgeräten: Auf Smartphones wird die Funktion „In den Warenkorb“ möglicherweise vereinfacht angezeigt (nur Schaltfläche). Scrollen Sie nach unten, um sicherzustellen, dass sie nicht minimiert ist.

6. Kann die Funktion „Sticky Add-to-Cart“ die Warenkorb-Schaltfläche in meinem Theme-Header ersetzen?

Ja, in der Praxis. Wenn Ihr Theme-Header keinen Warenkorb-Button hat, aktivieren Sie einfach die Funktion „In den Warenkorb“ oben auf der Seite. Sie bietet die gleiche Funktionalität und ist beim Scrollen immer sichtbar.

7. Kann ich das Sticky Add-to-Cart-Element als normalen Sticky-Button (nicht als "In den Warenkorb") verwenden?

Das Sticky-Add-to-Cart-Element ist speziell für Produkt-Add-to-Cart-Aktionen konzipiert. Es erfordert einen Produktkontext und ist nicht als allgemeiner CTA-Button gedacht.

Wenn Sie jedoch einen fixierten CTA-Button benötigen, der auf eine andere Seite (z. B. eine Kollektionsseite, eine Landingpage usw.) verlinkt, empfehlen wir Ihnen, alle enthaltenen Elemente innerhalb des „In den Warenkorb“-Elements zu entfernen und anschließend den Standard-CTA-Button einzufügen. Schaltflächenelement stattdessen.

Einblick in das diese Videoanleitung für weitere Anweisungen.