> For the complete documentation index, see [llms.txt](https://docs.codegiganten.de/plugin-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codegiganten.de/plugin-documentation/apps/fortschrittsbalken-fur-kostenlosen-versand-and-rabatt-im-warenkorb/fortschrittsbalken-gestalten.md). # Fortschrittsbalken gestalten Fortschrittsbalken für kostenlosen Versand und Warenkorb-Rabatte gestalten: Farben, Layout, Texte und Animationen anpassen. Gestalte den Fortschrittsbalken für kostenlosen Versand und Rabatte im Warenkorb. Passe Farben, Layout, Texte und Animationen passend zu deinem Shop an. Die Primärfarbe bestimmt Balkenfüllung, erreichte Meilensteine und Hintergründe. Die Sekundärfarbe bestimmt Akzente und den nächsten offenen Meilenstein. Alles Weitere leitet das Plugin daraus ab. Am schnellsten geht es mit dem Button "Farben aus Theme übernehmen". Der zieht die Farben aus dem Theme des gewählten Verkaufskanals, damit der Balken direkt zum Shop passt. ### Layout und Größen des Fortschrittsbalkens Unter Erweitert, Layout und Größen stellst du das Erscheinungsbild ein: | Einstellung | Standard | Wirkung | | ------------------------------- | ------------------- | ---------------------------------------- | | Überschrift anzeigen | aus | Titel über dem Balken | | Schwelle (Betrag) anzeigen | an | Betrag über jedem Meilenstein | | Titel des Meilensteins anzeigen | an | Name unter jedem Meilenstein | | Cent-Werte anzeigen | aus | 50,00 Euro statt 50 Euro | | Position Infotext | unter dem Balken | Über, in oder unter dem Balken | | Höhe des Fortschrittsbalkens | 0.5rem | Dicke des Balkens | | Größe Meilenstein | 2rem | Durchmesser der Meilensteinpunkte | | Abstand Infotext | 3rem | Abstand zwischen Text und Balken | | Box-Abstände (Padding) | 3rem 3rem 1rem 1rem | Innenabstände oben, rechts, unten, links | Bei den Größen kannst du die üblichen CSS-Werte eintragen, also etwa 12px oder 0.75rem. ### Fortschrittsbalken im Off-Canvas-Warenkorb gestalten Der Off-Canvas-Warenkorb ist schmaler als die Warenkorbseite. Normalerweise übernimmt er einfach die Einstellungen von oben, und das reicht meistens auch. Brauchst du dort ein eigenes Layout, schalte "Offcanvas-Warenkorb abweichend konfigurieren" ein. Erst dann greifen die Felder darunter. Solange die Option aus ist, kannst du dort eintragen was du willst, es passiert nichts. ### Farben, Formen und Schriftgrößen anpassen Unter Erweitert, Farben und Formen lässt sich jedes Detail einzeln überschreiben: Hintergrund, Rahmen, Radien, Schriftgrößen und die Farben für erreichte und offene Meilensteine. Jedes Feld, das du leer lässt, wird automatisch aus deinen beiden Grundfarben abgeleitet. In den Farbfeldern sind auch Farbverläufe erlaubt, zum Beispiel linear-gradient(90deg, #22c55e, #16a34a). ### Texte für kostenlosen Versand und Rabatte anpassen Alle Texte im Fortschrittsbalken änderst du über die Textbausteine. | Textbaustein | Standardtext | | -------------------- | ---------------------------------------------------------------- | | title | Sicher dir deinen Vorteil | | message.addMore | Noch %amount% um %label% zu erhalten! | | message.addMoreValue | Noch %amount% um %label% im Wert von %value% zu erhalten! | | message.reached | Ziel erreicht! | | message.keepShopping | Weiter einkaufen, um den nächsten Vorteil zu erreichen | | message.excludedHint | Hinweis auf ausgeschlossene Artikel samt anrechenbarem Warenwert | Diese Platzhalter stehen dir zur Verfügung: %amount% für den noch fehlenden Betrag, %label% für den Titel des nächsten Meilensteins, %value% für den hinterlegten Wert des Vorteils und %eligibleAmount% für den anrechenbaren Warenwert. ### Animation beim Erreichen eines Meilensteins Unter Anzeige und Verhalten wählst du zwischen Konfetti, Feuerwerk oder gar keiner Animation. Möchtest du eigene Konfettibilder verwenden, etwa dein Logo, schalte "Individuelle Konfetti-Bilder aktivieren" ein und hinterleg die Bilder im Medienfeld darunter. Am besten funktionieren quadratische PNG-Dateien mit transparentem Hintergrund, ungefähr 64 mal 64 Pixel. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.codegiganten.de/plugin-documentation/apps/fortschrittsbalken-fur-kostenlosen-versand-and-rabatt-im-warenkorb/fortschrittsbalken-gestalten.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.