Wie kann man in Shopify die Kaufen-Buttons eckiger machen? Das können Sie auf zwei verschiedene Arten tun: durch Bearbeiten des Codes oder ohne den Code zu berühren. In dieser Anleitung zeigen wir beide Wege, um den Radius des Shopify-Buttons zu ändern.
Kontaktieren Sie uns für jede Shopify-Hilfe
Wie kann man die Kaufen-Buttons in Shopify eckiger machen? Durch Code-Bearbeitung
Wenn Sie ein wenig Kenntnisse in der Code-Bearbeitung in Shopify haben, können Sie die Schritte zum Ändern des Button-Border-Radius befolgen.
Hier ist die Schritt-für-Schritt-Anleitung.
1. Zugriff auf den Theme-Editor
- Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
- Klicken Sie bei dem Theme, das Sie bearbeiten möchten, auf Anpassen.
2. Den Code des Themes öffnen
- Klicken Sie im Theme-Editor auf Aktionen > Code bearbeiten.
3. Die CSS-Datei finden
- Suchen Sie im Code-Editor die CSS-Datei, in der Ihre Button-Stile definiert sind. Sie befindet sich normalerweise unter Assets und könnte `theme.scss.liquid`, `style.css` oder `main.scss` heißen.
4. Die Button-Stile bearbeiten
- Suchen Sie nach der CSS-Klasse, die die Stile für die Kaufen-Buttons definiert. Das könnte etwas wie '.btn', '.button' oder '.btn--primary' sein.
- Um die Buttons eckiger zu machen, müssen Sie die Eigenschaft 'border-radius' anpassen. Um die Button-Kanten eckig zu machen, setzen Sie sie auf '0'. Möglicherweise müssen Sie auch das 'padding' anpassen, um den Button quadratischer zu gestalten.
Hier ist ein Beispiel, wie das CSS aussehen könnte:
css
.btn, .button, .btn--primary {
border-radius: 0px; /* Abgerundete Ecken entfernen */
padding: 10px 10px; /* Padding anpassen, um den Button quadratisch zu machen */
}
Sie können auch die Höhe und Breite des Buttons steuern, um sicherzustellen, dass er eine quadratische Form behält, je nach Ihren Designanforderungen.
5. Speichern und Vorschau
- Nach Ihren Änderungen klicken Sie auf Speichern.
- Zeigen Sie eine Vorschau Ihres Shops an, um das aktualisierte Button-Design zu sehen. Um das gewünschte quadratische Aussehen zu erzielen, passen Sie bei Bedarf das Padding oder andere Eigenschaften an.
6. Testen
- Testen Sie Ihre Änderungen auf verschiedenen Geräten (Desktop, Handy, Tablet), um sicherzustellen, dass die Buttons auf allen Bildschirmgrößen gut aussehen.
Den Shopify Button Radius ändern, ohne den Code zu berühren
- Melden Sie sich in Ihrem Shopify-Adminbereich an.
- Klicken Sie auf „Onlineshop“ und dann auf die Option „Anpassen“ in Ihrem aktuellen Theme.
- Sobald Sie die Option „Anpassen“ ausgewählt haben, erscheint das Dashboard zur Store-Bearbeitung, mit einem kleinen Zahnrad-Symbol, das die Theme-Einstellungen auf der linken Seite darstellt.
- Nachdem Sie das Theme-Einstellungsmenü ausgewählt haben, müssen Sie die Option „Buttons“ auswählen. Darunter sehen Sie die Option „Eckradius“.
- Von hier aus können Sie den Button-Radius verwalten. Wenn Sie beispielsweise die quadratische Form erstellen möchten, stellen Sie den Radius-Schieberegler auf Null, oder wenn Sie einen Radius hinzufügen möchten, ziehen Sie ihn.
- Diese Änderung des Radius wirkt sich auch auf den Button-Radius auf der Produktseite aus.
- Sobald Sie zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“.
Letzte Worte
Shopify-Kaufen-Buttons eckiger zu gestalten, ist einfach, wenn Sie die obigen Schritte befolgen. Sollten Sie dennoch Schwierigkeiten haben, den Kaufen-Button in Ihrem Shopify-Store zu ändern, können Sie die Hilfe unseres Shopify-Expertenentwicklers in Anspruch nehmen, um jede Änderung an Ihrem Shopify-Store vorzunehmen.
Lesen Sie auch: Was ist Shopify Sidekick und Shopify Magic?