Wenn Sie erfahren möchten, wie Sie Ihren Shopify-Buttons einen Rahmen (Stroke) hinzufügen können, um das Erscheinungsbild Ihres Shops und Ihre Konversionsrate zu verbessern, dann ist diese Schritt-für-Schritt-Anleitung genau das Richtige für Sie. In dieser Anleitung zeigen wir Ihnen, wie Sie Ihren Shopify-Store-Buttons Rahmen oder Striche hinzufügen können.
Bevor Sie Ihrem Shopify-Button einen Rahmen hinzufügen, sollten Sie die Bedeutung von Buttons im E-Commerce kennen.
Kontaktieren Sie uns für jegliche Shopify-Hilfe
Bedeutung des Button-Designs im E-Commerce-Geschäft
Ein schlechtes Button-Design kann die Konversionsrate Ihrer E-Commerce-Website senken, da es sich direkt auf die Benutzererfahrung auswirkt. Sie sollten Ihre Buttons aus den folgenden Hauptgründen ordnungsgemäß gestalten:
1. Wichtige Punkte der User Journey
Buttons sind die wichtigsten Punkte der User Journey auf einer E-Commerce-Website. Sie leiten Nutzer dazu an, bestimmte Aktionen auszuführen, wie z.B. „In den Warenkorb legen“, „Jetzt kaufen“ oder „Jetzt herunterladen“.
2. Verbessert die Sichtbarkeit
Ein richtiges Design, eine passende Farbe und die Platzierung eines Buttons auf einer Seite verbessern die Sichtbarkeit und erleichtern das Auffinden und Ausführen von Aktionen. Dies erhöht die Konversionsrate Ihres Shops.
3. Schafft Vertrauen
Ein konsistentes Button-Design und Farbschema schaffen Kundenvertrauen und verbessern den Markenwert.
4. Erstellen Sie eine visuelle Hierarchie
Erstellen Sie eine entsprechende visuelle Hierarchie, um die Wichtigkeit der Aktion anzuzeigen; zum Beispiel sollten primäre Call-to-Action-Buttons prominenter sein als sekundäre Aktionsbuttons.
5. Erhöhen Sie die Konversionsraten
Ein gut gestalteter und platzierter Button kann die Konversionsraten steigern; er erleichtert es, gewünschte Aktionen zu finden und abzuschließen, indem er potenzielle Kunden und Käufer konvertiert.
Was ist der Stroke (Rand) bei Buttons?
Ein Stroke ist ein Designrand; im Grunde handelt es sich um eine Umrandung, die Buttons oder beliebige Formen umschließt. In Shopify können Sie die Farbe, Dicke, den Stil oder die Deckkraft des Strokes ändern. Sie können Strokes verwenden für:
1. Definiert die Form des Buttons
Sie können die Form des Strichs je nach Ihrem Branding von rechteckig, kreisförmig oder abgerundet ändern.
2. Schafft visuellen Kontrast
Der Strich erzeugt einen visuellen Kontrast zwischen Button und Hintergrund. Wenn Sie zum Beispiel einen hellen Farbbutton auf einem weißen Hintergrund haben, erzeugt ein Strich einen visuellen Kontrast.
3. Verbessert die Klickbarkeit
Ein gut gestalteter Strich erhöht die Klickbarkeit des Buttons.
4. Fügt Tiefe und Dimension hinzu
Der Strich verleiht dem Button einen 3D-Effekt, der wie ein echtes oder physisches Element aussieht.
5. Unterstützt Branding und Stil
Sie können Schaltflächen anpassen, um sie an das Branding und die Ästhetik Ihres Shopify-Shops anzupassen.
6. Verbessert die Zugänglichkeit
Wenn Sie Buttons mit Rahmen versehen, können Besucher diese auch bei schlechten Lichtverhältnissen sehen.
Verschiedene Stroke-Stile, die Sie Buttons hinzufügen können
Es gibt verschiedene Stricharten, die Sie Ihrem Shopify Store-Button hinzufügen können. Hier nennen wir einige der Stricharten und ihre Anwendungsfälle.
#1 Durchgehender Rahmen -
Ein durchgehender Strich ist eine ununterbrochene Linie um den Button. Er eignet sich am besten für primäre Call-to-Action-Buttons wie „Jetzt kaufen“, „Absenden“ oder „Herunterladen“.
#2 Gestrichelter oder gepunkteter Rahmen -
Geeignet für sekundäre Aktionen wie „Mehr erfahren“ oder „Optionale Funktionen“.
#3 Doppelter Rahmen -
Diese Art von Strich wird häufig auf Websites von Luxus- oder Premiummarken verwendet, wo ein raffinierteres Erscheinungsbild gewünscht ist.
#4 Farbverlaufsrahmen -
Ideal für moderne E-Commerce-Shops, wie z.B. „Anmelden“ oder „Jetzt starten“.
#5 Eingerückter Rahmen -
Diese Art von Strich wird bei Call-to-Action-Buttons wie „Starten“ oder „Fortfahren“ verwendet.
#6 Umrandungsrahmen -
Wird häufig für sekundäre oder tertiäre Schaltflächen wie „Abbrechen“ oder „Weitere Informationen“ verwendet.
#7 Neon- oder leuchtender Rahmen -
Dieser Strichstil eignet sich am besten für aufmerksamkeitsstarke Buttons auf Unterhaltungs- oder Gaming-Websites, wie z.B. „Jetzt spielen“ oder „Dem Club beitreten“.
#8 Geprägter/gravierter Rahmen -
Dieser Strichstil wird verwendet, um reale Elemente wie Bedienfelder und Dashboards nachzuahmen.
#9 Verwischter Rahmen -
Dieser Strichstil eignet sich für Hintergrundbuttons oder wenn der Fokus auf dem Text oder Symbol im Button liegt und nicht auf dem Button selbst.
#10 Texturierter Rahmen -
Strukturierte Striche werden oft in Nischendesigns verwendet, wie z.B. auf Websites zum Thema Handwerk, rustikalen Oberflächen oder bei High-End-Luxusmarken.
Wenn Sie bis hierher gelesen haben, wissen Sie nun, wie wichtig das Button-Design ist, welche Arten von Strichstilen es gibt und wie sie angewendet werden. Springen Sie jetzt direkt zur Schritt-für-Schritt-Anleitung.
Wie fügt man Shopify-Buttons einen Rahmen (Stroke) hinzu?
Das Hinzufügen eines Strokes (oder Randes) zu Buttons in Shopify kann durch Anpassen des CSS in Ihrem Shopify-Theme erfolgen. Hier ist eine Schritt-für-Schritt-Anleitung:
-
Greifen Sie auf Ihr Shopify-Adminpanel zu
- Melden Sie sich in Ihrem Shopify-Admin-Dashboard an.
-
Zu Designs navigieren
- Gehen Sie zu Online-Shop > Themes.
-
Code bearbeiten
- Im Abschnitt „Aktuelles Theme“ klicken Sie auf Aktionen > Code bearbeiten.
-
Die CSS-Datei finden
- Suchen Sie die CSS-Datei Ihres Themes, normalerweise `theme.css`, `styles.css` oder ähnlich benannt, zu finden unter Assets.
-
CSS für Button Stroke hinzufügen
- Fügen Sie den folgenden CSS-Code am Ende der Datei ein, um allen Buttons einen Rahmen hinzuzufügen:
css
.btn {
border: 2px solid #000; /* Ändern Sie #000 in die Farbe Ihrer Wahl */
padding: 10px 20px; /* Polsterung nach Bedarf anpassen */
border-radius: 5px; /* Border-Radius für abgerundete Ecken nach Wunsch anpassen */
}
- Wenn Sie bestimmte Schaltflächen ansprechen möchten, müssen Sie möglicherweise spezifischere Selektoren wie `.btn-primary`, `.btn-secondary` oder benutzerdefinierte Klassennamen verwenden, die mit der Schaltfläche verknüpft sind.
-
Speichern Sie Ihre Änderungen
- Sobald Sie den Code hinzugefügt haben, klicken Sie auf Speichern.
-
Vorschau und Test
- Zeigen Sie eine Vorschau Ihres Shops an, um die Änderungen zu sehen. Stellen Sie sicher, dass der Rahmen auf allen Buttons korrekt angezeigt wird.
-
Bei Bedarf anpassen
- Möglicherweise müssen Sie das CSS anpassen, wenn der Strich nicht wie erwartet aussieht. Passen Sie die Rahmenbreite, Farbe oder Polsterung an, um das gewünschte Aussehen zu erzielen.
Diese Methode ermöglicht es Ihnen, Ihren Buttons in Ihrem gesamten Shopify-Shop einen Rahmen hinzuzufügen. Wenn Sie nur bestimmten Buttons einen Rahmen hinzufügen möchten, können Sie den CSS-Selektor entsprechend ändern.
Weitere Anleitungen zur Anpassung von Schaltflächen im Shopify-Shop
- Wie macht man Buy-Buttons auf Shopify quadratischer?
- Welche Vorteile hat das Hinzufügen eines „Jetzt kaufen“-Buttons zu einer E-Commerce-Website?
Abschließende Worte
Nachdem Sie diese vollständige Anleitung gelesen haben, können Sie nicht nur Rahmen zu Ihren Shopify-Store-Buttons hinzufügen, sondern diese auch anpassen, um ihnen ein ästhetisches Aussehen entsprechend Ihrem Shop-Design zu verleihen. Sollten Sie immer noch Probleme haben, können Sie uns für Shopify-Store-Design- und Entwicklungssupport kontaktieren. Wir haben ein Team von Shopify-Expertenentwicklern, die sich darauf spezialisiert haben, Shops nach Ihren Anforderungen anzupassen und zu entwickeln.