Anpassung der dynamischen Checkout-Flächen im Warenkorb

[Marius94]

Hallo zusammen,

ich arbeite derzeit mit dem Streamline Theme auf Shopify und habe Schwierigkeiten, die Formen der dynamischen Checkout-Bereiche auf der Warenkorb-Seite anzupassen. Mir ist aufgefallen, dass die Formen uneinheitlich sind - einige sind rechteckig, während andere abgerundete Ecken haben. Dies beeinträchtigt das Gesamtbild meiner Seite.

Laut dem Shopify Support ist es möglich, die Formen anzupassen, indem man Änderungen in der theme.css-Datei vornimmt, insbesondere indem man shopify-cleanslate verwendet und den border-radius festlegt. Ich habe verschiedene cleanslate-Codes ausprobiert, die ich alle im Quellcode in Chroem gefunden habe, jedoch ohne Erfolg. Die Formen ändern sich einfach nicht.

Selbst der Archetypes Support konnte mir leider nicht weiterhelfen. Hat jemand von euch eine Idee, wie ich dieses Problem lösen könnte?

Anbei habe ich einen Screenshot angehängt, damit ihr euch ein besseres Bild von der Situation machen könnt.

Ich wäre sehr dankbar für eure Unterstützung und eure Vorschläge.

Vielen Dank im Voraus!

 

[Gabe]

Hey @Marius94 

Danke für die Angaben und Bilder und 👀 wir hier was es alles für Lösungen gäbe. 😉

Das sieht auch nicht besonders einheitlich aus wenn manche Buttons rund und manche eckig sind, da hast du recht. Apropos, falls es dich interessiert, wir haben ein paar Blogs die über die verschiedenen Typen und Formen der Buttons schreiben hier und auch hier.

Aber im Prinzip ist es so dass die "gebrandeten" DCB Buttons für jeden User erscheinen da sie nach gewissen Parameter angezeigt werden oder nicht wie z. B. die Purchase History des Kunden und die Cookie Einstellungen des Browsers des Kunden. Lese alles über diese Buttons in unserer Hilfeseite hier.

Wenn du das Aussehen der dynamischen Checkout-Buttons auf der Warenkorb-Seite deines Shopify-Streamline-Themes anpassen möchtest, gibt es ein paar Dinge, die du tun kannst.

Die Dynamische Checkout Button stylen

Du kannst ueber die theme.liquid (oder den Product Page Liquid Datei) in deinem Theme die Buttons auch anpassen je nach der Code Struktur des Streamline Themes.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. 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.

Ä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!

Füge den folgenden CSS Code am Ende der CSS Datei hinzu oder im CSS Editor (was dein Theme Code besser beschützt):

.shopify-cleanslate {
    border-radius: 10px !important; /* oder den gewünschten Wert für abgerundete Ecken */
}

Das !important wird hier verwendet, um sicherzustellen, dass dieser Stil Vorrang vor anderen Stilen im Stylesheet hat.

Caches leeren

Nachdem du die Änderungen vorgenommen hast, ist es wichtig, den Browser-Cache zu leeren, um sicherzustellen, dass die neuesten Stiländerungen geladen werden, insbesondere wenn du zuvor mehrere Versuche unternommen hast, die Styles anzupassen.

Andere mögliche CSS-Klassen

Es ist auch möglich, dass das Streamline-Theme andere Klassen oder IDs für die Checkout-Buttons verwendet. Du kannst die Chrome Developer Console verwenden (Rechtsklick im Shop -> "Inspect"), um die exakten Klassen oder IDs zu identifizieren, die für diese Schaltflächen verwendet werden.

Im Element-Inspektor solltest du den spezifischen CSS-Klassennamen oder die ID des Buttons finden können. Sobald du die spezifische Klasse oder ID identifiziert hast, kannst du den obigen CSS-Code entsprechend anpassen.

Weitere Unterstützung

Wenn diese Lösung nicht funktioniert, wäre eine weitere Möglichkeit, einen erfahrenen Shopify-Entwickler zu konsultieren, der sich das Problem direkt auf deiner Website anschaut.

---
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. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Marius94]

Hey Gabe,

ich möchte mich bei dir für deine äußerst hilfreiche Antwort bedanken. Ich habe deine Ratschläge sorgfältig befolgt und eine Reihe von Schritten unternommen, um die Button Form auf meiner Warenkorb-Seite anzupassen.

Zunächst habe ich den von dir vorgeschlagenen CSS-Code in meine theme.css Datei ausprobiert und dann auch verschiedene cleanslate-Codes probiert, die mir das Chrome Entwicklertool gezeigt hat.

Leider hat sich die Button-Form in meinem bestehenden Shop nicht ändern wollten. Interessanterweise habe ich festgestellt, dass sich in meinem Testhop mit dem gleichen Theme, nur komplett unbenutzt, die Border des PayPal-Buttons mithilfe des Codes ".shopify-cleanslate .LVeInvZ5HcNOW1Zsn7NH { border-radius: 50px !important;}" am Ende der theme.css-Datei problemlos ändern ließ. Dabei ist zu beachten, dass ich im Testshop ausschließlich den PayPal-Button verwendet habe und keine anderen Buy-Buttons integriert waren. Dieser cleanslate-Codes wird im Entwickler Tool an der gleichen Stelle in meinem fertigen Shop angezeigt, aber wenn ich den gleichen Code einsetze, geschieht nichts. Ich habe in meinem fertigen Shop lediglich 2-3 Änderungen im Theme-Code vorgenommen, die keine Verbindung zu den Buttons haben.

Nochmals vielen Dank für deine Zeit, Geduld und Hilfe. Deine Unterstützung hat einen großen Unterschied gemacht!

Liebe Grüße

Marius

[Marius94]

Ich möchte noch kurz hinzufügen, dass ich im Entwicklertool einen Code (s. Screenshot) mit einem border-radius gefunden habe. Darüber habe ich den border-radius geändert und konnte beobachten, wie sich die Border des Buttons auf der Seite in Echtzeit angepasst hat. 

Wenn ich den modifizierten Code am Ende der theme.css-Datei oder im Abschnitt für benutzerdefinierte CSS im Theme-Editor einfüge, scheint sich nichts zu verändern. Das verwirrt mich ein wenig, denn ich gehe davon aus, dass der geänderte Code, den ich im Chrome-Entwicklertool gefunden habe, der richtige sein sollte. Schließlich konnte ich visuell bestätigen, dass er die gewünschten Änderungen bewirkt.

Liebe Grüße

Marius