Документация для премиум-шаблона
Color Shop Версия 2.0

О шаблоне


Спасибо, что приобрели шаблон, желаем успехов!
Шаблон Интернет-магазина Color Shop представляет собой легкую и удобную тему. Вы можете выбрать свою палитру для сайта с помощью специальной панели настроек.



Особенности шаблона:
  • Доступная цена
  • Бесконечное множество вариантов цветовой палитры шаблона
  • Наличие многоуровневого выпадающего меню
  • Наличие слайдшоу
  • Поддержка различных фильтров и диапозона цен
  • Адаптивность под телефоны и планшеты
  • Кроссбраузерная верстка
  • HTML5/CSS3
  • Поддержка конструктора шаблонов (каркас для всех модулей)
  • Подробная документация по установке и настройке
  • Техническая поддержка после покупки

Примечание
Под кроссбраузерностью понимается одинаковое отображение в последних версиях популярных браузеров: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Microsoft Edge, Opera.

Установка


Чтобы войти в панель управления, перейдите по ссылке:

http://ваш_сайт/panel/?a=cp

Перед установкой рекомендуем создать резервную копию сайта. Для этого перейдите в Панели управления в Дизайн » Резервное копирование шаблонов. Нажмите "Создать резервную копию".
В последующем, если у вас что-то пойдет не так, вы сможете
восстановить текущее оформление сайта.

Внимательно, шаг за шагом, выполняйте действия в этой инструкции,
и следуйте рекомендациям.
Перейдите в панель управления для установки.
  1. Активируйте модули:
    Интернет-магазин и др. нужные вам модули.

  2. Загрузите на сайт все содержимое из папки "Файловый менеджер" (Используйте FTP менеджер или создайте папки с помощью "Файлового менеджера" и загрузите в них файлы по очереди).

  3. Дизайн » Конструктор шаблонов

    Вставьте код из файла "Конструктор.txt" (находится в папке "Коды") и нажмите "Сохранить".

  4. Управление дизайном модуля » Таблица стилей (CSS)

    Замените код "Таблица стилей (CSS)" на код из файла "Таблица стилей (CSS).txt".

Общие настройки


Настройки » Общие настройки


  1. Впишите нужное название сайта.

  2. В пункте "Значение тега <!DOCTYPE>" впишите:
    <!DOCTYPE html>

  3. В пункте "Версия библиотеки jQuery" выберите:
    jquery-1.10.2.js

  4. В пункте "При переходе на главную страницу открывать" выберите модуль "Интернет-магазин"

    Рекомендация
    Для пункта "Тип формы по умолчанию для редактирования материалов"
    выбирите тип "BB-Codes + HTML", не рекомендуем использовать
    пункт "Визуальный редактор". Почему

Страницы сайта и модулей


Замена кода шаблона в модулях
  1. Перейдите в Управление дизайном

    1. В модулях "Интернет-магазин", "Фотоальбомы" и "Форум" замените коды страниц на соответствующие из папки "Коды".

      Например, в модуле "Интернет-магазин" нужно заменить код "Вид товара в каталоге" на код из папки "Коды/Интернет-магазин/Вид товара в каталоге.txt".

Настройки модулей


Для грамотной интеграции дизайна рекомендуется соблюдать
указанные на данной странице настройки.

Интернет-магазин » Настройки модуля

В пункте "Список категорий" установите тип "Раскрывающееся дерево".

В пункте "Размеры (ширина/высота в пикселях) для иконки товара" – 100 x 100.

В пункте "Размеры (ширина/высота в пикселях) для превью изображения товара" – 500 x 500.


В пункте "Настройки товарных блоков" установите значение кратные 4-м.


В пункте "Фильтры" выберите нужные значения и обязательно "Цену", а также для "Типа отображения меню фильтрации" установите значение "Наборы ссылок":


Новости сайта/Блог » Настройки модуля

В пункте "Поля для добавления материалов" обязательно должна стоять галочка напротив полей: Название материала, Краткое описание материала, Полный текст материала, Изображения.

Почтовые формы


Почтовые формы » Управление почтовыми формами

С помощью данного модуля вы можете настроить форму обратной связи или создать новую, выбрав для нее любые задуманные вами поля.

Работа с шаблоном


Поздравляем, установка успешно завершена!
Теперь можно перейти к редактированию шаблона "под себя".

В этом разделе докумендации рассматривается настройка некоторых
составляющих шаблона и их основные детали.

Выбор цвета


Выполните вход непосредственно на сайт в качестве администратора.

С помощью панели настроек справа задайте нужные цвета и нажмите "Получить код".
Скопируйте данный код.

Замените код в указанном промежутке в Таблице стилей (CSS):

Конструктор меню


Вызывается в верхнем меню в панели управления.

Дизайн » Конструктор меню

Добавляйте свои пункты в меню, также можно использовать вложенные пункты.


Рекомендация
Используйте в главном меню не больше 5-6 пунктов на верхнем уровне.

Слайдшоу


Управление дизайном » Главная страница Интернет-магазина

Здесь расположен код слайдшоу:

<div class="owl-slider">
<div id="owl-example" class="owl-carousel">
<div class="item"><a href="#"><img src="/slides/slide1.jpg" width="100%" /></a></div>
<div class="item"><a href="#"><img src="/slides/slide2.jpg" width="100%" /></a></div>
<div class="item"><a href="#"><img src="/slides/slide3.jpg" width="100%" /></a></div>
</div>
</div>
</div>

/slides/slide1.jpg – ссылка на изображение слайда;
# – сюда можно вставить ссылку на товар или любую другую ссылку.

В данном примере 3 слайда, но вы можете добавить или удалить слайды,
добавляя и убирая однотипные строки.

Категории магазина


Управление дизайном » Главная страница Интернет-магазина

Здесь расположен код 3-х категорий:

<div class="container container-nopad col-nopad">
<div class="clr">
<div class="col3"><a href="#"><img src="/slides/cat1.jpg" width="100%" /></a></div>
<div class="col3"><a href="#"><img src="/slides/cat2.jpg" width="100%" /></a></div>
<div class="col3"><a href="#"><img src="/slides/cat3.jpg" width="100%" /></a></div>
</div>
</div>

/slides/cat1.jpg – ссылка на изображение категории;
# – сюда можно вставить ссылку на категорию или любую другую ссылку.
col3 – количество колонок для категорий;

Примечание
В данном примере именно 3 категории, но вы можете изменить на 6,
добавив еще 3 однотипные строки. В случае, если вам нужно 4 категории или 8,
то используйте col4 вместо col3. По такому же принципу можно оставить 2 категории, col2.

Изображения категорий

Редактируя или создавая категории в Панели управления, вы можете загрузить большое изображение в качестве обложки категории.


Результат:

Тексты и баннеры


Стандартные тексты по типу "Премиум шаблон для uCoz" под названием сайта вы можете изменить просто, найдя текст в коде, в Верхней и Нижней части соответственно в Управлении дизайном.

Это же относится и к контактным данным и ссылкам на социальные сети в Нижней части сайта.

Баннер внизу вы можете найти в Нижней части сайта.

Баннер слева вы можете найти в Первом контейнере:

<div class="hb-block hb-empty"><a href="#"><img src="/slides/banner.jpg" width="100%" alt="" /></a></div>

/slides/banner.jpg – ссылка на изображение баннера;
# – ссылка на товар или любая другая ссылка.

Иконки


Font Awesome 4.7.0 – Библиотека из 675 иконок

Иконки вы можете заменить в коде, выбрав значки на этой странице: http://fontawesome.io/icons/. Нажмите на иконку и полученный код вставляйте на сайт вместо имеющегося кода такого вида:

<i class="fa fa-star" aria-hidden="true"></i>

Преимущество использования этих иконок заключается в том, что вы можете управлять их оформлением как оформлением обычного текста. Иконка может просто влиться в абзац , а может быть особенно оформлена. Вот простой пример оформления иконки с помощью CSS-стилей:

<div style="display:inline-block;font-size:32px;color:#fff;padding:40px;background:#00deff;border-radius: 100px;">
<i class="fa fa-star" aria-hidden="true"></i>
</div>

Результат:

Дополнительно


Что делать, если шаблон отображается "криво"?
Попробуйте установить шаблон заново и проверить его настройки. Если у вас по-прежнему не получается настроить сайт таким образом, чтобы он отображался как демо-сайт, обратитесь на нашу почту utemplate@list.ru

Как проверить актуальность шаблона?
Слева вверху, возле названия шаблона отображается его версия. По этой ссылке вы можете проверить актуальность или на странице шаблона на uTemplate.

Где купить этот и другие шаблоны от Урааа?
Все шаблоны представлены на сайте uTemplate, в официальном магазине шаблонов для uCoz.

Куда обратиться за доработкой шаблона "под себя"?
Ознакомьтесь со статьей в блоге uTemplate




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