Начало

Благодарим за покупку данного шаблона!


ORGANIC — адаптивный шаблон для интернет-магазина uCoz. Подойдет для сайта абсолютно любой тематики.

Преимущества:
  • Современный дизайн
  • HTML5 и CSS3
  • Адаптивность
  • Кроссбраузерная верстка
  • Чистый ручной код
  • Векторные иконки «Font Awesome»
  • Векторные иконки «Media Icons»
  • Конструктор шаблонов
  • Конструктор меню
  • Конструктор блоков
  • Обновленный вид материалов блога
  • Обновленный вид фотоальбомов
  • Полная поддержка модуля «Интернет-магазин»:
    • Новое стильное оформление модуля
    • Два варианта вида товаров [сетка/список]
    • Надпись "NEW" для новых товаров
    • Вывод размера скидки для каждого товара
    • Обновленная страница оформления заказа
  • Уникальное оформление страниц:
    • Информация о сайте
    • Обратная связь
    • Ошибка 404
    • Сайт временно отключен
  • Две темы: светлая и темная
  • Неограниченное количество цветовых схем
  • Готовые типы отображения сайта на выбор ("широкий", "узкий", "коробка")
  • 90 готовых фоновых изображений (для типов отображения сайта "узкий" и "коробка")
  • CSS3-анимация элементов
  • Расширенная документация по установке и настройке шаблона

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


Установка шаблона

Установка шаблона

Установка шаблона займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Перед установкой сделайте полный бэкап шаблонов и файлов дизайна на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в соответствующем разделе: Управление дизайном » Backup шаблонов.
Чтобы ваш сайт выглядел как демонстрационный, активируйте следующие модули:
  • Редактор страниц
  • Интернет-магазин
  • Фотоальбомы
  • Блог
  • Почтовые формы

Также не забудьте активировать другие необходимые вам модули. Если модуль активровать после установки шаблона, он не будет выглядеть должным образом. Это особенность всех нестандартных шаблонов для uCoz.


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

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

Зайдите в раздел общих настроек: Настройки » Общие настройки:
Установите следующие значения полей:

Дату сегодняшнего дня выводить как "Сегодня":
 
Версия библиотеки jQuery:
jquery-1.10.2.js
При переходе на главную страницу открывать:
Интернет-магазин
Значение тега <!DOCTYPE>:
<!DOCTYPE html>
Не рекомендуется использовать визуальный редактор материалов, т.к. он создает сложную структуру кода, оставляя при этом много ненужных тегов. В процессе редактирования материалов данные теги могут оказаться незакрытыми, в результате чего вероятность некорректного отображения элементов дизайна увеличивается. Чтобы отключить визуальный редактор, задайте следующее значение соответствующего поля (это лишь рекомендация от разработчика, делать это не обязательно):
  • Тип формы по умолчанию для редактирования материалов: BB-codes + HTML или Чистый HTML

Перед переходом к следующему шагу убедитесь, что вы установили значение тега <!DOCTYPE>, про этот пункт очень часто забывают либо не придают ему особого значения. Значение данного тега должно быть таким: <!DOCTYPE html>


Установка шаблона Настройка модулей

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

Интернет-магазин


Зайдите в раздел настроек интернет-магазина: Интернет-магазин » Настройки модуля Установите следующие значения полей:

Количество колонок для отображения товара:
1
Тег для обрамления одноколоночного списка:
div
Ширина колонки в каталоге:
0
Разделитель для генератора пути от главной сайта к категориям и страницам магазина:
<i class="fa fa-angle-right"></i>
Сокращать названия товаров в корзине до:
50
символов
Тип отображения списка категорий:
Раскрывающееся дерево
Размеры (ширина/высота в пикселях) для иконки товара:
80 x 70
Размеры (ширина/высота в пикселях) для превью изображения товара:
400 x 350
Способ соблюдения пропорций изображения при нарезке превью и иконок:
Вписывать
Цвет заливки пустых областей во время вписывания/обрезания изображения с соблюдением пропорций:
ffffff
Показывать случайным образом M из N последних добавленных товаров:
6 из 10
Показывать случайным образом M из N самых просматриваемых товаров:
6 из 10
Показывать случайным образом M из N самых продаваемых товаров:
6 из 10

Зайдите в раздел управления дизайном интернет-магазина: Дизайн » Управление дизайном (шаблоны) — Замените шаблон Вид товара в каталоге на код ниже:
Код доступен только в купленной версии шаблона

Блог


Зайдите в раздел управления дизайном Дизайн » Управление дизайном (шаблоны), откройте шаблон Вид материалов для модуля Блог
Замените шаблон Вид материалов на код ниже:
Код доступен только в купленной версии шаблона
Рекомендуется активировать поле Краткое описание материала. Сделать это можно в разделе настроек материалов блога: Блог » Настройки модуля. Для этого установите две галочки напротив поля Краткое описание

Фотоальбомы


Зайдите в настройки модуля фотоальбомов: Фотоальбомы » Настройки модуля и установите следующие значние полей:

Количество колонок для материалов:
3
Количество колонок для материалов:
500 x 365
Размеры фотографии, выводимой на отдельной странице:
870 x 870

Зайдите в раздел управления дизайном Дизайн » Управление дизайном (шаблоны), откройте шаблон Вид фотографий для модуля Фотоальбомы Замените шаблон Вид фотографий на код ниже:
Код доступен только в купленной версии шаблона
Общие настройки Почтовые формы

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

Зайдите в раздел управления почтовыми формами: Почтовые формы » Управление почтовыми формами Создайте новую почтовую форму, название можно выбрать любое, на демо-сайте она называется "Почтовая форма 2". Зайдите в ее конструктор полей: 1. Создайте два новых поля типа text. Первое поле назовите Имя, второе поле — Номер телефона.
2. Создайте новое поле типа policy, назовите его Я согласен(а) на обработку персональных данных.

В итоге у вас должно получиться шесть полей как на скриншоте ниже: После создания полей почтовой формы нажмите на иконку Управление дизайном: Замените код шаблона почтовой формы на код ниже и сохраните:
Код доступен только в купленной версии шаблона

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

Настройка страниц

Откройте раздел управления страницами сайта: Редактор страниц » Управление страницами сайта Для страниц Информация о сайте и Обратная связь нужно задать персональный шаблон. Для этого поочередно напротив каждой из страниц нажмите на ссылку Изменить информацию. После поставьте галочку напротив надписи Использовать персональный шаблон для страницы

Убедитесь, что персональные шаблоны заданы для двух страниц: Информация о сайте и Обратная связь.


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

Информеры

Откройте раздел управления информерами: Информеры

Информер популярных товаров


Создайте информер со следующими значениями полей:

Раздел:
Интернет-магазин
Тип данных:
Материалы
Способ сортировки:
Количество просмотров D
Количество материалов:
6
Количество колонок:
1

Замените шаблон данного информера на код ниже:
Код доступен только в купленной версии шаблона

Информер материалов блога


Создайте информер со следующими значениями полей:

Раздел:
Блог
Тип данных:
Материалы
Способ сортировки:
Дата добавления материала D
Количество материалов:
3
Количество колонок:
1

Замените шаблон данного информера на код ниже:
Код доступен только в купленной версии шаблона
Настройка страниц Загрузка файлов

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

Загрузите содержимое папки /upload/ в корень сайта через FTP.

Инструкцию по переносу файлов через FTP можно найти на официальном форуме uCoz по ссылке: http://forum.ucoz.ru/forum/33-8027-1. Конечно, можно воспользоваться и стандартной загрузкой файлов с помощью файлового менеджера, но это долго, и можно пропустить какой-нибудь файл.

Повторяем, загрузить нужно именно содержимое папки /upload/, а не ее саму.


Файл 404.htm (это страница ошибки 404) загрузите вручную с помощью файлового менеджера в корень вашего сайта.


Информеры Конструктор шаблонов

Конструктор шаблонов

Зайдите в раздел Дизайн » Конструктор шаблонов: Скопируйте код ниже, вставьте его в поле конструктора шаблонов, нажмите кнопку Создать шаблоны
Код доступен только в купленной версии шаблона
Загрузка файлов Таблица стилей (CSS)

Таблица стилей (CSS)

Зайдите в раздел редактирования таблицы стилей: Дизайн » Управление дизайном (CSS) Замените все содержимое ее поля на код ниже и сохраните:
Код доступен только в купленной версии шаблона
Конструктор шаблонов Восстановление из бэкапа

Восстановление резервной копии

Зайдите в раздел резервного копирования шаблонов Дизайн » Управлени дизайном (шаблоны) » Backup шаблонов, найдите там резервную копию **********.zip **.**.**** **:** и восстановите ее:

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


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


Таблица стилей (CSS) Настройка шаблона

Настройка шаблона

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

Восстановление из бэкапа Логотип

Логотип

логотип представляет из себя текст, который можно изменить в верхней части сайта. Вы можете использовать изображение в качестве логотипа. Для этого слово ORGANIC замените на код
Код доступен только в купленной версии шаблона


Где
/img/logo.png
— путь до вашего изображения

Рекомендуемые размеры для изображения логотипа:
— Ширина: не более 230px
— Высота: 50px


Настройка шаблона Меню

Меню

Меню сайта редактируется с помощью конструктора меню: Дизайн » Конструктор меню Пункты меню можно создавать, перемещать, вкладывать друг в друга (для создания выпадающего меню), а также редактировать и удалять.

Если вам не нужно указывать ссылку, например, для главного пункта выпадающего меню, тогда для данного пункта в поле URL адрес укажите следующий код:
javascript:void(0)

Пометки «новое» и «горячее»

Эти пометки появляются, если добавить для пунктов меню определенный CSS-класс. Нажмите на редактирование какого-нибудь пункта. В опциях задайте один из двух классов:

menu-hint1
— для вывода надписи «новое»

menu-hint2
— для вывода надписи «горячее» Логотип Иконки

Иконки

Иконочный шрифт «Font Awesome» версии 4.7.0»


Официальный сайт шрифта: fontawesome.io.

Всю документацию можно найти на официальном сайте, поэтому тут будут описаны лишь основные аспекты работы с ними.

Вы можете разместить иконки практически в любом месте, для этого необходимо вставить HTML-код следующего вида:
Код доступен только в купленной версии шаблона
Где [icon] — класс, соответствующий каждой иконке (квадратные скобки следует опустить). Например, добавив такой код
Код доступен только в купленной версии шаблона
мы получим иконку смайлика: . Данные иконки можно оформлять с помощью CSS почти так же, как и обычный текст: менять размер, цвет, добавлять тени и т.п. Например, раскрасим иконку в оранжевый цвет и увеличим размер, код будет выглядеть так:
Код доступен только в купленной версии шаблона
Вот что в итоге получилось:


Иконочный шрифт «Media Icons» версии 1.0.2»


Список всех иконок: http://themes-pixeden.com/font-demos/media-icons/

С этими иконка практически все как и с иконками Font Awesome. Единственное различие это отсутствие дополнительного класса
fa
.

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


Где [icon] — класс, соответствующий каждой иконке (квадратные скобки следует опустить). Например, добавив такой код
Код доступен только в купленной версии шаблона
, мы получим иконку сыра:



Меню Цветовая схема, контейнер, фон

Цветовая схема, тип контейнера, фон, тема

На демо-сайте шаблона в верхнем левом углу есть панель настроек шаблона. Выберите нужный вам цвет, тип контейнера, фоновое изображение (фоновое изображение доступно только для типов контейнера "узкий" или "коробка"), тему, сгенерируйте стили, скопируйте их и замените ими содержимое файла: /css/theme.css

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

Дополнительные настройки

Переменные в скриптах


В самом начале файла /js/scripts.js задано несколько переменных:
Код доступен только в купленной версии шаблона
animateIt — CSS3-анимация элементов, допустимые значения:
  • true
    — включена
  • false
    — отключена
blogCols — количество колонок материалов в блоге, допустимые значения:
  • 1
    — одна колонка
  • 2
    — две колонки
gViewMode — тип отображения товаров по умолчанию, допустимые значения:
  • grid
    — сетка
  • list
    — список
newDays — количество дней с момента добавления товара, когда будет показываться значек "NEW"

Страница оформления заказа


Чтобы способы оплаты выглядели как на демо-сайте шаблона, необходимо их описания оборачивать в тег с классом pl-text
Код доступен только в купленной версии шаблона
. Это касается только способов оплаты.

Пример на скриншоте: Цветовая схема, контейнер, фон Редактирование страниц

Редактирование страниц

В данном разделе описана работа с кодом основных страниц, изменение некоторых элементов дизайна.

Дополнительно Главная страница

Главная страница

Все элементы главной страницы редактируются в шаблоне главной страницы магазина: Дизайн » Управление дизайном (шаблоны) » Интернет-магазин » Главная страница магазина

Слайдер контента

Общий HTML-код слайдера выглядит так:
Код доступен только в купленной версии шаблона
Код отдельного слайда:
Код доступен только в купленной версии шаблона
/img/slide1.jpg
— путь до фонового изображения

Код доступен только в купленной версии шаблона
— замените символ решетки на URL нужной вам страницы

Если у вас темное изображение в слайде, для блока с классом
slide-content
добавьте через пробел дополнительный класс
slide-black
(пример есть в коде второго слайда)

Некоторые настройки слайдера можно поменять в файле скриптов /js/scripts.js — найдите там код:
Код доступен только в купленной версии шаблона
Код доступен только в купленной версии шаблона
— время анимации смены слайда в миллисекундах

Код доступен только в купленной версии шаблона
— автоматическая смена слайдов (значения: true/false)

Код доступен только в купленной версии шаблона
— время показа слайда в миллисекундах

Блоки с иконками

Код блока выглядит так:
Код доступен только в купленной версии шаблона
Где
Код доступен только в купленной версии шаблона
— код иконки (см. раздел "Иконки").

Редактирование страниц Информация о сайте

Информация о сайте

Все элементы страницы "информация о сайте" редактируются в ее индивидуальном шаблоне: Дизайн » Управление дизайном (шаблоны) » Редактор страниц » Информация о сайте

Блоки счетчиков

Код отдельного блока выглядит так:
Код доступен только в купленной версии шаблона
Код доступен только в купленной версии шаблона
— в атрибуте "data-count" укажите свое число

Главная страница Обратная связь

Обратная связь

Все элементы страницы "обратная свзяь" редактируются в ее индивидуальном шаблоне: Дизайн » Управление дизайном (шаблоны) » Редактор страниц » Обратная связь

Карта от Google

Ее код это фрейм, в атрибуте "src" которого указана просто ссылка на карту с нужным вам адресом:
Код доступен только в купленной версии шаблона


Информация о сайте Сайт временно отключен

Сайт временно отключен

На данной странице есть счетчик обратного отсчета, задать дату, до которой будет производиться отсчет, можно в файле скриптов /js/scripts.js

Код счетчика выглядит следующим образом (в нем уже есть вся необходимая информация):
Код доступен только в купленной версии шаблона

Если страница "Сайт временно отключен" на вашем сайте отличается от того, что вы видите на скриншоте выше или демо-сайте, проделайте следующее:

1. Откройте шаблон Страница "Сайт временно отключен" в разделе управления дизайном.
2. Замените код данного шаблона на код ниже.

Код доступен только в купленной версии шаблона

Обратная связь Советы и замечания

Советы и замечания

  1. Шаблон после установки отображается криво
    Проверьте, установлено ли значение тега <!DOCTYPE>. Про него часто забывают, даже если в инструкции это написано. Значение данного тега должно быть следующим: <!DOCTYPE html>
  2. Меню отображается криво или "съехало"
    Вероятно, пункты меню не вмещаются из-за их количества или их размеров. Решение — уменьшить количество пунктов меню, или сократить их названия, например, изменить "Главная страница" на просто "Главная".
  3. Некоторые страницы сайта отображаются не так, как на демо-сайте
    Проверьте, выполнили вы последний пункт установки шаблона "Восстановление из бэкапа". Это один из самых важных шагов.
  4. Я активировал модуль, а он отображается криво с признаками стандартного шаблона
    Этот нюанс касатеся абсолютно всех нестандартных шаблонов. Его, к сожалению, никак не обойти. Все необходимые вам модули следует активировать до установки шаблона.
  5. Визуальный редактор
    Полезная статья «Почему нужно сказать "нет" визуальному редактору»
  6. Доработка шаблона под ваши нужды
    Куда обратиться за помощью на платной основе

Сайт временно отключен