Theming & placement

Theming from the dashboard

Storefront → Install & Theme sets colours, type and radii for every widget at once. The values are served with the SDK, so changes take effect on next page load with no redeploy on your side.

Each widget also has its own screen under Storefront for options specific to it — what a review list shows, how a gallery lays out, which panels the loyalty widget renders.

Theming with CSS variables

Everything the dashboard sets is a CSS custom property, which means you can override any of it from your own stylesheet. Define them on :root, or on a wrapper to theme one placement differently.

:root {
  --evident-primary: #111827;
  --evident-primary-hover: #1f2937;
  --evident-text: #111827;
  --evident-text-muted: #6b7280;
  --evident-border: #e5e7eb;
  --evident-background: #ffffff;
  --evident-background-alt: #f9fafb;
  --evident-star-color: #f59e0b;
  --evident-star-empty: #e5e7eb;
  --evident-verified: #059669;
  --evident-error: #dc2626;
  --evident-success: #059669;
  --evident-font-family: inherit;
  --evident-font-size-base: 15px;
  --evident-radius: 6px;
  --evident-radius-lg: 12px;
}

--evident-font-family: inherit is usually the right answer — it makes reviews take your storefront’s type without you naming a font, and survives a rebrand.

Set the variables rather than writing rules against the widget’s internal class names. Those are implementation detail and will change.

Where to put things

Placement moves conversion more than styling does.

Product page. A star-badge immediately under the product title, with data-scroll-target pointing at your review section, so the rating is visible in the first screenful and clicking it goes somewhere. The review-list below the description — not in a tab. Reviews inside a collapsed tab are read by a fraction of the people who would read them inline.

Product cards. A star-badge on each card in collection and search listings. This is the highest-leverage single placement in most stores: it is the only evidence a shopper sees before choosing which product to open.

Homepage. A review-carousel, or a gallery of customer photos. Both are store-wide and need no product ID.

Cart and checkout. A carousel or a small gallery near the checkout button, if your platform lets you place content there.

FAQ. A faq widget on the product page catches pre-purchase objections at the moment they occur. Store-wide FAQs cascade into every product’s widget automatically, so shipping and returns answers need writing once.

Multiple placements of the same widget

Fine, and common — a star badge in the header and another next to the price. Each container mounts independently.

Custom storefronts

On React, Next.js, Vue and similar, the DOM watching means a container your framework renders is mounted automatically. If you would rather be explicit, use window.Evident?.mount(el) and unmount(el) in a lifecycle hook. The optional chaining matters — the SDK may not have finished loading on first paint, and the container will be picked up regardless when it does.

See Headless storefronts for a complete component.