Customize the PDP Upsell widget theme

Example-first guide for merchants who need a look outside the built-in presets.

Use this guide when the default themes are close, but not close enough. Each example below gives you a ready-to-paste set of Custom CSS. You can use them as guideline to create your own theme.

The fastest way is to copy one of the example themes, paste it into your favorite AI chat tool like ChatGPT and ask for the adjustments like Make it less round, primary color must be purple. Then you get the updated variables that you can just paste in the Theme Editor in Shopify.

You can also link this documentation in the chat, so the LLM has access to the complete list of CSS variables available.

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;
}

CSS Variables Reference

Use these variables in the Custom CSS field to customize the PDP Warranty Selector.

Custom CSS variables always take precedence of any customized values in the Widget Options.

Core Palette And Surface

--cv-primary : Main accent color for selected states and highlights.
--cv-primary-contrast: Contrast color paired with primary theme color. Present in theme mapping, but not currently used directly by widget styles.
--cv-border: Border color for outer warranty card.
--cv-border-muted: Default border color for warranty option rows.
--cv-background: Background color for each warranty option row.
--cv-background-gradient: Background or gradient for main warranty card.
--cv-card-shadow: Shadow around main warranty card.
--cv-icon: Color for widget icon near heading.
--cv-text: Primary text color across widget.
--cv-muted-text: Secondary text color for description and subdued copy.

Option States

--cv-option-hover-border: Border color when customer hovers warranty option.
--cv-option-selected-bg: Background color for selected warranty option.
--cv-option-selected-shadow : Shadow or outline for selected warranty option.
--cv-option-title: Default color for warranty option title.
--cv-option-title-selected: Title color for selected warranty option.
--cv-price: Default price color.
--cv-price-selected: Price color for selected warranty option.
--cv-radio-accent: Radio button accent color.

Badges

--cv-badge-special-bg: Background color for top Special Offer badge.
--cv-badge-special-text: Text color for top Special Offer badge.
--cv-badge-popular-bg: Background color for Most Popular badge text.
--cv-badge-popular-text Text color for Most Popular badge text.
--cv-badge-popular-border: Border color for Most Popular badge text.

Coverage Section

--cv-coverage-bg: Background color for perks or coverage panel.
--cv-coverage-title: Color for perks heading, like What's Covered .
--cv-coverage-text: Color for perks list text.
--cv-coverage-icon: Color for perks bullets, checkmarks, or list markers.

Footer

--cv-footer-text: Footer text color.
--cv-footer-brand: Color for Coverly brand text in footer.

Typography And Advanced Overrides

--cv-font-family: Font family override for widget.
--cv-text-color: Top-level text color override for widget. Can act as broader fallback over individual text elements.

Radius Overrides

--cv-radius-card: Corner radius for outer warranty card.
--cv-radius-option Corner radius for each warranty option row.
--cv-radius-coverage: Corner radius for perks or coverage panel.
--cv-radius-badge : Corner radius for badges.

Updated on: 04/05/2026

Was this article helpful?

Thank you!