Colors & Theme Sync

Make EcomCloser buttons match your WordPress theme automatically (Elementor or WP theme presets).

Auto Colors

What is this page?

This page explains how EcomCloser picks colors. If your theme (or Elementor Global Colors) defines primary/accent colors, EcomCloser automatically uses them. If not, it falls back to EcomCloser defaults.

Primary button Secondary button Green CTA

Pro tip: If your theme overrides button styles too aggressively, keep EcomCloser buttons as their own classes (ec-btn / eccBtn) and only sync colors via variables — this keeps layout consistent and avoids “invisible CTA” bugs.

How to control colors (2 options)

Option A — Elementor Global Colors (recommended)

Elementor → Site Settings → Global Colors
Set: Primary / Secondary / Accent / Text
EcomCloser will read variables like --e-global-color-primary

Option B — WordPress Theme Presets (block themes)

Your theme may define colors via theme.json presets
EcomCloser can read --wp--preset--color--primary (if present)
If not present, it uses EcomCloser defaults

Current color tokens (what EcomCloser uses)

These are the variables you can rely on in your landing CSS (or any EcomCloser UI). If you paste this bridge at the top of your landing CSS, your CTA colors will sync automatically.

/* EcomCloser auto-theme bridge */
.ec{
  --ec-primary-1: var(--e-global-color-primary, var(--wp--preset--color--primary, #6366f1));
  --ec-primary-2: var(--e-global-color-accent,  #8b5cf6);
  --ec-pink:      var(--e-global-color-secondary, var(--wp--preset--color--secondary, #ec4899));
  --ec-success:   var(--wp--preset--color--vivid-green-cyan, #22c55e);
  --ec-text:      var(--e-global-color-text, #0b0f14);
  --ec-muted:     #475569;
}

/* Example: buttons */
.ec-btn--primary{ background: linear-gradient(135deg, var(--ec-primary-1), var(--ec-primary-2)); }
.ec-btn--green{ background: var(--ec-success); }

Primary

Token: --ecc-primary-1

Accent

Token: --ecc-primary-2

Secondary

Token: --ecc-pink

Success

Token: --ecc-success

FAQ

Why not “inherit theme buttons automatically”?

Because themes often inject button CSS that breaks CTA visibility (e.g., violet text on violet button). Best practice: keep EcomCloser button layout stable, but sync its colors to theme via CSS variables.

Where should I put the bridge CSS?

Put it inside the landing section CSS (top of .ec styles) or in Elementor “Custom CSS / Custom Code”. Then replace hardcoded hex colors in your landing with variables.

How do I switch language here?

Add #lt at the end of URL to view Lithuanian version.

Tip: Use this page to debug “why CTA color changed” — it means your theme/Elementor global colors changed.