Документация для шаблона Shopium

Для начала

Спасибо за покупку шаблона!

Для начала установки шаблона перейдите в Панель Управления (дальше ПУ) Вашим сайтом (http://ваш-сайт.ucoz.ru/admin), и активируйте все необходимые модули.

Например, на демо-сайте, активированные такие модули – Интернет-магазин, Блог, Новости сайта, Форум, Пользователи, Поиск по сайту, Редактор страниц и Почтовые формы

Разархивируйте и перейдите в папку с шаблоном, в которой будут находиться 6 папок с различными цветовыми схемами. Откройте файл Цвета.png — номер цвета соответствует номеру цвета выбранной цветовой схемы. Выберите необходимую Вам цветовую схему и перейдите в папку с ней.

Активируйте модуль «Интернет-магазин».

Структура файлов и папок.

В папке с выбранной Вами цветовой схемой будут находиться такие файлы и папки (более подробное объяснение о структуре файлов и папок):

  • «Дополнительно» - папка содержит файл страницы «Ошибка 404».
  • «Информеры» - здесь вы найдете код основных информеров для вашего сайта.
  • «Модули» - в этой папке находится все разработанные модули для Вашего сайта, а также код двух глобальных контейнеров.
  • «Файлы» - папка содержит все файлы, необходимые для правильной работы шаблона. Содержимое этой папки нужно загрузить на сервер.
  • «style.txt» - файл стилей.
  • «tmpl.txt» - код который необходим для установления шаблона через конструктор шаблонов сервиса uCoz.

Загрузка файлов на сервер

Для начала перейдите в папку «Файлы», и загрузите файлы и папки на сервер (при этом следует соблюдать структуры файлов и папок).

Загрузить файлы на сервер можно двумя способами:

1. Через встроенный файловый менеджер ПУ: Главная - Файловый менеджер.

2. Через FTP-менеджер. Более подробную информацию вы можете найти здесь.

Далее, перейдите в ПУ: Главная - Файловый менеджер загрузите файл 404.htm из папки «Дополнительно».

После загрузки всех файлов из папок «Файлы» и «Дополнительно», Ваш файловый менеджер должен выглядеть со структурой вот так:

uCoz file manager

Установка дизайна сайта

Зайдите в Настройки - Общие настройки.

Найдите и измените версию библиотеки jQuery с 1.7.2 на 1.10.2 (Версия библиотеки jQuery: jquery-1.10.2.js).

Задайте параметр "Значение тега <!DOCTYPE>:"

<!DOCTYPE html>

Site Settings

Теперь, перейдите во вкладку Дизайн - Конструктор шаблонов. Скопируйте в форму «Конструктора шаблонов» содержимое файла tmpl.txt и нажмите «Создать шаблоны».

Далее, перейдите во вкладку Дизайн - Управление дизайном (CSS). Скопируйте в форму «Таблица стилей (CSS)» содержимое файла style.txt и нажмите «Сохранить».

Перейдите во вкладку Дизайн - Управление дизайном (шаблоны), на странице что загрузилась перейдите по ссылке «Первый контейнер». В форме «Первый контейнер» замените всё содержимым файла Первый контейнер.txt (файл находиться в папке Модули) и нажмите «Сохранить».

Далее, вернитесь во вкладку Управление дизайном (шаблоны), перейдите по ссылке «Глобальные блоки». На странице «Глобальные блоки» нажмите на кнопку «Добавить блок». Укажите название блока - PROMO

Если у вас уже есть блок с названием «PROMO» - ничего создавать и пересоздавать не нужно!

Перейдите во вкладку Дизайн - Управление дизайном (шаблоны), перейдите в глобальный блок «PROMO». В форме «PROMO» вставьте код из файла PROMO.txt (файл находиться в папке Модули) и нажмите «Сохранить».

Перейдите на сайт. Войдите администраторским аккаунтом на сайт. Перейдите на страницу «Обратная связь» (по умолчанию, http://ваш-сайт.ucoz.ru/index/0-3). Нажмите на иконку «Редактировать HTML-код»

Page Edit Html Code

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

Установка дизайна модулей сайта

В папке «Модули» Вы найдете разработанные модули для uCoz. Для установки модуля (например, новости сайта), Вам необходимо будет перейти во вкладку Дизайн - Управление дизайном (шаблоны) и найти на странице «Новости сайта». Зайдите в папку «Новости сайта», в ней будут находиться такие файлы:

Вид материалов.txt
Страница архива материалов.txt
Страница материала и комментариев к нему.txt

Вам нужно будет скопировать содержимое файла Вид материалов.txt, и заменить им, «Вид материалов» в ПУ сайтом в графе «Новости сайта».

Далее, Вам нужно будет скопировать содержимое файла «Страница архива материалов.txt», и заменить им, «Страница архива материалов» в ПУ сайтом в графе «Новости сайта». Скопировать «Страница материала и комментариев к нему.txt», и заменить им — «Страница материала и комментариев к нему.txt».

По такому принципу, заменяем полностью все модули, которые присутствуют в папке «Модули». Название файла соответствует шаблону в панели управления.

Для интернет-магазина разработаны две главные страницы. Выберите необходимую Главная страница магазина №1 или Главная страница магазина №2, и вставьте код в шаблон главная страница магазина.

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

Перейдите по ссылке ПУ — Новости сайтаНастройки модуля.

Поставьте галочки напротив «Краткое описание материала», «Дополнительное поле 1» и «Дополнительное поле 2».

Нажмите на «Сохранить».


Перейдите по ссылке ПУ — БлогНастройки модуля.

Установите значения:

«Количество материалов на главной странице» — 4

«Количество материалов на странице в категории» — 4

Поставьте галочку напротив «Краткое описание материала».

Нажмите на «Сохранить».


Перейдите по ссылке ПУ — Интернет-магазинНастройки модуля.

Корзина.

Сокращать названия товаров в корзине до: 30 символов

Список категорий.

Установите параметр «Тип отображения списка категорий» на «Раскрывающееся дерево».

Снимите галочку с «Выводить количество активных товаров возле названия категории».

Настройка загрузчика изображений.

Размеры (ширина/высота в пикселях) для превью изображения товара: 250х250

Качество сжатия JPG-изображений: 100

Цвет заливки пустых областей во время вписывания/обрезания изображения с соблюдением пропорций: FFFFFF

Настройки товарных блоков.

Показывать случайным образом M из N последних добавленных товаров: 8 из 10

Показывать случайным образом M из N самых просматриваемых товаров: 8 из 10

Показывать случайным образом M из N самых продаваемых товаров: 8 из 10

Максимально допустимое количество элементов в блоке похожих материалов: 8

Замена стандартных надписей

Перейдите по ссылке ПУЗамена стандартных надписей

Откройте ссылку «НАЗВАНИЯ МОДУЛЕЙ» и измените «Новости сайта» на «Акции».

Откройте ссылку «НОВОСТИ САЙТА» и измените «Архив новостей» на «Архив акций».

Откройте ссылку «ФОРМА ДОБАВЛЕНИЯ МОДУЛЯ "НОВОСТИ САЙТА"» и измените «Дополнительное поле 1» на «Скидка», «Дополнительное поле 2» на «Условия».

Нажмите на кнопку «Сохранить».

Установка информеров

После успешной установки модулей, перейдите по ссылке Главная - Информеры и создайте информеры (нажмите на кнопку «Создать информер») в соответствующем порядке:

 

Новинки

Название информера: Новинки

Раздел: Интернет-магазин

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 8

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «1 Новинки.txt» (папка «Информеры»)

 

Популярное

Название информера: Популярное

Раздел: Интернет-магазин

Тип данных: Материалы

Способ сортировки: Количество просмотров D

Количество материалов: 5

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «2 Популярное.txt» (папка «Информеры»)

 

Cамый популярный товар

Название информера: Cамый популярный товар

Раздел: Интернет-магазин

Тип данных: Материалы

Способ сортировки: Количество просмотров D

Количество материалов: 1

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «3 Самый популярный товар.txt» (папка «Информеры»)

 

Самый продаваемый товар

Название информера: Самый продаваемый товар

Раздел: Интернет-магазин

Тип данных: Материалы

Способ сортировки: Количество продаж D

Количество материалов: 1

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «4 Самый продаваемый товар.txt» (папка «Информеры»)

 

Акции №1

Название информера: Акции №1

Раздел: Новости сайта

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 5

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «5 Акции №1.txt» (папка «Информеры»)

 

Акции №2

Название информера: Акции №2

Раздел: Новости сайта

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 5

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «6 Акции №2.txt» (папка «Информеры»)

 

Блог

Название информера: Блог

Раздел: Блог

Тип данных: Материалы

Способ сортировки: Дата добавления материала D

Количество материалов: 3

Количество колонок: 1

Нажмите на кнопку «Управление дизайном информера», и вставьте с заменой код из файла «7 Блог.txt» (папка «Информеры»)

Меню

Перейдите по ссылке ПУДизайнКонструктор меню

Оптимизируйте основное меню сайта. Например, вот так:

Если вам нужно добавить над меню «флажок» с надписью – нажмите на иконку редактирования необходимого пункта меню.

В окне, что открылось нажмите на ссылку «Опции», и в область для ввода текста введите:

best-tie — для флажка с надписью «Лучшее».

sale-tie — для флажка с надписью «Новое» .

Более наглядно:

Нажмите на кнопку «Применить»

Блоки на главной странице

Блок «Специальная пропозиция» формируется на 34 строке (<section class="main-special-deal">) в шаблоне «Главная страница магазина», модуля – Интернет-магазин.

Структура:

<section class="main-special-deal">
 <div class="msd-text">
 <div class="special-text">Специальная пропозиция</div>
 <div class="special-product">iPhone 7 64GB со скидкой 15%</div>
 <a href="ссылка-на-страницу">Узнать подробнее</a>
 </div>
 <img src="ссылка-на-изображение" alt="special">
</section>

 

Блок с категориями (вторая главная страница) формируется на 47 строке (<ul class="clearfix">) в шаблоне «Главная страница магазина», модуля – Интернет-магазин.

Структура:

<li>
<a href="ссылка-на-категорию">
<div><img src="ссылка-на-изображение" alt="Категория"></div>
<span>Название категории</span></a>
<p>Описание категории.</p>
</li>

 

Блок «Горячее предложение» формируется на 21 строке (<div class="hot-deal">) в глобальном блоке «Первый контейнер».

Структура:

<div class="hot-deal">
<img src="ссылка-на-изображение" alt="special">
<div class="hot-deal-count clearfix" data-time-year="ГОД" data-time-month="НОМЕР МЕСЯЦА" data-time-day="ЧИСЛО" data-time-hour="ЧАС"></div>
<div class="hot-deal-text">
<small>Ограниченое предложение</small>
<span>Получите скидку на новый iPhone 7</span>
<div class="sbtn">
<a href="ссылка-на-страницу">Смотреть</a>
<span></span>
</div>
</div>

 

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

Предположим, что окончание специального предложения будет 1 января 2017 года в 00:00.

Для этого в структуру блока запишем следующие данные:

data-time-year="2017" data-time-month="1" data-time-day="1" data-time-hour="0"

 

Или следующий пример.

Предположим, что окончание специального предложения будет 10 марта 2017 года в 15:00.

Для этого в структуру блока запишем следующие данные:

data-time-year="2017" data-time-month="3" data-time-day="10" data-time-hour="15"

 

Блок с преимуществами формируется на 12 строке (<ul class="mf5 clearfix">) в глобальном блоке «PROMO».

Структура:

<li>
<a href="#">
<div class="mf-icon"><span class="flaticon-shopping-cart-1"></span></div>
<div class="mf-title">Название</div>
<div class="mf-body">Описание.</div>
</a>
</li>

 

По умолчанию, используется 5 блоков информации. Если вам нужно использовать 4 – замените класс (на 12 строке) на mf4 (<ul class="mf4 clearfix">).

Хедер и футер

Изменить контактные данные в хедере (шапке сайта) можно на строке 6 и 7.

<a href="tel:+УКАЖИТЕ+НОМЕР+ТЕЛЕФОНА"><span class="flaticon-phone-call top-text-icon"></span><span class="tht-up-text">+ НОМЕР ТЕЛЕФОНА</span></a>

и

<a href="mailto:УКАЖИТЕ@ПОЧТУ"><span class="flaticon-envelope top-text-icon"></span><span class="tht-up-text">ПОЧТА</span></a>

 

Аналогично, вы можете изменить контактные данные в футере (подвале сайта) и на странице контактов.

Также, в футере вы можете указать ссылки на социальные страницы и другие страницы вашего сайта.

Изменение иконок на примере блока с преимуществами

Перейдите сюда – http://shopium-temp.do.am/f/icon.html

Выберете необходимую вам иконку, скопируйте её класс, например flaticon-arrow (без точки).

Далее перейдите "Панель управления" - "Управление дизайном" - глобальный блок "PROMO" на строку 15 <div class="mf-icon"><span class="flaticon-shopping-cart-1"></span></div>

Вам нужно будет удалить flaticon-shopping-cart-1 и заменить на необходимую иконку (в нашем случае flaticon-arrow). Сохраните изменения.

В других блоках иконки можно менять аналогичным способом.

Если нужно вставить иконку в текст/ссылку используйте следующую конструкцию:

<span class="название-класса"></span>

Наполнение

При добавлении материалов в модули «Акции» или «Блог» не забудьте заполнить «краткое описание». Для этого обязательно переключитесь на вкладку «Панель HTML кодов».

Информация из «краткого описания» будет показана в информерах и на страницах архива материалов.

 

Перед добавлением товаров в интернет-магазин, создайте нужное вам количество категорий (панель управления — интернет-магазин — категории товаров).

Если вам нужно использовать опции товаров, то для их добавления перейдите в Панель управления — интернет-магазин — Опции товаров.

На странице «Опции товаров» нажмите на ссылку «Добавить опцию» — введите название опции, выберите категорию на которую опция будет распространяться, введите варианты значений (каждое значение из новой строки), и обязательно установите галочку напротив «выводить в виде "radio buttons"».

Более наглядно:

product-options

 

Также, при добавлении товаров, установите галочку на странице товара, что хотите использовать созданную ранее опцию.

 

При добавлении товаров в блок «с этим товаром покупают», оптимальное количество товаров — 4 (или кратное 4).

ЧаВо

1. Работает ли в шаблоне конструктор блоков?

— Да.


2. Как быстро изменить цветовую схему?

Выберите необходимую Вам цветовую схему и перейдите в папку с ней. Загрузите содержимое папки «Файлы» на сервер (с заменой, если используете FTP-клиент). Более подробная инструкция в шаге «Загрузка файлов на сервер».


Частые вопросы будут пополняться по мере возможности и необходимости.