Все вопросы отправляйте на email: support@athemes.ru

Начало

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


Hipster — адаптивный шаблон для интерент-магазина, работающего под управлением системы uCoz.

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

Примечания:
  • Под кроссбраузерностью понимается корректное отображение элементов дизайна в последних версиях следующих браузеров: 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>, про этот пункт очень часто забывают либо не придают ему особого значения.



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

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

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


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



Зайдите в раздел управления дизайном интернет-магазина ПУ » Управление дизайном » Интернет-магазин



1. Замените шаблон Вид товара в каталоге на код ниже:

Код будет доступен в купленной версии шаблона
2. Замените шаблон Корзина на код ниже:

Код будет доступен в купленной версии шаблона
3. Замените шаблон Вид товара в корзине на код ниже:

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

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

Блог


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



Рекомендуется активировать поле Краткое описание материала, для этого нужно поставить две галочки напротив него:



Зайдите в раздел управления дизайном блога ПУ » Управление дизайном » Блог



Замените шаблон Вид материалов на код ниже:

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

Фотоальбомы


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





Зайдите в раздел управления дизайном фотоальбомов ПУ » Управление дизайном » Фотоальбомы



Замените шаблон Вид фотографий на код ниже:

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

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


Зайдите в раздел управления страницами сайта ПУ » Редактор страниц » Управление страницами сайта

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



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



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


Зайдите в раздел управления почтовыми формамии ПУ » Почтовые формы » Управление почтовыми формами.

Создайте новую форму, зайдие в конструктор полей для данной формы:



Затем создайте поочередно 2 текстовых поля со следующими названиями:



Замените шаблон данной почтовой формы на код ниже:


Код будет доступен в купленной версии шаблона
Общие настройки Создание информеров

Создание информеров

Зайдите в раздел управления информерами ПУ » Информеры.


Информер #1 — популярные товары в левой колонке сайта


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



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

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

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

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

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


Обратите внимание, что файл "404.htm" загрузить через FTP нельзя. Данный файл загрузите в корень сайта с помощью файлового менеджера.

Создание информеров Конструктор шаблонов

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

Зайдите в конструктор шаблонов ПУ » Дизайн » Конструктор шаблонов:



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

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

Зайдите в раздел редактирования такблицы стилей (CSS) ПУ » Дизайн » Управление дизайном (CSS):



Замените все содержимое на код ниже:
Код будет доступен в купленной версии шаблона
Конструктор шаблонов Восстановление из бэкапа

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

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



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


Таблица стилей (CSS) Первые шаги

Первые шаги

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

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

Логотип сайта

Логотип представляет собой текст — название сайта, магазина, фирмы и т.п.. Чтобы изменить логотип, зайдите в редактирование шаблона верхней части сайта: ПУ » Управление дизайном » Верхняя часть сайта



Код логотипа выглядит так:
Код будет доступен в купленной версии шаблона
Чтобы заменить текстовый логотип на графический (вставить изображение),
замените <a href="/">Hipster</a> на код вида:
Код будет доступен в купленной версии шаблона
Где /img/logo.png — путь до изображения логотипа.

Рекомендуемая высота изображения логотипа: 38px


Первые шаги Меню сайта

Меню сайта

Меню сайта редактируется с помощью конструктора меню ПУ » Дизайн » Конструктор меню:



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



Надписи "Новое" и "Горячее" в меню сайта




Чтобы данные надписи появились возле какой-либо ссылки, нужно добавить для этой ссылки CSS-класс menu_hint1 (Новое) или menu_hint2 (Горячее).

Добавить класс к ссылке можно так: нажать на иконку редактирования пункта меню, затем на стрелочку "Опции", откроется поле, куда и нужно будет вставить имя нужного CSS-класса. Осталось только применить изменения.



Обратите внимание, CSS-классы menu_hint1 и menu_hint2 можно задавать только ссылок меню верхнего уровня. Для ссылок, находящихся в пунктах выпадающего меню этого делатрь нельзя.


Логотип сайта Тонкая настройка

Тонкая настройка

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

Меню сайта Иконки

Иконки

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


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

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

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



Тонкая настройка Главная страница

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

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

Слайдер




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

Размеры фоновых изображений для слайдера должны быть одинаковыми, ширина: строго 1170px, рекомендуемая высота: 580px


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




Код данных баннеров выгляди так:
Код будет доступен в купленной версии шаблона
Код отдельного баннера таков:
Код будет доступен в купленной версии шаблона

Размеры фоновых изображений для баннеров должны быть одинаковыми. Рекомендуемые размеры: 370x270px (ширина x высота)


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

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

Все элементы страницы «Информаця о сайте» редактируются в ее шаблоне ПУ » Управление дизайном » Страницы сайта » Информация о сайте



Прогрессбары




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

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




Код данных счетчиков таков:
Код будет доступен в купленной версии шаблона
Код отдельного блока со счетчиком такой:
Код будет доступен в купленной версии шаблона
Главная страница Обратная связь

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

Все элементы страницы «Обратная связь» редактируются в ее шаблоне ПУ » Управление дизайном » Страницы сайта » Обратная связь



Карта от Google Maps




Зайдите на сайт Google Maps, введите адрес, нажмите "Поделиться", выберите вкладку "Код", скопируйте сгенерированный код:



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

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




Код данный блоков такой:
Код будет доступен в купленной версии шаблона
Код отдельного блока таков:
Код будет доступен в купленной версии шаблона
Информация о сайте Блоки с брендами

Блоки с брендами



Код данных блоков находится в шаблоне глобального блока BRANDS: ПУ » Управление дизайном » Глобальные блоки » BRANDS



Код каждого бренда таков:
Код будет доступен в купленной версии шаблона
Обратная связь Блоки преимуществ

Блоки преимуществ



Код данных блоков находится в шаблоне глобального блока ICONBLOCKS: ПУ » Управление дизайном » Глобальные блоки » ICONBLOCKS



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

Дополнительный функционал

Некоторые функции шаблона легко меняются путем изменения значений некоторых переменных в скрипте.
Откройте файл /js/scripts.js, в самом начале объявлены переменные:
Код будет доступен в купленной версии шаблона
  • _tmpl_viewMode
    Значения: grid или list
    Тип вида отображения товаров в каталоге интернет-магазина (сетка или список).
  • _tmpl_newDays
    Значения: целые числа
    Количество дней с момента добавления товара, которое будет отображаться значек "NEW".
Блоки преимуществ Советы и замечания

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

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

Дополнительный функционал