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

Для начала

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

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

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

Разархивируйте и перейдите в папку с шаблоном.

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

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

  • «Дополнительно» - папка содержит файл страницы «Ошибка 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 №1.txt (папка «Модули»).

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

Page Edit Html Code

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

Цвет шаблона

Изначально, у вас шаблон будет синего цвета.

Если вы хотите изменить цвет шаблона, то:

1. Перейдите на демо-сайт → aluminium-temp.do.am

2. Нажмите на «шестерёнку» слева.

3. Сгенерируйте ваш уникальный цвет, нажав на квадратик справа от текста «СГЕНЕРИРУЙТЕ СВОЙ УНИКАЛЬНЫЙ ЦВЕТ» ИЛИ выберите из уже готовых наборов.

4. Нажмите на ссылку «Сгенерировать код».

5. Скопируйте код из модального окна, и замените им содержимое файла theme.min.css (Панель управления – Файловый менеджер – папка css).

Изменить цвет, вы сможете в любой нужный вам момент, и любое, необходимое вам, количество раз.

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

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

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

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

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

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

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

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

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

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

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

Количество материалов на странице в архиве — 6

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

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

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

На странице, что открылась создайте две новых категории, например, «Новости компании» и «Акции». Далее, при установке информеров, вам нужно будет указать их идентификаторы (например, ID:1 и ID:2).


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

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

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

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

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


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

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

Разделитель для генератора пути от главной сайта к категориям и страницам магазина —  <small>/</small>  (скопируйте вместе с пробелами в начале и конце кода)

Снимите галочки с:

Отображать последний элемент пути как ссылку

 

Корзина.

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если у вас уже есть информеры – удалите их, затем обновите страницу, и только тогда приступайте к созданию информеров.

 

Новости (Акции)

Название информера: Новости (Акции)

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

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

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

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

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

Нажмите на ссылку «Дополнительные опции», и в поле «Список ID категорий» укажите идентификатор категории «Акции» модуля «Новости сайта», например, 2.

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

 

Блог

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

Раздел: Блог

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

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

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

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

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

 

Слайдер (Новости)

Название информера: Слайдер (Новости)

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

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

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

Количество материалов: 3 (можно выводить больше чем три материала, например, 5)

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

Нажмите на ссылку «Дополнительные опции», и в поле «Список ID категорий» укажите идентификатор категории «Новости компании» модуля «Новости сайта», например, 1.

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

 

Новое

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

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

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

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

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

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

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

 

Популярное

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

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

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

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

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

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

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

 

Топ продаж

Название информера: Топ продаж

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

Меню

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

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

Нажмите на «Основное меню сайта», и с выпадающего списка выберите «Создать меню».

«Название» — Категории

«Способ отображения» — Вертикальный

Заполните меню необходимыми вам категориями интернет-магазина.

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

Создайте еще раз новое меню.

«Название» — Магазин

«Способ отображения» — Вертикальный

Заполните меню необходимыми вам данными.

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

Создайте еще раз новое меню.

«Название» — Покупателю

«Способ отображения» — Вертикальный

Заполните меню необходимыми вам данными.

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

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

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

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

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

discount-tie — для флажка с надписью «Скидки» .

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

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

Установка почтовых форм

Перейдите по ссылке ПУПочтовые формыУправление почтовыми формами.

У вас должна присутствовать одна форма – Обратная связь ($MFORM_1$).

Нажмите на кнопку «Создать почтовую форму».

Название почтовой формы: Заказать звонок

Ответ об успешной отправке письма: <b>Спасибо.</b><br><b>Наш менеджер свяжется с вами в ближайшее время.</b>

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

Нажмите на ссылку «Конструктор полей», только что созданной формы.

На странице, что открылась, удалите поле «Текст сообщения».

Добавьте новое с помощью кнопки «Добавить новое поле».

Тип поля — «text»; Название поля — Имя.

Добавьте новое с помощью кнопки «Добавить новое поле».

Тип поля — «text»; Название поля — Телефон. Обязательное.

mform2

Сохраните изменения.

После нажмите на кнопку «Управление дизайном».

Скопируйте код из файла Заказать звонок.txt (папка из шаблоном – модули – Почтовые формы) и вставьте с заменой в форму управления дизайном.

Сохраните изменения.

Если вам необходимо изменить формат номера, перейдите шаблон почтовой формы, и найдите data-mask="+9 (999) 999 99 99".

По умолчанию, формат номера соответствует номеру России. Для Украины используйте +99 (999) 999 99 99, для Беларуси +999 (99) 999 99 99, для Казахстана используйте +9 (999) 999 99 99

Сохраните изменения.

Установка второй главной страницы (или возврат к первой).

Для установки второй главной страницы, перейдите по ссылке Панель управление – Управление дизайном (шаблоны) – Глобальный блок «PROMO». На странице, что открылась вставьте (с заменой) код из файла «PROMO №2.txt».

Сохраните изменения.

Далее, перейдите в ПУ – Дизайн – Быстрая замена участков шаблонов.

На странице, что открылась в поле «Что заменить» введите:

aluminium-store

В поле «На что заменить» введите:

aluminium-showcase

Нажмите на кнопку «Произвести замену».

Все. Вторая главная страница установлена на ваш сайт.

 

Если вам необходимо установить первую главную страницу на ваш сайт, то сделайте вот, что: перейдите по ссылке Панель управление – Управление дизайном (шаблоны) – Глобальный блок «PROMO». На странице, что открылась вставьте (с заменой) код из файла «PROMO №1.txt».

Сохраните изменения.

Далее, перейдите в ПУ – Дизайн – Быстрая замена участков шаблонов.

На странице, что открылась в поле «Что заменить» введите:

aluminium-showcase

В поле «На что заменить» введите:

aluminium-store

Нажмите на кнопку «Произвести замену».

Теперь у вас установлена первая главная страница.

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

Для справки. В шаблоне используется Bootstrap сетка (v4.0.0-alpha.5). Условно строка (ширина сайта) разделяется на 12 секций. И если вам нужно что-то разделить на половину, вам нужно использовать по 6 секций. Если на треть – по 4 секции, и так далее. Главное правило, что сума секций должна быть равна 12.

Перейдите по ссылке Панель управления - Управление дизайном - глобальный блок "PROMO".

Данные в блоках «Новое», «Популярное», «Топ продаж», «Самый продаваемый товар», «Последние записи из блога» и в основном слайдере – формируются автоматически с помощью информеров.

Управлять скоростью смены слайдов в слайдерах можно с помощью атрибута data-speed (по-умолчанию, стоит 8 секунд для всех слайдеров на странице).

Если вам необходимо добавлять слайды в основной слайдер в ручном режиме, то найдите и удалите такой код: $MYINF_3$ (~ 4 стрк.), а на его место вставьте вот такой код:

<div class="slider-slide" style="background-image: url('ссылка-на-изображение')">
<div class="slider-slide-body container">
<div class="slider-slide-body-inner col-xl-6 col-lg-8">
<div class="header" title="Название материала">Название материала еще раз</div>
<a class="button button-reverse" href="ссылка-на-нужную-страницу">Подробнее</a>
</div>
</div>
</div>

Под ним, можете вставить еще один блок с таким кодом, это и будет вторым слайдом. Вставьте третий раз – будет третий слайд и т.д.

 

Блок «Специальное предложение» формируется на 22 строке (<a href="/" class="special-offer-block col-lg-3 col-12" data-text="Специальное предложение">).

Структура:

<a href="ссылка-на-нужную-страницу" class="special-offer-block col-lg-3 col-12" data-text="Специальное предложение">
<div>
<div class="header">Название</div>
<div class="shop-section-special-count" data-text="до конца предложения" data-time-year="ГОД" data-time-month="НОМЕР МЕСЯЦА" data-time-day="ЧИСЛО" data-time-hour="ЧАС></div>
</div>
<div class="background-image" style="background-image: url('ссылка-на-изображение');"></div>
</a>

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

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

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

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

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

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

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

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

Вы можете не использовать таймер в специальном предложении. Для этого удалите вот этот кусок кода: <div class="shop-section-special-count" data-text="до конца предложения" data-time-year="ГОД" data-time-month="НОМЕР МЕСЯЦА" data-time-day="ЧИСЛО" data-time-hour="ЧАС"></div>

 

Блок с преимуществами формируется на 64 строке (<div class="shop-main-features row">).

Структура:

<div class="col-lg-3 col-md-6 col-12">
<a href="ссылка-на-страницу">
<div class="mf-icon"><span class="класc-иконки"></span></div>
<div class="mf-title">Название</div>
<div class="mf-body">Описание</div>
</a>
</div>

Вы можете добавить необходимое вам количество блоков, при этом, можете не изменять классы (тогда, если блоков будет больше 4, они автоматически "перенесутся" ниже).

Как можно изменить иконки в этих блоках, мы рассмотрим чуть ниже.

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

Перейдите по ссылке Панель управления - Управление дизайном - глобальный блок "PROMO".

Данные в блоках «Новое», «Популярное», «Топ продаж», «Самый популярный товар»,«Самый продаваемый товар», в основном слайдере, и в блоке с акциями – формируются автоматически с помощью информеров.

Управлять скоростью смены слайдов в слайдерах можно с помощью атрибута data-speed (по-умолчанию, стоит 8 секунд для всех слайдеров на странице).

Если вам необходимо добавлять слайды в основной слайдер в ручном режиме, то найдите и удалите такой код: $MYINF_3$ (~ 9 стрк.), а на его место вставьте вот такой код:

<div class="slider-slide" style="background-image: url('ссылка-на-изображение')">
<div class="slider-slide-body container">
<div class="slider-slide-body-inner col-xl-6 col-lg-8">
<div class="header" title="Название материала">Название материала еще раз</div>
<a class="button button-reverse" href="ссылка-на-нужную-страницу">Подробнее</a>
</div>
</div>
</div>

Под ним, можете вставить еще один блок с таким кодом, это и будет вторым слайдом. Вставьте третий раз – будет третий слайд и т.д.

 

Блоки справа от основного слайдера, формируются на 16 и 19 строках (<a href="/" class="side-slider-section" style="background-image: url('/img/img1.jpg')">)

Структура:

<a href="ссылка-на-страницу" class="side-slider-section" style="background-image: url('ссылка-на-изображение')">
<div class="side-slider-section-title"><span>Название</span></div>
</a>

 

Блок с категориями формируется на 35 строке (<div class="container">).

Первая «строка» с категориями берет начало на 36 строке (<div class="row">).

В данной «строке» (она условно может быть поделена на 12 секций) присутствуют 3 блока (которые занимают по 4 секции).

Структура категории:

<div class="col-lg-4 col-12">
<a href="ссылка-в-категорию" class="land-category-entry" data-text="Перейти в категорию">
<div class="land-category-entry-image" style="background-image: url('ссылка-на-изображение');"></div>
<div class="land-category-entry-data">
<div>
<span class="flaticon-cellphone"></span>
<div>Название категории</div>
</div>
</div>
</a>
</div>

Обратите внимание на col-lg-4 – этот код указывает, что блок занимает 4 секции из возможных 12. Это значит, что при этом классе, в одну строку вы сможете расположить 3 блока.

Далее, на 71 строке формируется следующая «строка» с категориями.

<div class="col-lg-6 col-12">
<a href="ссылка-в-категорию" class="land-category-entry" data-text="Перейти в категорию">
<div class="land-category-entry-image" style="background-image: url('ссылка-на-изображение');"></div>
<div class="land-category-entry-data">
<div>
<span class="flaticon-cellphone"></span>
<div>Название категории</div>
</div>
</div>
</a>
</div>

Обратите внимание на col-lg-6 — этот код указывает, что блок занимает 6 секции из возможных 12. Это значит, что при этом классе, в одну строку вы сможете расположить 2 блока.

Если вам нужно добавить еще одну такую «строку», то под этой строкой добавьте новую с такой структурой:

<div class="row">
тут вставьте блоки с категориями
</div>

Также, обратите внимание на этот код — <span class="flaticon-cellphone"></span>

Этот код отвечает за вывод иконки (как изменить иконку можно узнать в шаге «Изменение иконок на примере блока с преимуществами»). Если вам не подошла ни одна иконка, то вы можете загрузить свое изображение на сайт (через файловый менеджер). Далее, в нужной категории замените:

<span class="flaticon-cellphone"></span>

на

<img src="ссылка-на-изображение">

Изображение старайтесь подбирать не слишком большого размера. Лучше если это будет какая-то иконка в формате картинки (например, 128х128px).

 

Блок «Специальное предложение» формируется на 152 строке (<a href="/" class="special-offer-block" data-text="Узнать подробнее">).

Структура:

<a href="ссылка-на-нужную-страницу" class="special-offer-block" data-text="Узнать подробнее">
<div>
<div class="header-text">Специальное предложение</div>
<div class="header">Название</div>
<div class="shop-section-special-count" data-text="до конца предложения" data-time-year="ГОД" data-time-month="НОМЕР МЕСЯЦА" data-time-day="ЧИСЛО" data-time-hour="ЧАС></div>
</div>
<div class="background-image" style="background-image: url('ссылка-на-изображение');"></div>
</a>

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

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

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

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

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

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

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

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

Вы можете не использовать таймер в специальном предложении. Для этого удалите вот этот кусок кода: <div class="shop-section-special-count" data-text="до конца предложения" data-time-year="ГОД" data-time-month="НОМЕР МЕСЯЦА" data-time-day="ЧИСЛО" data-time-hour="ЧАС"></div>

 

Блок с преимуществами формируется на 64 строке (<div class="shop-main-features row">).

Структура:

<div class="col-lg-3 col-md-6 col-12">
<a href="ссылка-на-страницу">
<div class="mf-icon"><span class="класc-иконки"></span></div>
<div class="mf-title">Название</div>
<div class="mf-body">Описание</div>
</a>
</div>

Вы можете добавить необходимое вам количество блоков, при этом, можете не изменять классы (тогда, если блоков будет больше 4, они автоматически "перенесутся" ниже).

Как можно изменить иконки в этих блоках, мы рассмотрим чуть ниже.

 

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

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

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

Далее перейдите "Панель управления" - "Управление дизайном" - Главная страница магазина на строку 15

<div class="mf-icon"><span class="flaticon-inclined-rocket"></span></div>

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

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

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

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

Такой же принцип работы с иконками от Font Awesome, только класс там формируется таким образом: fa + имя класса.

Например, <span class="fa fa-address-card"></span>

Хедер и футер

Перейдите по ссылке Панель управления - Управление дизайном - Верхняя часть сайта

Блок с логотипом формируется на 88 строке (<a id="logo" class="logo-loading" href="/">).

Структура:

<a id="logo" class="logo-loading" href="/">
<img src="/img/logo.svg" alt="logo">
<div>Aluminium</div>
<span>Лучший интернет-магазин</span>
</a>

Обратите внимание, на /img/logo.svg – это ссылка на логотип. А точнее ссылка на не простую растровую картинку, а на векторную.

Анимация логотипа происходит, только если есть логотип в векторном формате (например, svg).

Как установить свой логотип?

Если у вас уже есть собственный логотип в двух форматах, то просто переименуйте растровый формат логотипа в logo.png (или logo.jpg), а векторный – в logo.svg. Загрузите оба файла в папку img (через файловый менеджер).

Если есть только растровый вариант логотипа (обычная картинка png или jpg), то переименуйте логотип в logo.png (или logo.jpg) и загрузите в папку img (через файловый менеджер). Далее, замените ссылку на логотип из /img/logo.svg на /img/logo.png

Если нету логотипа, и хочется чтобы он был сразу в двух форматах, то перейдите на сайт flaticon.com и следуйте инструкциям из этого видео.

Блок с номером телефона формируется на 97 строке.

Структура:

<div>+ 1 (234) <span>56 78 999</span></div>

Все что указано внутри блока <span></span> будет выделено цветом.

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

 

Далее, перейдите по ссылке Панель управления - Управление дизайном - Нижняя часть сайта

Ссылку на ваш адрес можно указать на 54 строке.

<a class="popup-map" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=ru&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">г. Лондон, ул. Бейкер-Стрит, 221Б</a>

Для вставки карты перейдите на сайт google.ru/maps

На странице, что открылась найдите необходимое место (выровняйте его по центру, и кликните на него). Далее, перейдите в меню. Более наглядно → скриншот.

Из меню выберите пункт «Ссылка/код». В диалоговом окне выберите вкладку «Код», и скопируйте код из поля ввода.

Например, вы получили такой код:

<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d1122.3682594176234!2d37.622634110760195!3d55.7630791253118!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1497443463522" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

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

Далее, перейдите на 54 строку, и вставьте скопированный ранее код в <a class="popup-map" href="сюда-вставить-код">Адрес</a>

Указать номера телефонов можно на 58 и 59 строке.

Структура:

<a href="tel:+123456789000">+12 (345) 67 89 000</a>

Указать контактный адрес электронной почты можно на 63 строке.

Структура:

<a href="mailto:mail@aluminium.mail.ru">mail@aluminium.mail.ru</a>

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

Наполнение интернет-магазина

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

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

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

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

product-options

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

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

ЧаВо

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

— Да.


2. Как отключить анимацию на сайте?

Перейдите Панель управления - Управление дизайном - Верхняя часть сайта. На странице, что открылась (~ 3 строка) найдите такой код var ALLOW_ANIMATION = true;
Измените true на false.
Сохраните изменения. Перейдите на сайт и нажмите комбинацию клавиш CTRL + F5.


3. Весь новый товар (и записи в блоге) отмечаются флажком «Новое». На какое время он будет выводиться?

Стандартно он выводиться на два дня от времени публикации товара (или записи в блоге). Если вы хотите это изменить, то перейдите по ссылке Панель управления - Управление дизайном - Верхняя часть сайта. На странице, что открылась (~ 4 строка) найдите такой код var ADD_TIE_DAYS = 2;
Измените число 2 на нужное вам количество дней.


3. Пусто в блоке «Бестселлеры».

Этот блок генерируется автоматически, на основе количества проданного товара.

Вы можете немного «манипулировать» выводом товаров в блок бестселлеры.
Например, перейдите в необходимый вам товар (который вы хотите видеть первым в блоке).
Возле названия товара, вы увидите шестеренку – наведите на неё. Далее выберите опцию «управление счетчиками».

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

Перед вами откроется окно, в котором установите параметр «Продаж» на 5 (например).
Более наглядно:

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

Перейдите на главную страницу. Блок с бестселлерами будет содержать товар, который вы редактировали выше (как правило, моментально, иногда нужно будет подождать 10-15 минут, и обновить страницу).

По такому же принципу, вы сможете «добавить» в этот блок другой товар, ДО ПЕРВЫХ продаж. Далее uCoz будет автоматически изменять содержимое этого блока.
Сначала блока бестселлеры «идут» товары с наибольшим количеством продаж.


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