Skip to main content

​
Einführung

Das Hinzufügen eines Schloss-Symbols zu deinem Checkout-Button ist eine einfache, aber effektive Möglichkeit, das Vertrauen deiner Kunden zu stärken, indem du zeigst, dass ihre Zahlungsinformationen sicher sind. Dieses vertraute Symbol beruhigt Kunden hinsichtlich ihres Datenschutzes und lässt sie sich beim Checkout-Prozess wohler fühlen. In diesem Tutorial zeige ich dir, wie du mit CSS ein Schloss-Symbol zu deinem Checkout-Button hinzufügst, um die Sicherheit zu erhöhen und das gesamte Nutzererlebnis zu verbessern. Diese Schritte sind ideal für Store-Betreiber oder Entwickler mit grundlegenden CSS-Kenntnissen. Mit diesem kleinen, aber wirkungsvollen visuellen Hinweis kannst du den Upcart-Checkout-Button an das Design deiner Website anpassen, Vertrauen aufbauen und Kunden ermutigen, ihre Käufe abzuschließen. Los geht’s!

​
Erste Schritte: Wähle ein Schloss-Symbol

Zuerst musst du ein Schloss-Symbol auswählen, das du zu deinem Store hinzufügen möchtest. Unten stellen wir dir einige zur Verfügung, aber du kannst gerne dein eigenes verwenden. Um dein eigenes zu nutzen, lade es im Bereich „Files“ deines Shopify-Stores unter Settings > Files hoch und kopiere seine URL. In Upcart gibt es kein Symbol-Feld für den Checkout-Button. Stattdessen fügst du ein HTML-Bild-Tag in das Feld Checkout button text ein, das HTML rendert — nimm eines der Snippets unten und ersetze dessen src durch deine eigene URL.

​
Hier sind die Schloss-Symbole, die wir für dich zur Auswahl haben:

Hinzuzufügendes HTML: Weißes gefülltes Vorhängeschloss-Symbol neben dem Text Checkout auf einem dunklen Button
Hinzuzufügendes HTML: Weißes Vorhängeschloss-Symbol mit Umriss neben dem Text Checkout auf einem dunklen Button
Hinzuzufügendes HTML: Weißes umrandetes Vorhängeschloss mit Schlüsselloch neben Checkout auf einem dunklen Button
Hinzuzufügendes HTML: Schwarzes gefülltes Vorhängeschloss-Symbol neben dem Text Checkout auf einem hellblauen Button
Hinzuzufügendes HTML: Schwarzes Vorhängeschloss mit Schlüsselloch neben Checkout auf einem hellblauen Button

​
Das Schloss-Symbol platzieren:

Nachdem du das Schloss-Symbol ausgewählt hast, gehe zu Manage All Carts > Edit > Settings > Edit copy und suche das Feld Checkout button text. Du kannst es entweder vor oder nach dem Wort „Checkout“ einfügen. Außerdem kannst du hier das Wort „Checkout“ in etwas anderes ändern, zum Beispiel „Secure Checkout“ oder Ähnliches. Bearbeiten des Checkout-Button-Texts in Upcart, um das Schloss-Symbol zu platzieren

​
Auf die Custom-CSS-Einstellungen zugreifen

Um mit der Anpassung des CSS für deinen Upcart zu beginnen, führe die folgenden Schritte aus:
  1. Öffne die Upcart-App in deinem Dashboard.
  2. Navigiere zum Cart Editor.
  3. Öffne Settings und wähle den Tab Custom CSS. Settings ist eine Tab-Reihe statt einer langen Seite — wenn du Custom CSS nicht siehst, befindet es sich hinter More settings.

​
Benutzerdefiniertes CSS anwenden, um das Schloss-Symbol anzuzeigen:

Sobald du im Custom-CSS-Bereich bist, kopiere den folgenden Code und füge ihn ein, um dein Schloss-Symbol anzuzeigen und zu platzieren. Beachte bitte: Je größer die Padding-Zahl, desto kleiner wird das Symbol.
  1. Suche den CSS-Eingabebereich.
  2. Kopiere den folgenden Code und füge ihn in den CSS-Eingabebereich ein:
  3. Passe height unter .upcart-custom-lock-icon an, um die Größe des Symbols zu ändern. Für ein größeres Schloss-Symbol empfehlen wir 16px oder 20px

​
Fazit

Mit diesen Schritten hast du erfolgreich ein Schloss-Symbol zu deinem Checkout-Button hinzugefügt, sodass sich deine Kunden während ihres Kaufs sicherer und selbstbewusster fühlen. Diese kleine Änderung kann einen großen Unterschied darin machen, wie dein Store wahrgenommen wird, Vertrauen aufbauen und das gesamte Einkaufserlebnis verbessern.

​
Brauchst du weitere Hilfe?

Wenn du Unterstützung bei Anpassungen benötigst, empfehlen wir dir, einen Shopify-Experten zum Hinzufügen von HTML, CSS und sogar JavaScript zu deinem Cart Drawer zu konsultieren. Shopify-Experten ansehen