# Редактирование шаблона сайта

Шаблоны позволяют настроить внешний вид витрины путем правки HTML-верстки и CSS-стилей страниц. В отличие от настроек параметров витрины эта возможность предполагает некоторые знания в верстке и Веб-разработке. Но если результат не будет соответствовать ожидаемому, Вы всегда сможете сбросить шаблоны на значение по умолчанию.

Из ЛК Кактус войдите в редактор Интерннт-магазина, откройте админпанель и выберите в ней вкладку "шаблоны".

[![image-1592831349565.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831349565.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831349565.png)

[![image-1592831426154.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831426154.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831426154.png)

[![image-1592831610273.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831610273.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831610273.png)

Слева имеется список шаблонов, каждый из которых отвечает за отображение определенного компонента витрины. Шаблоны бывают двух видов. Стили - это обычный css:

[![image-1592831904009.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831904009.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831904009.png)

Для простоты то что возможно рекомендуется делать именно при помощи редактирования стилей. Например чтобы скрыть ненужный элемент проще всего задать ему стиль display: none; Имя CSS-класса соответствующего элемента можно найти в инспекторе браузера, который открывается по F12.

[![image-1592832149214.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592832149214.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592832149214.png)

HTML разметка представляет собой шаблоны популярного фреймворка VueJS. Это по сути html-код, но с добавлением полей (красная рамка) и директив (синяя рамка):

[![image-1592832876559.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592832876559.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592832876559.png)

Синтаксис шаблонов описан в [документации Vue](https://ru.vuejs.org/v2/guide/).

Изменения в шаблоне сохраняются в три этапа. Что позволяет Вам разрабатывать и отлаживать свой код сколько угодно времени. А Ваши покупатели при этом будут видеть предыдущую, стабильную, уже отлаженную версию магазина.

Изменения в коде сразу же отображаются во внешнем виде витрины как только редактор кода теряет фокус. Но в таком виде они будут потеряны при закрытии страницы в браузере, что удобно для быстрых экспериментов. Покупатели их не увидят.

Чтобы сохранить шаблон как черновик нажмите кнопку:

[![image-1592836465530.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592836465530.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592836465530.png)

Изменения не пропадут при выходе из браузера. Но будут видны только если Вы вошли из ЛК в витрину в режиме редактора. Покупатели их по-прежнему не увидят.

Чтобы сделать изменения видимыми покупателю нажмите кнопку:

[![image-1592836711746.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592836711746.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592836711746.png)

Кнопка "сбросить черновик" вернет шаблоны магазина к предыдущей опубликованной версии.

Можно удалить все Ваши изменения шаблона независимо от того опубликованы они или нет и вернуть магазин к версии по умолчанию:

[![image-1592836873239.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592836873239.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592836873239.png)

### Пример. Правка на странице товара.

Заменим надпись "Весь товар сертифицирован" на ссылку на страницу контактов.

[![image-1592838821051.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592838821051.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592838821051.png)

Находим отмеченный красной рамкой шаблон.

[![image-1592839163796.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592839163796.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592839163796.png)

Заменяем текст в синей рамке на следующий:

```HTML
<router-link class="cactus-item__page cactus-color__hover-text"
	to="/contacts"
>
	<i class="fe-phone cactus-item__page-icon"></i>
	<div class="cactus-item__page-title">Контакты</div>
</router-link>
```

Нажимаем кнопку "Сохранить". Смотрим полученный результат:

[![image-1592839520783.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592839520783.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592839520783.png)

Если он нас устраивает, возвращаемся в редактор шаблонов и нажимаем кнопку "Опубликовать", Чтобы результат стал виден покупателям.