Markenauftritt und Gestaltung
Passe Checkout-Erweiterungen optisch an deine Marke an
Zuletzt aktualisiert: 2025-01-16
CheckoutOS-Erweiterungen übernehmen automatisch die Markengestaltung deines Shopify-Checkouts. Du kannst Farben, Schriften und Stile weiter anpassen, um ein nahtloses Erlebnis passend zu deiner Markenidentität zu schaffen.
Öffne die Gestaltungseinstellungen unter Dashboard → Settings → Branding.
CheckoutOS berücksichtigt die Gestaltungseinstellungen deines Shopify-Checkouts. Konfiguriere zuerst das grundlegende Erscheinungsbild unter Shopify Admin → Settings → Checkout und nutze dann CheckoutOS für Anpassungen einzelner Erweiterungen.
Markenfarben
Lege die Farbpalette deiner Marke für alle Checkout-Erweiterungen fest:
Primärfarbe
Deine primäre Markenfarbe wird verwendet für:
- Handlungsauffordernde Schaltflächen (Accept, Add to Order)
- Füllungen der Fortschrittsanzeigen
- Anzeigen aktiver Zustände
- Linktext
/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;Sekundärfarben
Sekundärfarben ergänzen deine Primärfarbe:
- Accent Color – Abzeichen, Hervorhebungen und sekundäre Schaltflächen.
- Success Color – Bestätigungsmeldungen und Häkchen.
- Warning Color – Dringlichkeitsanzeigen und Timer.
Typografie
CheckoutOS verwendet standardmäßig die Schrift deines Shopify-Checkouts. Du kannst dies für einzelne Elemente ändern:
Schrifteinstellungen
- Heading Font – Für Upsell-Titel und Überschriften von Erweiterungen.
- Body Font – Für Beschreibungen und Fließtext.
- Button Font – Für den Text handlungsauffordernder Schaltflächen.
CheckoutOS unterstützt Google Fonts und alle websicheren Schriften. Eigene Schriften können per CSS geladen werden.
Eigene Schriften können die Leistung des Checkouts beeinträchtigen. Wir empfehlen Schriften, die dein Shopify-Theme bereits lädt, um zusätzliche Netzwerkanfragen zu vermeiden.
Logo-Einstellungen
Füge dein Logo auf den Upsell-Seiten nach dem Kauf hinzu, um deine Marke einheitlich darzustellen:
Logo hochladen
Logo-Position festlegen
Version für dunklen Modus konfigurieren
Schaltflächenstile
Passe das Erscheinungsbild der Aktionsschaltflächen an:
Schaltflächenform
- Rounded – Leicht abgerundete Ecken mit 8 px Radius.
- Pill – Vollständig abgerundete Enden.
- Square – Eckige Form mit 0 px Radius.
- Custom – Lege einen eigenen Eckenradius fest.
Schaltflächengröße
- Small – Kompakte Schaltflächen mit geringem Platzbedarf.
- Medium – Ausgewogene Größe, empfohlen.
- Large – Besonders gut sichtbare Schaltflächen zur Hervorhebung.
{
"primaryButton": {
"backgroundColor": "#4F46E5",
"textColor": "#FFFFFF",
"borderRadius": "8px",
"fontSize": "16px",
"padding": "12px 24px",
"hoverEffect": "darken"
},
"secondaryButton": {
"backgroundColor": "transparent",
"textColor": "#4F46E5",
"border": "1px solid #4F46E5",
"borderRadius": "8px"
}
}Eigenes CSS
Für erweiterte Anpassungen kannst du eigenes CSS hinzufügen, das für alle CheckoutOS-Erweiterungen gilt:
/* Target upsell offer cards */
.checkoutos-upsell-card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #E5E7EB;
}
/* Customize the accept button */
.checkoutos-accept-btn {
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
/* Style the countdown timer */
.checkoutos-timer {
background: linear-gradient(90deg, #EF4444, #DC2626);
color: white;
padding: 4px 12px;
border-radius: 999px;
}Eigenes CSS hat eine geringere Spezifität als die Shopify-Checkout-Stile. Verwende !important sparsam und teste gründlich auf verschiedenen Geräten.
Vorschau und Tests
Prüfe Änderungen an der Markengestaltung immer vor der Veröffentlichung:
- Live Preview – Sieh Änderungen während der Bearbeitung in Echtzeit.
- Device Preview – Teste Desktop-, Tablet- und Mobilansichten.
- Test Mode – Aktiviere den Testmodus, um Änderungen an echten Bestellungen zu sehen, ohne Kunden zu beeinflussen.
Änderungen vornehmen
Vorschau auf allen Geräten prüfen
Testmodus aktivieren
Änderungen veröffentlichen
Nächste Schritte
Brauchst du mehr Hilfe? Support kontaktieren