КАРТОЧКА ТОВАРА · BRIGHT-ROAST.RU (демо-страница мерчанта)

Варианты кастомизации Snova Widget

Виджет — Shadow DOM веб-компонент, все цвета внутри заданы через CSS custom properties (--snova-*) с дефолтами. Их можно переопределить с сайта мерчанта, ничего не пересобирая.

1. По умолчанию

Без переопределений — встроенная тёмная тема виджета.

<snova-widget apikey="..." ...></snova-widget>

2. Один акцентный цвет

Инлайн-стилем переопределён только акцент — под фирменный цвет бренда.

<snova-widget style="--snova-accent: #ff5c33;" ...>

3. Полная светлая тема

Инлайн-стилем переопределены все пять переменных сразу.

<snova-widget style="--snova-bg: #fff; --snova-accent: #7c3aed; ..." ...>

4. Тема через CSS-класс

Тот же результат, но переменные заданы обычным CSS-правилом (.brand-forest в <style> страницы) — удобно, когда тема переиспользуется на нескольких карточках.

snova-widget.brand-forest { --snova-accent: #22c55e; ... }