PDP-Upsell-Widget-Design anpassen

Verwende diese Anleitung, wenn die Standarddesigns nah dran sind, aber nicht ganz passen. Jedes der folgenden Beispiele enthält einen fertigen Satz benutzerdefinierter CSS-Stile zum direkten Einfügen.

Der schnellste Weg: Kopiere eines der Beispieldesigns, füge es in dein bevorzugtes KI-Chat-Tool ein und bitte um Anpassungen wie „Mach es weniger rund, die Primärfarbe muss lila sein.”

Erste Schritte

1. Gehe im Shopify-Adminbereich zu Online Store > Themes.
2. Klicke bei dem Theme, das du bearbeiten möchtest, auf Customize.
3. Öffne eine Produktvorlage.
4. Füge den Block PDP Warranty Selection in der Nähe deines Produktformulars hinzu.
5. Speichere deine Änderungen.
6. Zeige die Produktseite in der Vorschau an und bestätige, dass die Garantieoptionen dort erscheinen, wo du es erwartest.

Bester Schnellstart: Wähle zunächst eines der integrierten Designs aus, und verwende danach nur dann benutzerdefinierte CSS-Variablen, wenn du mehr Kontrolle möchtest.

Einstellungsreferenz

Design

Wähle eines der integrierten Voreinstellungen. Standard: Minimal.

• Minimal
• Ambar
• Dark
• Brand Colors
• Mint
• Ocean
• Caramel Latte
• Valentine
• Retro

Brand Colors übernimmt Farbwerte automatisch aus deinem Shopify-Theme. Es liest Theme-Variablen wie --color-accent-1, --color-accent-2, --color-background und --color-foreground. Du musst diese Werte nicht in die benutzerdefinierten CSS-Variablen einfügen.

Rundung

Steuert den allgemeinen Eckenradius des Widgets. Standard: 12px. Diese Einstellung überträgt sich automatisch auf die Radius-Werte für Karte, Option, Coverage und Badge des Widgets.

‘Most Popular’-Badge anzeigen

Blendet den „Most Popular”-Badge bei Optionen ein oder aus, die in deinen Garantieplandaten bereits als beliebteste Option markiert sind. Standard: aktiviert. Wenn dieser Schalter aktiviert ist, aber keine Option als beliebteste markiert ist, wird der Badge nicht angezeigt.

Garantiebeschreibung

Steuert den beschreibenden Text, der unter der Widget-Überschrift angezeigt wird. Standard: Extend your warranty and enjoy peace of mind with comprehensive coverage.

Vorteile anzeigen

Blendet den Vorteilebereich für jede Option ein oder aus. Standard: aktiviert. Wenn aktiviert, können Kunden die Abdeckungsdetails der ausgewählten Pläne einsehen.

Vorteile-Überschrift

Steuert den Überschriftentext, der oberhalb der Vorteile-Liste angezeigt wird. Standard: What’s Covered:.

Vorteile-Listenstil

Steuert, wie jeder Vorteil dargestellt wird. Standard: Checkmarks.

• Checkmarks
• Dots
• Dashes

’Special Offer’-Badge anzeigen

Blendet den oberen Badge im Widget-Header ein oder aus. Standard: aktiviert.

Special Offer-Badge-Text

Steuert den Text, der im Special Offer-Badge angezeigt wird. Standard: Special Offer.

Benutzerdefinierte CSS-Variablen

Verwende dieses Feld für erweitertes Styling. Gib nur durch Semikolons getrennte CSS-Variablendeklarationen ein. Vollständige CSS-Blöcke werden nicht unterstützt.

--cv-primary: #0f766e; --cv-border: #99f6e4; --cv-badge-special-bg: #0f766e;

Wichtig:

• Verwende in diesem Feld ausschließlich --cv-*-Variablen.
• Füge keine vollständigen CSS-Selektoren oder Regelblöcke ein.
• Nicht unterstützte Namen werden ignoriert.

Beispielanpassungen

Terracotta Warmth

& {
  --cv-primary: #c2410c;
  --cv-border: #f97316;
  --cv-border-muted: #fdba74;
  --cv-background: #fffbf5;
  --cv-background-gradient: linear-gradient(180deg, #fffbf5 0%, #ffedd5 60%, #fed7aa 100%);
  --cv-card-shadow: 0 10px 18px -8px rgb(140 60 10 / 0.18), 0 4px 8px -6px rgb(140 60 10 / 0.1);
  --cv-icon: #ea580c;
  --cv-text: #431407;
  --cv-muted-text: #9a3412;
  --cv-option-hover-border: #fb923c;
  --cv-option-selected-bg: #ffedd5;
  --cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 6px 10px -6px rgb(140 60 10 / 0.2);
  --cv-option-title: #431407;
  --cv-option-title-selected: #c2410c;
  --cv-price: #431407;
  --cv-price-selected: #ea580c;
  --cv-badge-special-bg: #ea580c;
  --cv-badge-special-text: #fff7ed;
  --cv-badge-popular-bg: #fff7ed;
  --cv-badge-popular-text: #c2410c;
  --cv-badge-popular-border: #fdba74;
  --cv-coverage-bg: #fed7aa;
  --cv-coverage-title: #c2410c;
  --cv-coverage-text: #431407;
  --cv-coverage-icon: #ea580c;
  --cv-footer-text: #9a3412;
  --cv-footer-brand: #ea580c;
  --cv-radio-accent: #ea580c;
  --cv-radius-card: 18px;
  --cv-radius-option: 12px;
  --cv-radius-badge: 999px;
  --cv-radius-coverage: 8px;
}

Conversion Pop

& {
  --cv-primary: #7c3aed;
  --cv-primary-contrast: #ffffff;
  --cv-border: #a78bfa;
  --cv-border-muted: #c4b5fd;
  --cv-background: #faf5ff;
  --cv-background-gradient: linear-gradient(160deg, #ede9fe 0%, #ddd6fe 40%, #f5f3ff 95%);
  --cv-card-shadow: 0 12px 20px -8px rgb(60 20 120 / 0.22), 0 4px 8px -6px rgb(60 20 120 / 0.12);
  --cv-icon: #7c3aed;
  --cv-text: #2e1065;
  --cv-muted-text: #5b21b6;
  --cv-option-hover-border: #a78bfa;
  --cv-option-selected-bg: #ede9fe;
  --cv-option-selected-shadow: 0 0 0 2px #c4b5fd, 0 6px 10px -6px rgb(60 20 120 / 0.2);
  --cv-option-title: #2e1065;
  --cv-option-title-selected: #6d28d9;
  --cv-price: #2e1065;
  --cv-price-selected: #7c3aed;
  --cv-badge-special-bg: #6d28d9;
  --cv-badge-special-text: #f5f3ff;
  --cv-badge-popular-bg: #ede9fe;
  --cv-badge-popular-text: #5b21b6;
  --cv-badge-popular-border: #c4b5fd;
  --cv-coverage-bg: #ddd6fe;
  --cv-coverage-title: #2e1065;
  --cv-coverage-text: #3b0764;
  --cv-coverage-icon: #7c3aed;
  --cv-footer-text: #5b21b6;
  --cv-footer-brand: #7c3aed;
  --cv-radio-accent: #7c3aed;
  --cv-radius-card: 0px;
  --cv-radius-option: 0px;
  --cv-radius-badge: 999px;
  --cv-radius-coverage: 0px;
}

Minimal / Neutral

Verwende dieses Design, wenn du einen saubereren, kontrastarmen Look bevorzugst.

--cv-border: #e5e7eb;
--cv-border-muted: #e5e7eb;
--cv-background: #ffffff;
--cv-background-gradient: #ffffff;
--cv-card-shadow: 0 8px 20px -12px rgb(15 23 42 / 0.2);
--cv-primary: #111111;
--cv-icon: #111111;
--cv-text: #0f172a;
--cv-muted-text: #64748b;
--cv-option-hover-border: #111111;
--cv-option-selected-bg: #f8fafc;
--cv-option-selected-shadow: 0 0 0 1px #e2e8f0, 0 10px 16px -12px rgb(15 23 42 / 0.25);
--cv-option-title: #0f172a;
--cv-option-title-selected: #111111;
--cv-price: #0f172a;
--cv-price-selected: #111111;
--cv-badge-special-bg: #111111;
--cv-badge-special-text: #ffffff;
--cv-coverage-bg: #f3f4f6;
--cv-coverage-title: #111111;
--cv-coverage-text: #111111;
--cv-coverage-icon: #111111;
--cv-footer-text: #475569;
--cv-footer-brand: #111111;
--cv-radio-accent: #111111;

Dark / Hoher Kontrast

Verwende dieses Design, wenn dein Storefront eine dunkle Produktseitengestaltung verwendet.

--cv-border: #374151;
--cv-border-muted: #1f2937;
--cv-background: #0f172a;
--cv-background-gradient: linear-gradient(135deg, #111827 0%, #0f172a 65%);
--cv-card-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.6);
--cv-primary: #fbbf24;
--cv-icon: #fbbf24;
--cv-text: #f9fafb;
--cv-muted-text: #9ca3af;
--cv-option-hover-border: #4b5563;
--cv-option-selected-bg: #1f2937;
--cv-option-selected-shadow: 0 0 0 2px #374151, 0 10px 16px -12px rgb(0 0 0 / 0.7);
--cv-option-title: #f9fafb;
--cv-option-title-selected: #fef3c7;
--cv-price: #f9fafb;
--cv-price-selected: #fbbf24;
--cv-badge-special-bg: #fbbf24;
--cv-badge-special-text: #111827;
--cv-coverage-bg: #111827;
--cv-coverage-title: #e5e7eb;
--cv-coverage-text: #cbd5f5;
--cv-coverage-icon: #fbbf24;
--cv-footer-text: #9ca3af;
--cv-footer-brand: #fbbf24;
--cv-radio-accent: #fbbf24;

Markenkonform

Verwende zuerst das Brand Colors-Design und füge dann einige Überschreibungen hinzu, wenn du eine stärkere Betonung oder weichere Ecken möchtest.

--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 8px 12px -10px rgb(154 52 18 / 0.2);
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #9a3412;
--cv-badge-popular-border: #fdba74;
--cv-radius-card: 18px;
--cv-radius-option: 14px;
--cv-radius-coverage: 10px;
--cv-radius-badge: 999px;

Wenn du volle Kontrolle statt designgesteuerter Farben möchtest, wechsle weg von Brand Colors und setze die relevanten --cv-*-Werte direkt.

CSS-Variablen-Referenz

Kernpalette und Oberfläche

Optionszustände

Badges

Coverage-Bereich

Fußzeile

Typografie und erweiterte Überschreibungen

Radius-Überschreibungen

Hinweise

• --cv-radius wird intern aus der Rundungs-Einstellung gesetzt, aber die aktuellen Widget-Stile verwenden die oben aufgeführten spezifischeren Radius-Variablen.
• --cv-primary-contrast ist im Theme-Mapping vorhanden, ändert aber derzeit keine sichtbaren Widget-Stile für sich allein.

Fehlerbehebung

Meine Änderungen werden nicht übernommen

Prüfe zuerst Folgendes:

• Bestätige, dass du die Werte in Custom CSS variables eingefügt hast.
• Bestätige, dass jeder Eintrag mit --cv- beginnt.
• Bestätige, dass Deklarationen mit Semikolons getrennt sind.
• Entferne alle Selektoren wie .class { ... } — das Feld akzeptiert nur Variablen.

Der Most Popular-Badge wird nicht angezeigt

Beide Bedingungen müssen erfüllt sein:

• Show ‘Most Popular’ badge ist aktiviert.
• Mindestens eine Garantieoption ist in deinen Garantieplandaten als most_popular markiert.

Vorteile werden nicht angezeigt

Prüfe zuerst Folgendes:

• Show perks ist aktiviert.
• Die ausgewählte Garantieoption enthält Vorteile-Daten.
• Perks heading und Perks list style sind wie erwartet konfiguriert.

Das Brand Colors-Design sieht nicht anders aus

Das Brand Colors-Preset ist auf Farbvariablen angewiesen, die bereits in deinem Shopify-Theme verfügbar sind. Wenn dein Theme keine ausgeprägten Werte für diese Farben bereitstellt, kann das Widget einem neutralen Stil ähneln. Versuche Folgendes:

• Wechsle zu einem anderen integrierten Design.
• Füge explizite --cv-*-Überschreibungen in die benutzerdefinierten CSS-Variablen ein.

Rundungsänderungen sind zu subtil

Die Rundung aktualisiert mehrere interne Radius-Werte gleichzeitig. Wenn du mehr Kontrolle möchtest, überschreibe --cv-radius-card, --cv-radius-option, --cv-radius-coverage und --cv-radius-badge einzeln.

Beginne mit einem integrierten Design-Preset und ergänze benutzerdefinierte CSS-Variablen nur dort, wo sie benötigt werden. Das ermöglicht die schnellste Einrichtung und einfachste Wartung.