К основному содержимому
Все коллекцииAPI и Интеграции
Редакторы кода CSS и JS

Редакторы кода CSS и JS

Как работать с редакторами для внесения изменений на сайт кодом

Rostislav Alyaev avatar
Автор: Rostislav Alyaev
Обновлено более года назад

О редакторах кода

Всем клиентам доступны 11 готовых шаблонов оформления магазина, которые уже настроены для корректной работы на разных девайсах, диагоналях экранов и браузерах. Смена шаблона происходит в 2 нажатия на странице Управление магазином → Оформление. Донастройка выбранного шаблона происходит на той же странице за счёт выбора опций оформления.

Редакторы кода позволяют внести точечные изменения во внешний вид и логику работы элементов сайта через добавление кода JS, HTML и CSS.

Для работы с редакторами требуются знания языков веб-разработки: JavaScript, HTML и CSS. Не рекомендуем добавлять в редакторы код, найденный на просторах интернета, так как это может навредить вашему сайту.


Где находятся редакторы

Оба редактора расположены в разделе Управление магазином → Оформление, на самом верху:

  • Редактор JS

  • Редактор CSS


Как работать через Редактор JS

Весь код, добавленный в Редактор, будет добавлен на все страницы сайта в конце блока <head> в том виде, в котором вы укажете его в редакторе. То есть JS-код следует указывать в HTML-теге <script>, иначе он не будет распознан браузером и не сработает.

Ввиду специфики скриптов в <head>, если ваш код обращается к элементам <body>, его нужно запускать после загрузки DOM, например, через событие DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
// содержание скрипта
});

Также вы можете использовать библиотку jQuery либо подключить собственные библиотеки через Редактор JS, разместив их до исполняемого кода.

Для вставки HTML-кода в определённый участок страницы также используйте JS-события после загрузки контента страницы.

Пример вставленного кода


Как работать через Редактор CSS

Весь код, добавленный в редактор, автоматически добавляется в тег <style> в <head> каждой страницы после всех стандартных стилей. То есть в самом редакторе нужно указывать целевой код стилей без HTML-тегов.

Если ваш стиль не применяется на сайте, обратите внимание на приоритетность вашего селектора по сравнению с селектором, который вы пытаетесь перезаписать.

Пример вставленного кода

Если у вас нет специалиста

На тарифе Sellavi Plus мы создаём для вас индивидуальный внешний вид сайта на основе вашего запроса с помощью прфоессиональнойго дизайнера и разработчика. В рамках тарифа наши специалисты сами разработают код и подключат его к вашему сайту 👌

За консультацией по тарифу обращайтесь в чат поддержки на платформе.

Нашли ответ на свой вопрос?