Button Vorlagen

Bedeutung und Nutzen von Buttons, Auswahl von verschiedenen Button Vorlagen, Code

Buttonvorlagen sind wichtig für eine Verkaufsseite, da sie den Call-to-Action (Handlungsaufforderung) hervorheben und die Conversion-Rate steigern. Sie bieten eine klare und ansprechende visuelle Darstellung, die BesucherInnen zum Klicken und zur gewünschten Aktion anregt.

Die Verwendung von Buttonvorlagen trägt maßgeblich zur Verbesserung der BenutzerInnenfreundlichkeit bei. Durch eine intuitive Gestaltung können BesucherInnen sofort erkennen, welche Schritte sie auf der Seite unternehmen können, um das gewünschte Produkt oder die gewünschte Dienstleistung zu erwerben. Die visuelle Hervorhebung und die klare Ausrichtung der Handlungsaufforderung sorgen für ein nahtloses und angenehmes NutzeInnenrerlebnis, wodurch die Wahrscheinlichkeit steigt, dass Interessierte zu tatsächlichen Käuferinnen und Käufern werden.

Ein Beispiel für eine Buttonvorlage könnte ein auffälliger "Jetzt kaufen" -Button mit einem ansprechenden Design und kontrastreichen Farben sein.

Zu jeder Button Color findest du folgende Vorlagen:

4 verschiedenen Button-Text Varianten
jeweils in abgerundeter bzw. eckiger Form
jeweils mit bzw. ohne Tagline (Kreditkarten Icons etc.)

4 verschiedenen Button-Text Varianten

jeweils in abgerundeter bzw. eckiger Form

jeweils mit bzw. ohne Tagline (Kreditkarten Icons etc.)

Außerdem findest du unter jedem Button den dazugehörenden Einbettungscode als Vorlage, um ihn auf deiner Webseite einzufügen.

Einbettungscode

Kopiere den Code unter dem Button, den du verwenden willst
Füge ihn auf deine Verkaufsseite ein (falls du einen Page-Builder verwendest, benutze dafür ein „HTML Code“ -Element)
Standardmäßig haben die Buttons eine Breite von 320px. Deshalb findest du im Einbettungstext: style = "max-width: 320px;" Wenn du eine breitere Variante des Buttons brauchst, dann einfach hier die Breite! "Die maximale mögliche Breite bei optimaler Qualität ist 812px."
Wichtig! Ersetze das Wort "PRODUKT-ID" mit der Produkt-ID deines Produktes (das ist die 8-stellige Buchstaben/Ziffern-Kombination in der Checkout URL deines Produktes)
(optional) Wenn du den Button zentrierst, wird "<center>" vor und "</center>" hinter dem Einbettungscode (ohne Leerzeichen) angezeigt. Beispiel: <center><a href="https://www.copecart.com/products/PRODUKT-ID/checkout"><img src="https://s3.eu-central-1.amazonaws.com/copecart-static/button/checkout+mit+copecart/rund+blau.png "></a></center>
(optional) Wenn du willst, dass du deine CopeCart Checkout-Seite in einem neuen Tab öffnest, dann setze target = "_blank" direkt hinter den Link in deinem Einbettungscode. Beispiel: <a href="https://www.copecart.com/products/PRODUKT-ID/checkout" target="_blank"> ....

Kopiere den Code unter dem Button, den du verwenden willst

Füge ihn auf deine Verkaufsseite ein (falls du einen Page-Builder verwendest, benutze dafür ein „HTML Code“ -Element)

Standardmäßig haben die Buttons eine Breite von 320px. Deshalb findest du im Einbettungstext: style = "max-width: 320px;" Wenn du eine breitere Variante des Buttons brauchst, dann einfach hier die Breite! "Die maximale mögliche Breite bei optimaler Qualität ist 812px."

Wichtig! Ersetze das Wort "PRODUKT-ID" mit der Produkt-ID deines Produktes (das ist die 8-stellige Buchstaben/Ziffern-Kombination in der Checkout URL deines Produktes)

(optional) Wenn du den Button zentrierst, wird "<center>" vor und "</center>" hinter dem Einbettungscode (ohne Leerzeichen) angezeigt. Beispiel: <center><a href="https://www.copecart.com/products/PRODUKT-ID/checkout"><img src="https://s3.eu-central-1.amazonaws.com/copecart-static/button/checkout+mit+copecart/rund+blau.png "></a></center>

(optional) Wenn du willst, dass du deine CopeCart Checkout-Seite in einem neuen Tab öffnest, dann setze target = "_blank" direkt hinter den Link in deinem Einbettungscode. Beispiel: <a href="https://www.copecart.com/products/PRODUKT-ID/checkout" target="_blank"> ....

Du kannst die Buttons natürlich auch jederzeit downloaden (Rechte Maustaste + „Speichern unter“), und deinem Bedarf entsprechend weiterverwenden.

Blau | Rund