Anzahl Button im Dawn Theme optisch verändern

[Jan14kl]

Hallo zusammen,

ich benutze das DAWN Theme in meinem Shop und möchte gerne das Aussehen des "Anzahl" Buttons verändern.

Ich habe bereits in Foren gelesen und herumexperimentiert. Dadurch ist mir eine Änderung gelungen, ich bin jedoch noch nicht am Ziel.

In das "base.css" file habe ich folgenden Code hinzugefügt:

quantity-input.quantity {
    background: #1FD2FF;
}
quantity-input.quantity * {
    color: black;
}
.quantity {
    --inputs-border-width: 2px;
}

Dadurch sieht der Button Anzahl nun so aus:

Ich würde ihn gerne aber mit Runden-Ecken haben.
Kann mir hier jemand weiterhelfen?

[Gabe]

Hey @Jan14kl 

Danke für die Infos und an erster Stelle würde ich gerne fragen, ob ihr mehrere Themes zum Shop für's Testen hinzugefügt habt? Verschiedene Themes haben auch versch. Designs, mit Sections und CTA Buttons usw. 

Ich würde es also sehr empfehlen, es nicht beim standard Dawn Theme zu lassen und weitere Themes, wie Impact, Frame, Stiletto, Impulse und Prestige testen, so dass man das beste Theme für die eigenen Produkte und die Brand Identity finden kann. Das spart dir außerdem viel Zeit und Energie, die du dann in das Business und Marketing stecken kannst, anstatt dich mit CSS rumschlagen zu müssen.

Aber im Theme gibt es jetzt einen CSS Editor wenn du es selber programmieren möchtest, wie hier im Sense Theme:

Nicht vergessen, Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Um die Ecken der "Quantity"-Buttons in deinem Shopify Dawn Theme abzurunden, und die Farben zu ändern, kannst du den folgenden CSS-Code zum CSS Editor hinzufügen. Sollen dann nicht auch die anderen Buttons auch so aussehen, um eine konsistente Shopgestaltung zu gewährleisten? Mehr dazu weiter unten:

/* Anpassen der Button-Klassen für "In den Warenkorb" oder ähnliche Buttons */
.quick-add__submit, .button, .button--full-width, .button--secondary {
    background: green; /* Background color */
    color: #fff; /* Text color */
    border: 2px solid green; /* Border color and width */
    border-radius: 10px; /* Rounded corners */
}

Es setzt die Hintergrundfarbe auf Grün, die Textfarbe auf Weiß, die Rahmenfarbe und -breite auf den Hintergrund und wendet einen Rahmenradius von 10px für abgerundete Ecken an. Du kannst den Wert für denborder-radius anpassen, um die Rundung der Ecken zu erhöhen oder zu verringern, je nachdem, was du bevorzugst. Der Wert 10px sorgt für moderat gerundete Ecken, aber du kannst diesen Wert erhöhen, um die Ecken noch stärker abzurunden.

Um den Container, der die Plus- und Minus-Buttons für die Mengenauswahl umfasst, rund zu machen, müsstest du den border-radius auf den Container selbst anwenden und nicht auf die Buttons. Der Container wird durch die Klasse .quantity repräsentiert, basierend auf dem HTML, das du bereitgestellt hast:

.quantity {
    border-radius: 15px; /* Rundung der Ecken des Containers */
    overflow: hidden; /* Stellt sicher, dass auch der Inhalt (Buttons) der Rundung folgt */
    background-color: transparent; /* Macht den Hintergrund des Containers transparent */
    border: 2px solid #ccc; /* Fügt einen sichtbaren Rand hinzu, um die Rundung zu zeigen */
}

.quantity__button {
    background: transparent; /* Macht den Hintergrund der Buttons transparent */
    border: none; /* Entfernt den Rand der Buttons */
    /* Weitere Stile für die Buttons */
}

.quantity__input {
    background: transparent; /* Macht den Hintergrund des Eingabefelds transparent */
    border: none; /* Entfernt den Rand des Eingabefelds */
    /* Weitere Stile für das Eingabefeld */
}

Dieser Code sollte den gesamten .quantity-Container ansprechen und die Ecken abrunden. Die overflow: hidden;-Eigenschaft stellt sicher, dass der Inhalt des Containers (in diesem Fall die Buttons) auch die abgerundeten Ecken respektiert und nicht darüber hinausgeht.

Vergiss nicht, die Größe des border-radius entsprechend deinen Designanforderungen anzupassen. Wenn die Ecken immer noch nicht abgerundet erscheinen, könnte es sein, dass es andere Stile gibt, die diese überschreiben, oder dass die Änderungen im Cache nicht sichtbar sind. In diesem Fall versuche, den Cache zu löschen oder die Änderungen in einem privaten Browserfenster zu testen.

Weitere Beispiele für das Abrunden von Elementen im Shopify Dawn Theme findest du in den Beiträgen der Shopify Community, wo ähnliche Anfragen diskutiert wurden. Dort wurden Lösungen vorgestellt, die dir weitere Anpassungen ermöglichen, wie etwa das Abrunden von Blog-Post-Karten oder Checkout-Buttons​​. Du kannst die Werte entsprechend deinem Design anpassen​​.

Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
---
Habt ihr auch den Shop auf die Weihnachtssaison umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 👀!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.