# Das Aussehen des Warenkorb-Fortschrittsbalkens ohne Code anpassen

> Die Seite Design gestaltet den Balken ohne Code: Anordnung der Stufen, Farben, Marker, Preise, Bilder, mobile Abstände und CSS, gespeichert als wiederverwendbare Designs.

Aktualisiert am 2026-09-25 · https://www.yaco.studio/de/docs/design

## Wo die Design-Einstellungen liegen

Alles Optische stellen Sie auf der Seite **Design** von Yaco Progress Bar ein. Sie ist in Tabs aufgeteilt, einen pro Teil des Balkens:

| Tab | Was er steuert |
|---|---|
| **Balkenstil** | Anordnung der Stufen, Farben, Höhe, Rahmen, Schatten, Eckenradius |
| **Bilder** | Symbole der Stufen und ihre Farben, erreicht oder nicht |
| **Zielname** | Ob die Namen der Stufen erscheinen, ihre Größe und Farben |
| **Preis** | Der Schwellenwert unter jeder Stufe |
| **Marker** | Die Punkte oder Bilder, die jede Stufe auf dem Balken markieren |
| **Betrag** | Der Fortschrittswert und der Gesamtwert |
| **Container** | Außen- und Innenabstände, Rahmen, Hintergrund, maximale Breite, eigenes CSS |
| **Erfolgsmeldung** | Die Meldungszeile; siehe [Erfolgsmeldung](https://www.yaco.studio/de/docs/erfolgsmeldung) |
| **Geschenk-Oberfläche** | Geschenk-Button, Geschenkauswahl und Geschenkliste; siehe [Geschenkauswahl](https://www.yaco.studio/de/docs/geschenkauswahl) |
| **Presets** | Fertige Designs als Ausgangspunkt |

Eine Live-Vorschau folgt Ihren Änderungen; im Shop erscheint nichts vor **Speichern** (siehe [Speichern und veröffentlichen](https://www.yaco.studio/de/docs/speichern-und-veroeffentlichen)).

## Die Anordnung der Stufen wählen

Im Tab **Balkenstil** legt **Zielanzeige** fest, wie sich die Stufen den Balken teilen:

- **Symmetrisch**: jede Stufe erhält dieselbe Breite.
- **Volle Breite**: die Stufen ziehen sich über die ganze Breite.
- **Proportional**: die Breite jeder Stufe folgt ihrem Schwellenwert.
- **Einzeln**: es wird immer nur eine Stufe angezeigt.

**Angezeigte Ziele begrenzen** ist standardmäßig aktiv. Der Balken zeigt höchstens 4 Stufen gleichzeitig (**Angezeigte Ziele (max.)**) und hält immer mindestens 2 nicht erreichte Stufen sichtbar (**Angezeigte nicht erreichte Ziele (min.)**). Das Fenster rückt weiter, sobald Stufen freigeschaltet werden. Entfernen Sie das Häkchen, um alle Stufen zu zeigen. Im Modus **Einzeln** gilt die Begrenzung nicht.

Derselbe Tab enthält **Preisausrichtung** und die Balkenfarben; Höhe, Rahmen, Schatten und Radius finden Sie unter **Erweiterte Optionen**.

## Marker, Preise, Bilder und Beträge gestalten

- **Marker**: schalten Sie **Markierung anzeigen** ein, oder nutzen Sie das Bild der Stufe mit **Zielbild als Markierung verwenden**. Die Farben können je nach Zustand abweichen: nicht erreicht, erreicht, alle erreicht.
- **Preis**: **Zielpreis anzeigen**, dann Größe, Fettdruck, Farben pro Zustand, Innenabstände und Ränder.
- **Bilder**: **Zielbild anzeigen** aktiviert Bilder für alle Stufen. Das Bild jeder Stufe wählen Sie in ihrer Karte; dieser Tab regelt nur Größe, Farben, Radius und Schatten.
- **Betrag**: **Fortschrittswert anzeigen** und **Gesamtwert anzeigen**, mit Farbe, Größe und Abstand.

## Abstände für Desktop und Mobil einstellen

Wechseln Sie im Tab **Container** oben zwischen **Standard** und **Mobil**, um Außen- und Innenabstände je Bildschirmgröße festzulegen. **Maximale Breite** gilt nur auf dem Desktop. Diese Werte gelten überall, wo das Design verwendet wird; die eigenen Einstellungen einer Platzierung in der Theme-Integration können sie überschreiben (siehe [Theme-Platzierung](https://www.yaco.studio/de/docs/theme-platzierung)).

## Mehr mit eigenem CSS

Unten im Tab **Container** nimmt **Benutzerdefiniertes CSS für Fortschrittsbalken** Ihr eigenes CSS auf, und **CSS-Klassennamen** fügt dem Container des Balkens Klassen hinzu. Das CSS wird beim Speichern geprüft und auf den Balken begrenzt: Ihre Regeln wirken nicht auf den Rest des Themes.

## Mit einem Preset oder aus einem anderen Shop starten

- **Presets**: wählen Sie ein fertiges Design und klicken Sie auf **Anwenden**. Es ersetzt den Stil des Designs, das Sie gerade bearbeiten.
- **Aus einem anderen Shop importieren**: Sie betreiben mehrere Shops? Das Symbol neben **Design hinzufügen** oder die Karte **Design aus einem anderen Shop übernehmen** unter **Presets** kopiert eines ihrer Designs als neues Design, ohne bestehende zu ändern. Ein Shop erscheint, wenn Sie in beiden dieselbe verifizierte Shopify-E-Mail-Adresse nutzen und Yaco Progress Bar dort mindestens einmal geöffnet haben.

In beiden Fällen klicken Sie auf **Speichern**, um das Ergebnis zu behalten.

## Mehrere Designs nutzen

**Design hinzufügen** und **Design duplizieren** legen weitere Designs an, etwa eines für den Warenkorb-Drawer und eines für die Produktseite. Ein Design ist das Standarddesign; mit **Dieses Design verwenden** weisen Sie ein anderes bestimmten Platzierungen zu.