Betreff: Kostenloser Versand Balken im Warenkorb (Fortschrittsbalken Farbe ändern)

Jens-hess · ‎08-31-2023

Hallo liebe Shopify-Experten,

ich habe in meinem Warenkorb ein Code, der meinen Kunden einen Fortschrittsbalken anzeigt, wann sie kostenlosen Versand erhalten. Diesen Code habe ich in meinem Theme Sense unter dem Abschnitt main.cart.items.liquid oben eingebaut. Er funktioniert soweit auch und macht, was er soll.

Aber, der Fortschrittsbalken ist leider in hellblau (eine Farbe, die auf meiner Seite so nirgendwo vorkommt). Ich würde gerne die Farbe ändern und habe ich schon getestet, aber die Farbe ändert sich einfach nicht. Hat vielleicht jemand eine Idee, wie ich den Code weiter anpassen oder verändern könnte, um die Farbe des Fortschrittsbalkens zu ändern? Vielen Dank im Voraus!

Der Code:

<div>

0€ <progress max="1900" value="{{ cart.total_price }}"></progress> 19€

<br>{% if cart.items.size == 0 %}Kostenloser Versand ab 19€{% endif %}

{% if cart.items.size != 0 %}{% if cart.total_price >= 1900 %} Glückwunsch! Dein Versand ist nun kostenlos

{% elsif cart.total_price < 1900 %}Noch {{ 1900 | minus: cart.total_price | money }} bis zum kostenlosen Versand{% endif %}{% endif %}

</div>

Gabe · ‎09-01-2023

Hey @Jens-hess

Eine Shipping Bar auf der Cart Page ist eine tolle UX für deine Kunden und kann deine Conversions und AOV erhöhen. Zeigt sie auch an wie viel man noch im Warenkorb braucht um einen gratis Versand zu erreichen?

Bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren. Und um die Farbe des Fortschrittsbalkens anzupassen, kannst du CSS verwenden. Wenn du bereits versucht hast, die Farbe zu ändern, aber es nicht funktioniert hat, könnte es daran liegen, wie die CSS-Stile in deinem Theme konfiguriert sind.

Hier sind Schritte, die du unternehmen kannst, um die Farbe des Fortschrittsbalkens zu ändern:

CSS-Stil definieren: Du kannst CSS verwenden, um den Stil des Fortschrittsbalkens anzupassen. Da der Fortschrittsbalken in einem <progress>-Element angezeigt wird, kannst du CSS verwenden, um die Farbe zu ändern. Du kannst den Stil im <style>-Tag innerhalb des <head>-Bereichs deiner Seite oder in einer externen CSS-Datei definieren.

Zum Beispiel:

progress {
    appearance: none;
    width: 100%;
    height: 10px;
    border: none;
    background-color: #your_desired_color; /* Hier deine gewünschte Farbe eintragen */
}

progress::-webkit-progress-value {
    background-color: #your_desired_color; /* Hier deine gewünschte Farbe eintragen */
}

Position der CSS-Stile überprüfen: Stelle sicher, dass die CSS-Regeln an einer Stelle im Theme platziert sind, die Vorrang vor anderen Stilen hat. Wenn es bereits vorhandene Stile gibt, die den Fortschrittsbalken beeinflussen könnten, müssen deine neuen Stile eine höhere Spezifität oder eine höhere Position in der Kaskade haben.
Cache leeren und Seite aktualisieren: Nachdem du die CSS-Änderungen vorgenommen hast, leere den Cache deines Browsers und aktualisiere die Warenkorbseite, um die neuen Stile zu sehen.

Wenn die Farbe nach diesen Schritten immer noch nicht geändert wird, kann es sein, dass dein Theme spezifische Regeln hat, die das Erscheinungsbild des Fortschrittsbalkens beeinflussen. In diesem Fall könnte es hilfreich sein, den Support deines Theme-Anbieters oder einen erfahrenen Shopify-Entwickler um Unterstützung zu bitten, um sicherzustellen, dass die Änderungen korrekt umgesetzt werden.

---
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.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Jens-hess · ‎09-01-2023

Hallo @Gabe

Vielen Dank für deine Rückmeldung! Ich habe den Code auf der main.cart.items.liquid Seite oben im Stil-Bereich eingefügt und er es hat funktioniert. Mir sind jetzt noch zwei kleine Dinge aufgefallen, die ich gerne anpassen würde.

Der Fortschrittsbalken ist jetzt insgesamt eckig, davor war er an den Ecken rund, was deutlich besser zum Gesamtauftritt passt. Ich habe schon am Code (ganz unten) versucht, es zu ändern, aber er reagiert auf die Befehle nicht. Wie müsste ich den Code weiter anpassen, um das erfolgreich zu ändern? Außerdem ist der Balken ganz leicht über den Euro-Zeichen. Also die 0 € & 19 € sind nicht mit dem Balken auf einer Höhe. Kann ich das auch gleich irgendwie ändern? Vielen Dank im Voraus!

Code:

progress {

appearance: progress-bar;

width: 75%;

height: 14px;

border: none;

border-radius: 10px;

background-color: ;

}

Gabe · ‎09-01-2023

@Jens-hess

Hey klasse, dass das geklappt hat! 😉

Um den Fortschrittsbalken wieder mit runden Ecken zu gestalten und sicherzustellen, dass die 0 € und 19 € auf gleicher Höhe mit dem Balken sind, kannst du einige Anpassungen am CSS-Code vornehmen. Hier sind die Änderungen, die du vornehmen kannst. Setze den border-radius auf einen Wert, der runde Ecken erzeugt. Zum Beispiel:

progress {
    appearance: progress-bar;
    width: 75%;
    height: 14px;
    border: none;
    border-radius: 7px; /* Hier runde Ecken hinzufügen */
    background-color: #your_desired_color; /* Hier deine gewünschte Farbe eintragen */
}

Du kannst die vertikale Ausrichtung des Balkens mit den Euro-Zeichen mithilfe von vertical-align anpassen:

progress {
    appearance: progress-bar;
    width: 75%;
    height: 14px;
    border: none;
    border-radius: 7px;
    vertical-align: middle; /* Hier Ausrichtung anpassen */
    background-color: #your_desired_color; /* Hier deine gewünschte Farbe eintragen */
}

Stelle sicher, dass du #your_desired_color durch deine gewünschte Farbe ersetzt.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Jens-hess · ‎09-01-2023

Danke dir! Der Balken sitzt nun mittig und es sieht so deutlich besser aus. Allerdings ist er immer noch nicht an den Ecken abgerundet. Ich habe auch selbst schon mit dem Befehlen "border-radius:" experimentiert und es an verscheiden Stellen eingebaut. Leider tut sich da gar nichts. Wird das irgendwie durch einen anderen Befehl blockiert? Der aktuelle Code ist unten. Die Hintergrundfarbe des Balkens passt sich auch nicht an, was aber nicht so schlimm ist.

Code:

progress {
appearance: none;
width: 75%;
height: 10px;
border: none;
border-radius: 7px;
vertical-align: middle;
background-color: ;
}

progress::-webkit-progress-value {
background-color: #1A463F ; /*
}

Gabe · ‎09-01-2023

@Jens-hess

Ok das ganze ist sehr Theme-abhängig und ein befristeter Vorschaulink zu einem Beispiel wäre sehr hilfreich das schneller zu analysieren.

Du scheinst den Code richtig angepasst zu haben, aber es gibt ein Problem bei der CSS-Syntax. Der Kommentar-Bereich am Ende von progress::-webkit-progress-value ist nicht richtig geschlossen, was dazu führen kann, dass der Rest des Stils nicht richtig interpretiert wird. Probiere mal das hier:

progress {
  appearance: none;
  width: 75%;
  height: 10px;
  border: none;
  border-radius: 7px;
  vertical-align: middle;
  background-color: transparent; /* Hintergrundfarbe des Fortschrittsbalkens */
}

progress::-webkit-progress-value {
  background-color: #1A463F ; /* Hier deine gewünschte Farbe eintragen */
}

Stelle sicher, dass du den Kommentar am Ende von progress::-webkit-progress-value entfernst, damit der CSS-Code korrekt interpretiert wird. Nachdem du diese Änderungen vorgenommen hast, sollte der Fortschrittsbalken abgerundete Ecken haben und die gewünschte Farbe haben. Speichere die Änderungen, aktualisiere die Seite und überprüfe, ob der Fortschrittsbalken nun wie gewünscht aussieht.

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Jens-hess · ‎09-01-2023

Hallo @Gabe

Danke für den Tipp! Ich habe den Code so entsprechend eingefügt und den Kommentar entfernt. Leider tut sich da immer noch nichts, bezüglich der Form. Mein Theme ist das Sense 11.0.0. LG

Gabe · ‎09-01-2023

@Jens-hess

Ja, so einfach wird das leider nicht sein, und du wirst damit tüfteln müssen oder einen Programmierer in Auftrag stellen müssen um diese Linien abzurunden.

Poste deine Frage auf Englisch in unserem Entwickler Design Forum hier samt alle Angaben aus unserem Leitfaden hier und und ggf. meldet sich da eine Programmierer wie @Finer zurück!

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Jens-hess · ‎09-01-2023

Okay. Danke dir für die Unterstützung!

Gabe · ‎09-01-2023

Gerne geschehen! 😉

Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Betreff: Kostenloser Versand Balken im Warenkorb (Fortschrittsbalken Farbe ändern)

Kostenloser Versand Balken im Warenkorb (Fortschrittsbalken Farbe ändern)

Community Blog Artikel