Брендирование

Виджет работает в собственном Shadow DOM: CSS вашего сайта не может его сломать, а его CSS не задевает ваш сайт. Чтобы виджет выглядел как ваш, есть три уровня настройки, каждый дополняет предыдущий.

Уровень 1 — настройкиСкопировать ссылку

Задаются в личном кабинете в разделе Внешний вид, там же живой предпросмотр чата, результатов поиска и кнопки. Цвета указываются в формате #1d4ed8.

Уровень 2 — CSS-переменныеСкопировать ссылку

Любую из этих переменных можно переопределить в стилях вашего сайта. !important не нужен: ваши правила важнее значений виджета.

У виджета на вашей странице три хоста: [data-lockstock-root] — подсказки, результаты, полноэкранный слой поиска и чат; [data-lockstock-launcher] — кнопка чата; lockstock-search — встроенное поле поиска. Задавайте переменные бренда сразу на всех трёх одним правилом. Подсказки и результаты под встроенным полем открываются в [data-lockstock-root], поэтому цвет, заданный только на lockstock-search, оставит их в старом цвете.

[data-lockstock-root],
[data-lockstock-launcher],
lockstock-search {
  --lockstock-accent: #0f766e;
  --lockstock-accent-foreground: #ffffff;
}

/* Поднять кнопку над баннером cookie */
[data-lockstock-launcher] {
  --lockstock-launcher-y: 96px;
}

Эти имена — стабильный контракт: мы можем добавлять переменные, а о переименовании или удалении предупредим заранее.

Уровень 3 — собственный CSSСкопировать ссылку

customCss применяется последним внутри Shadow DOM виджета — подсказки, результаты, полноэкранные слои, чат и каждое встроенное поле поиска, — поэтому им можно изменить там что угодно. На кнопку чата он не действует: её настраивайте уровнями 1 и 2. Ограничения: до 20 000 символов и без @import. Некорректные правила браузер просто пропустит.

Выбирайте элементы по этим атрибутам. Они — стабильный контракт, как и переменные; классы и остальная разметка — нет.

/* Квадратные карточки товаров с заметной рамкой в результатах */
[data-lockstock-results] [data-lockstock-product] {
  border-radius: 0;
  border-color: var(--lockstock-foreground);
}

/* Скрыть чипы, которые ИИ добавил сам */
[data-lockstock-chip="inferred"] {
  display: none;
}