Skip to main content

​
Überblick

In diesem Bereich kannst du das Erscheinungsbild bestehender Warenkorbelemente ändern oder Stile auf benutzerdefiniertes HTML anwenden, das über den Editor hinzugefügt wurde.

​
Wo du es findest

Gehe zu:
Upcart > Cart Editor > Settings > Custom CSS
Settings ist eine Reihe von Tabs; Custom CSS ist einer davon, neben Custom HTML. Wenn er nicht sichtbar ist, befindet er sich hinter More settings.

​
So funktioniert es

Du kannst CSS hinzufügen, um:
  • Standard-Warenkorbelemente zu gestalten
  • Das Erscheinungsbild von benutzerdefiniertem HTML zu verändern
  • Abstände, Ausrichtung, Typografie und mehr anzupassen
Während du tippst, schlägt ein Autovervollständigungs-Popup gültige Upcart-Selektoren vor, um die Bearbeitung zu beschleunigen. Wenn du einen Vorschlag auswählst, wird die Regel automatisch vervollständigt und hilft dir, deinen Code zu strukturieren. Wenn Änderungen nicht wie erwartet erscheinen, prüfe die üblichen Vorschläge zur Fehlerbehebung, etwa das Aktualisieren der Caches sowohl im Browser als auch im Upcart-Editor, das Überprüfen der CSS-Platzierungen und das Sicherstellen einer angemessenen Spezifität deiner CSS-Regeln.

​
Selektoren verwenden

Upcart bietet eine große Auswahl an benutzerdefinierten Selektoren. Klicke auf “Show list”, um alle verfügbaren Optionen anzuzeigen. Vermeide globale Selektoren wie body, div oder h3, sofern sie nicht mit .upcart-cart eingegrenzt sind, um unbeabsichtigte Änderungen an deinem Storefront zu verhindern. Wenn Stile nicht korrekt angewendet werden, erwäge, die CSS-Spezifität zu erhöhen oder deinen CSS-Regeln !important anzuhängen. So stellst du sicher, dass sie alle in Konflikt stehenden Stile überschreiben. Beispiel:
Beispiel (sicherer Selektor):

​
Beispiel: Styling einer Dankesnachricht

Angenommen, du hast dieses benutzerdefinierte HTML unter dem Checkout-Button hinzugefügt:
Ohne CSS sieht die Nachricht schlicht aus. So gestaltest du sie:

​
Häufige Probleme und Lösungen

​
CSS erscheint nicht auf Mobilgeräten

Wenn dein benutzerdefinierter Text oder deine Stile auf Mobilgeräten nicht sichtbar sind:
  • Aktualisiere die Seite sowohl im Upcart-Editor als auch in deinem mobilen Browser, um zwischengespeicherte Versionen zu löschen.
  • Stelle sicher, dass die zuletzt veröffentlichte Warenkorb-Version aktiv ist.
  • Bestätige, dass das CSS im Tab Custom CSS unter Upcart > Cart Editor > Settings gespeichert ist.

​
Abweichungen zwischen Editor und Live-Store

Wenn Stile im Editor korrekt angezeigt werden, aber nicht auf der Live-Seite, kann eine höhere Selektor-Spezifität oder das Hinzufügen von !important zu den wichtigsten Regeln nötig sein.

​
Falsche Verwendung von CSS-Selektoren

Überprüfe, ob die richtige Klasse oder ID angesprochen wird. Verwende für Upcart-spezifische Elemente immer Präfixe wie .upcart-, um unbeabsichtigte Ergebnisse zu vermeiden. Wenn der Stil nicht wie erwartet angewendet wird, stelle sicher, dass der Selektor .thank-you-message das vorgesehene HTML-Element präzise anspricht, und prüfe, ob der CSS-Code auf dem richtigen Tab platziert ist (Upcart > Cart Editor > Settings > Custom CSS).
Support für Anpassungen: Der Upcart-Support kann nicht bei der Implementierung oder dem Debugging von Custom CSS unterstützen. Für Hilfe bei fortgeschrittenem Styling empfehlen wir die Zusammenarbeit mit einem Shopify Expert. Für die Fehlerbehebung bei Custom CSS findest du im Abschnitt zu häufigen Problemen Hinweise zur Lösung von Problemen wie fehlenden Stilen auf Mobilgeräten, Abweichungen zwischen Editor-Vorschau und Live-Storefront sowie falsch platzierten Selektoren.