Дизайн

Шаблон

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

Главный шаблон состоит из следующих блоков:

Блок Описание
Верхнее меню Оно прикреплено к верхней части экрана и не скрывается при скролинге
Логотип Его можно расположить слева от рубрикатора категорий товаров или над ними. Этот блок расположен на всех страницах сайта
Шапка Блок расположен над рубрикатором. В нем может располагаться логотип, слоган, телефоны и другие важные моменты, которые будут всегда перед глазами
Рубрикатор Включает в себя меню главных категорий, при наведении на которые раскрывается подменю с подкатегориями
Главное меню Расположено под рубрикатором
Иноформер Выводится важная информация на всех страницах
Навигация Навигация по сайту. На главной не отображается
Контент Меняющаяся часть, в зависимости от страницы
Подвал Выводятся логотипы платежных систем, лого сайта, произвольное меню с популярными ссылками

Главная

Главную можно оформить практически как угодно. Доступны следующие блоки:

  • Слайдер картинок
  • Схема работы сайта
  • Слайдер товаров из витрины
  • Слайдер витрин
  • Блок с товарами из витрины
  • Произвольный текст с картинками

Примеры оформления сайтов

Через админку можно менять данные, помеченные бежевыми блоками:

Шаблон главной

Управление / Контент / Страницы

Название на схеме Название блока в админке Код блока в админке
Логотип Логотип logo
Баннер в шапке Баннер в хедере header
Меню под рубрикатором Меню под рубрикатором menu2
Телефон Телефон phone
Большой баннер под меню Баннер banner
Схема работы магазина Схема магазина scheme
Впервые на сайте? Блок первый раз на сайте? first_time
Преимущества магазина Почему мы? why_we
SEO текст о магазине О магазине about_us
Значки платежных систем Платежные системы в футере footer_ps
Нижний логотипы Логотип в футере footer_logo
Произвольный текст или слоган Текст в футере справа от лого footer_text
Нижнее меню Меню в футере footer_menu

Слайдер баннеров

Управление / Контент / Страницы

Находим по названию блок Слайдер баннеров

Редактировать нужно обязательно с нажатой кнопкой просмотра кода

Режим кода в текстовом редакторе

Пример кода слайдера с тремя слайдами:

<div class="sm_slider ls-slider gs-flex-col" style="height: 250px !important;">
    <ul>
        <li>
            <a href="/news/view/188" class="gs-mb20 gs-block">
                <img src="http://cdn-fronts.n-p.su/test/image/orig/00/00/2c/123.jpeg" />
            </a>
        </li>

        <li>
            <a href="/news/view/98" class="gs-mb20 gs-block">
                <img src="http://cdn-fronts.n-p.su/test/image/orig/00/00/2c/456.jpeg" />
            </a>
        </li>

        <li>
            <a href="/news/view/182/" class="gs-mb20 gs-block">
                <img src="http://cdn-fronts.n-p.su/test/image/orig/00/00/2c/678.jpeg" />
            </a>
        </li>
    </ul>
</div>

В этом коде за слайд отвечает конструкция начинающаяся с <li> и заканчивающаяся </li>

<li>
    <a href="/news/view/188" class="gs-mb20 gs-block">
        <img src="http://cdn-fronts.n-p.su/test/image/orig/00/00/2c/123.jpeg" />
    </a>
</li>

Если нужно удалить слайд, то удаляем полностью код, приведеный выше.

Если нужно добавить слайд, то копируем код приведенный ниже и вставляем в нужное место. Последовательность слайдов равна последовательности конструкций <li>...</li>

Параметры слайда Атрибут Значение
Картинка слайда src="" http://cdn-fronts.n-p.su/test/image/orig/00/00/2c/123.jpeg
Ссылка href="" /news/view/188

Если вам нужно поменять картинку - меняете http://cdn-fronts.n-p.su/test/image/orig/00/00/2c/123.jpeg. Если вам нужно поменять ссылку - меняете /news/view/188

Если Ссылки нет, то можно ничего там не указывать: href=""

Логотип

Логотип можно вывести слева от рубрикатора, как это сделано на демо-сайте

Логотип слева от рубрикатора

или сверху от рубрикатора

Лототип сверху от рубрикатора

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

При клике на логотип происходит переход на главную страницу магазина.

E-mail

Письмо

Возможные настройки шаблона письма:

  • Основной фон письма
  • Цвет листа письма
  • Цвет фона футера
  • Цвет фона выделенного текста в письме
  • Стиль для картинок
  • Стиль для лого
  • Цвет выделенного текста
  • Дополнительный цвет текста
  • Цвет ссылок
  • Цвет ссылок в футере для домена
  • Цвет ссылок в футере для емайл
  • Цвет ярлычка под заголовком
  • Цвет текста заголовка
  • Ширина листа письма
  • Ширина отступов
  • Стиль листа письма
  • Цвет ссылки в футере
  • Шрифт текста в футере
  • Шрифт текста в письме
  • Вторичный шрифт текста в письме
  • Текст под листом письма

Расположение категорий

Категории могут располагаться сверху списка товаров и слева от товаров, при этом столбцов товаров будет не 5, а 4.

Категории сверху

Категории сверху

Категории слева

Категории слева

Цветовая стилизация

Иконки социальных сетей на главной

  • Цвет иконки ВК
  • Цвет иконки Одноклассников
  • Цвет иконки Инстаграм
  • Цвет иконки Фейсбук
  • Цвет иконки Твиттер
  • Цвет иконки Ютуб Цвет социальных кнопок

Шапка магазина

  • Цвет кнопки поиска в прикрепленном верхнем меню Цвет кнопки поиска в прикрепленном верхнем меню
  • Цвет иконок в прикрепленном верхнем меню Цвет иконок в прикрепленном верхнем меню
  • Цвет меню рубрикатора Цвет меню рубрикатора
  • Цвет заголовков в подменю рубрикатора Цвет заголовков в подменю рубрикатора
  • Цвет телефона Цвет телефона
  • Цвет в хлебных крошках (навигации) Цвет в хлебных крошках

Каталог

  • Цвет цены в каталоге Цвет цены в каталоге
  • Цвет фона скидки Цвет фона скидки
  • Пункт активного меню в фильтре каталога Пункт активного меню в фильтре каталога
  • Цвет кнопки фильтра по цене Цвет кнопки фильтра по цене
  • Цвет активной страницы в постраничной навигации Цвет активной страницы в постраничной навигации

Страница товара

  • Цвет цены товара Цвет цены товара
  • Цвет активной опции Цвет активной опции
  • Цвет кнопки Купить Цвет кнопки Купить
  • Цвет кнопки В корзину  Цвет кнопки В корзину
  • Цвет кнопки Добавить товар в избранное Цвет кнопки Добавить товар в избранное
  • Цвет кнопки Добавить продавца в избранное Цвет кнопки Добавить продавца в избранное
  • Цвет кнопки Задать вопрос по данному товару Цвет кнопки Задать вопрос по данному товару

Регистрация

  • Цвет подсказки при регистрации Цвет подсказки при регистрации
  • Цвет кнопки регистрации Цвет кнопки регистрации
  • Цвет ссылки на промокод  Цвет ссылки на промокод
  • Цвет ссылки на пользовательское соглашение Цвет ссылки на пользовательское соглашение

Авторизация

  • Цвет кнопки авторизации Цвет кнопки авторизации
  • Цвет кнопки регистрации Цвет кнопки регистрации

Корзина

  • Цвет блока доставки по Китаю Цвет блока доставки по Китаю
  • Цвет блока доставки из Китая Цвет блока доставки из Китая
  • Цвет блока Страховка Цвет блока Страховка
  • Цвет кнопки Оплатить Цвет кнопки Оплатить
  • Цвет чекбокса в списке товаров Цвет чекбокса в списке товаров
  • Цвет цены товара Цвет цены товара
  • Цвет скидки продавцов
  • Цвет акционной скидки
  • Цвет скидка на доставку
  • Цвет цены итоговой
  • Цвет фона для итоговой цены Цвет итого
  • Цвет фона меню внизу для корзины и избранного Цвет фона меню внизу для корзины и избранного

Избранное

  • Цвет активного меню в избранном Цвет активного меню в избранном

Кабинет

  • Цвет кнопки поиска в диалогах Цвет кнопки поиска в диалогах
  • Цвет номера покупки в списке заказов Цвет номера покупки в списке заказов
  • Цвет иконки личного счета в виде кошелька Цвет иконки личного счета в виде кошелька
  • Цвет названия товара в списке заказов при детальном просмотре покупки Цвет названия товара в списке заказов при детальном просмотре покупки
  • Цвет названия диалога, если есть ответ от поддержки Цвет названия диалога, если есть ответ от поддержки

Подвал

  • Цвет меню в футере Цвет меню в футере

Витрины

  • Цвет кнопки Добавить витрину Цвет кнопки Добавить витрину
  • Цвет кнопки Сортировка витрин Цвет кнопки Сортировка витрин

Элементы

  • Цвет кнопок по умолчанию Цвет кнопок по умолчанию
  • Цвет иконки для информационного блока Цвет иконки для информационного блока
  • Базовый цвет текста Базовый цвет текста
  • Цвет большого прыгающего лоадера Цвет большого прыгающего лоадера
  • Цвет маленького вращающегося лоадера Цвет маленького вращающегося лоадера
  • Базовый цвет иконок Базовый цвет иконок
  • Базовый цвет ссылок Базовый цвет ссылок

Тематический сайт по палитрам цветов. И еще один хороший сайт по подборке цветов.

Классы стилей

Префикс Описание
gs- Cтили, которые носят глобальный характер, сокращенно от global style. Стили относятся ко всему сайту
ls- Cтили, которые носят локальный характер, сокращенно от local style. Стили могут использоваться на одной странице или для одного элемента.

Пример использования стиля:

<div class="gs-bold">Жирный текст</div>
<div class="ls-delivery">Стиль для текста с доставкой</div>

Текстовые стили

Цвет текста

Класс Описание
gs-white белый
gs-black черный
gs-grey серый
gs-orange основной цвет сайта
gs-pink второй цвет
gs-lilac третий цвет
gs-green зеленый
gs-blue синий
gs-blue-dark темно-синий

Цвета сайта задаются в настройках магазина /css/less/settings.less. Индивидуальный стиль магазина редактируется в файле /css/less/style.less

Свойство текста

Класс Описание
gs-bold жирный текст
gs-upper все буквы заглавные
gs-underline текст с подчеркиванием
gs-center выравнивание текста по центру
gs-left выравнивание текста по левому краю
gs-right выравнивание текста по правому краю
gs-text-inline-hidden текст в одну строку с троеточием по окончанию блока
gs-through перечеркнутый текст
gs-10, gs-11, gs-14, gs-16, gs-18, gs-24, gs-30, gs-36, gs-150 размер кегли шрифта, где цифра обозначает размер в пикселях

Кнопки

Все кнопки созданы исключительно используя CSS, без применения картинок, поэтому они будут смотреться при любой плотности пикселя красиво.

Простая

<button>Купить</button>

Большая кнопка

<button class="gs-button-big">Купить</button>

С прямыми углами

<button class="gs-r0 gs-button-big">Купить</button>

Текст с тенью

<button class="gs-text-shadow gs-button-big">Купить</button>
`

Объемная темная

<button class="gs-button-3d gs-button-big">Купить</button>

Объемная светлая

<button class="gs-button-3d-light gs-button-big">Купить</button>

С градиентом

<button class="gs-button-grad gs-button-3d-light gs-button-big">Купить</button>

Сворачивающаяся

<button class="gs-button-anime gs-button-big">Купить</button>

С обводкой

<button class="gs-button-border gs-button-big">Купить</button>

Без заливки с обводкой

<button class="gs-button-nofill gs-button-big">Купить</button>

C полупрозрачной заливкой и с обводкой

<button class="gs-button-fill50 gs-button-big">Купить</button>

Кнопка с тенью

<button class="gs-button-shadow gs-button-big gs-button-3d">Купить</button>

Кнопка с тенью и закругленными краями

<button class="gs-button-shadow gs-button-big gs-button-3d gs-r6">Купить</button>

Кнопка с тенью и круглыми краями

<button class="gs-button-shadow gs-button-big gs-button-3d gs-r50">Купить</button>

С иконкой

<button class="gs-button-big ls-ico-cart">КУПИТЬ</button>

Выпадающий список

Выпадающий список есть на странице доставки, в кабинете, в каталоге и в корзине. И его можно настроить на каждой странице по разному:

Плоский серый

Плоский серый

Выпадающий список

Плоский серый выпадающий список

Плоский цветной

Плоский цветной

Выпадающий список

Плоский цветной выпадающий список

Объемный цветной

Объемный цветной

Выпадающий список

Объемный цветной выпадающий список

Объемный цветной с градиентом

Объемный цветной с градиентом

Выпадающий список

Объемный цветной с градиентом выпадающий список

Элементы

Группировка

Класс стиля       Описание
gs-flex все элементы внутри этого блока будут выровнены в линию и промежутки между блоками распределены в равной мере. По горизонтальной оси блоки выровнены по центру
gs-flex-top также как у gs-flex, только выравнивание по горизонтальной оси идет к верху
gs-flex-center также как у gs-flex, только выравнивание по горизонтальной оси по центру
gs-flex-right также как у gs-flex, только элементы прижаты к левому краю. Равносильно стилям: gs-flex gs-m-r-auto. То есть справа внешний отступ автоматический.
gs-flex-top-right элементы в одну строку и прижаты к левой стороне и выровнены по верхней линии
gs-flex-col в данном случае все элементы не выстраиваются в одну линию, а переносятся на другую строку. Похоже со стилем обтекания блоков float: left
gs-flex-col-right также как и у gs-flex-right, только с переносом элементов на следующую строку

Внешние отступы

Класс Описание
gs-m0 без отступов
gs-m0-10 слева и справа по 10px
gs-m10-0, gs-m20-0 сверху и снизу по 10px и 20px соответственно
gs-m10 оступ вокруг элемента по 10px
gs-but-m отступ сверху 20px
gs-last-m0 у последнего элемента нет отступа. Класс задается у родительского элемента
gs-mt0, gs-mt5, gs-mt10, gs-mt20, gs-mt30, gs-mt50 отступ сверху, где цифры обозначают отступ в пикселях
gs-mr5, gs-mr10, gs-mr20 отступ справа, где цифры обозначают отступ в пикселях
gs-mr-auto элемент будет прижат к левому краю
gs-mb5, gs-mb10, gs-mb20, gs-mb30, gs-mb50 отступ снизу, где цифры обозначают отступ в пикселях
gs-ml1, gs-ml5, gs-ml10, gs-ml20, gs-ml30, gs-ml50 отступ слева, где цифры обозначают отступ в пикселях
gs-ml-auto элемент будет прижат к правому краю

Внутренние отступы

Класс Описание
gs-p0 без внутреннего отступа
gs-p1, gs-p10 внутренний отступ в 1px и 10px соответственно
gs-p0-10 слева и справа по 10px
gs-pl10 отступ слева, где цифры обозначают отступ в пикселях

Свойства

Класс Описание
gs-border-box внутренние отступы не изменяют размера блока
gs-hide, gs-disable скрыть блок
gs-relat, gs-relat относительное и абсолютное позиционирование блока
gs-radius скругление углов блока с параметром @t=2px по-умолчанию
gs-circle круг
gs-fl, gs-fr обтекание слева и справа
gs-clear очистка свойства обтекания
gs-inline выстроить несколько блоков в одну линию. Стиль присваивается каждому блоку
gs-all-inline выстроить все дочерние элементы в одну строку
gs-block элементу присваивается стиль display:block

Стили

Класс Описание
gs-bg-cover растягивает фоновую картинку под размер блока
gs-bg-center фон по центру блока
gs-img добавляет рамку к картинке
gs-line серая линия с внешними отступами сверху и снизу в 20px

Категории товаров

Ссылка на страницу категорий

Можно выбрать одну из понравившихся картинок категорий, представленных ниже и сообщить в поддержку МТао для их установки в своем магазине. Если есть потребность в загрузке своих картинок - необходимо подготовить в размере для ретина дисплеев 220x220 px и передать их поддержке МТао. Картинки нужно сгруппировать по папкам согласно главным категориям (Гардероб, Детские товары и тд...).

По умолчанию выводится первый вариант по каждой категории.

Форма для выбора картинок категорий

Женщинам

Одежда

Одежда для спорта

Верхняя одежда

Купальники

Аксессуары

Обувь

Будущим мамам

Свадебная мода

Нижнее белье

Головные уборы

Мужчинам

Одежда

Для спорта

Обувь

Сумки

Очки

Часы

Головные уборы

Аксессуары

Девочкам

Одежда

Головные уборы

Верхняя одежда

Игрушки

Прочее

Обувь

Транспорт

Спорт

Мальчикам

Одежда

Головные уборы

Верхняя одежда

Игрушки

Прочее

Обувь

Транспорт

Спорт

Малышам

Одежда и обувь

Кормление

Защита и безопасность

Игрушки для малышей

Здоровье и уход

Смена подгузника

Сон

Прогулки

Товары для мам

Дом и дача

Спальня

Кухня

Гостинная

Ванная

Прихожая

Детская

Офис и кабинет

Дача

Освещение

Текстиль

Интерьер

Чай

Домашние питомцы

Спорт

Тренажеры

Водный спорт

Игры

Бокс, единоборства

Экстримальные виды спорта

Спортивная одежда, обувь, аксессуары

Отдых

Активный отдых

Туризм

Охота и рыбалка

Пикник на природе

Оптика

Красота и здоровье

Косметика, парфюмерия и уход

Техника для красоты и здоровья

Аптека

Оптика

Средства и предметы гигиены

Интим-товары

Электроника

Телефоны

Фото- и видеокамеры

Аудио- и видеоТехника

Портативная техника

GPS-навигация

Игровые приставки

Компьютерная техника

Компьютеры

Комплектующие

Периферийные устройства

Накопители

Сетевое оборудование

Оргтехника

Расходные материалы

Бытовая техника

Крупная техника для кухни

Мелкая техника для кухни

Встраиваемя техника

Техника для дома

Климатическая техника

Техника для красоты

Автотовары

Шины и диски

Техника для авто

Аксессуары

Противоугонные средства

Запчасти

Мототехника

Автохимия

Автокосметика

Тюнинг

Все для праздника

Все для свадьбы

Новый год

Подарки для женщин

Подарки для мужчин

Комментарии

Не можете разобраться? Напишите нам!
Обновлено 20th Nov 2017