Schaltfläche „In den Warenkorb“ über dem Produktbild

Warum einen Warenkorb-Button über dem Bild hinzufügen?

Platzieren der In den Warenkorb Der Button direkt auf dem Produktbild hilft Kunden, schneller und bequemer einzukaufen. 

Anstatt nach unten zu scrollen, um die Schaltfläche zu finden, können sie Artikel mit einem Klick sofort in den Warenkorb legen.

Vorteile:

• Reibung reduzieren: Kunden müssen nicht unter den Produktdetails nach dem Warenkorb-Button suchen.
• Impulskäufe fördern: Eine Schnellhinzufügeoption erleichtert Kunden das Hinzufügen mehrerer Produkte auf einmal.
• Verbessern Sie das mobile Erlebnis: Auf kleinen Bildschirmen spart eine Schaltflächenüberlagerung Platz und sorgt für ein übersichtliches Layout.
• Highlight-Aktionen: Sie können den Button so gestalten, dass er zu saisonalen Aktionen oder Rabatten passt, sodass er auf dem Bild hervorsticht.

Wie wird der Warenkorb-Button über dem Produktbild angezeigt?

In GemPages v7 können Sie Ihren eigenen Produktlistenabschnitt mit einer Schaltfläche „In den Warenkorb“ über dem Bild gestalten.

Navigieren Sie zunächst in Ihrem Shopify-Adminbereich zu GemPages Dashboard > SeitenKlicken Sie auf die Zielseite, um den Editor zu öffnen.

Führen Sie dann die folgenden Schritte aus:

Schritt 1: Fügen Sie Ihrer Seite ein Produktlistenelement hinzu

• Suchen Sie in der linken Seitenleiste nach dem Produktlistenelement, und ziehen Sie das Element dann per Drag & Drop auf Ihre Seite.

• Um ein übersichtliches Design zu gewährleisten, können Sie mehrere im Produktlistenelement verschachtelte untergeordnete Elemente löschen. 

Entfernen Sie beispielsweise die Produktvarianten und Farbmuster, indem Sie auf das Element klicken und auf die Kasten klicken.

Schritt 2: Fügen Sie dem Produktlistenelement ein Zeilenelement hinzu

• Fügen Sie in der linken Seitenleiste ein Zeilenelement zu der Produktliste, die Sie in Schritt 1 erstellt haben.

• Ziehen Sie das Produktbild und die Elemente der Schaltfläche „In den Warenkorb“ per Drag & Drop in diese Zeile.

Schritt 3: Konfigurieren Sie die Position des Warenkorb-Buttons

• Klicken Sie auf das Schaltflächenelement „In den Warenkorb“, um das Einstellungsfenster zu öffnen.
• Gehen Sie zur Erweitert Registerkarte> Position.

• Wählen Sie aus der Dropdown-Liste aus Absolute Position.

Dann befindet sich der Warenkorb-Button über dem Produktbild.

• Setze die Unten = 0 um die Schaltfläche unten im Bild anzuzeigen.

• Gehen Sie zurück zu den Einstellungen , um die Sichtbarkeit der Schaltfläche nach Wunsch zu konfigurieren. Sie können beispielsweise den Text entfernen, die Hintergrundfarbe ändern oder den Hover-Status einrichten.

Weitere Informationen zur Konfiguration des Elements „In den Warenkorb“ finden Sie unter Dieser Artikel.

Schritt 4: Speichern und veröffentlichen

• Nutze einfach das Vorschau , um die Ergebnisse zu überprüfen, indem Sie auf Auge Symbol in der oberen Leiste.
• Wenn alles in Ordnung ist, Speichern die Änderungen und drücken Sie die Veröffentlichen Schaltfläche, um Ihre Seite erneut zu veröffentlichen.

Ergebnis: