Super

Валидный код

Ни одной ошибки в валидаторе W3.org!

• Проверить главную страницу;
• Проверить категорию товара;
• Проверить страницу товара.

Поддержка мобильных устройств

Помимо адаптивности большое внимание было уделено меню для широких устройств, реагирующих на касание. Пользоваться меню с планшета – одно удовольствие! Первое касание открывает меню, второе касание переводит по ссылке. Больше не надо выводить никаких дублирующих пунктов меню!

SEO-уважение

В некоторых темах так бывает, что используются заголовки ниже H2 или даже ниже H3. Это не правильно потому что только у контент-менеджера должен быть контроль над заголовками! Согласитесь ситуация была бы забавная, если бы у вас был товар или статья с заголовками H2 и H3. Но где-то в теме выше ключевого контента встретились бы заголовки H4 или H5.
На лицо нарушение иерархии заголовков!

В теме убраны все заголовки ниже уровня H1!
Это исключает нарушение иерархии заголовков!

Вам или вашим SEO-специалистам не составит труда поставить нужные заголовки в нужных местах контента, ведь сама тема не добавляет ничего лишнего и не нарушает иерархию!
Заголовки H1 встречаются на странице только один раз и только для названия страницы.
Остальные заголовки в контенте под вашим контролем!

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

Валидная микроразметка

Тема содержит микроразметки нескольких типов:

• Schema.org;
• hCard.
• Позже микроразметка Schema.org будет расширяться и поддерживать новые типы данных.

Сама микроразметка не содержит ни единой ошибки! *
* – жёлтым цветом в результатах тестов выделены предупреждения, а не ошибки.
Они возникают в силу особенностей архитектуры Shop-Script – некоторые данные просто неоткуда брать.

• Проверить главную страницу;
• Проверить категорию товара;
• Проверить страницу товара.

AMP-подготовка

Проведена подготовка для совместного использования Super темы совместно с темой дизайна Start AMP, дополнительно укрепляющей позиции вашего сайта в поисковой выдаче Google для мобильных устройств.

В AMP-сайтах используется специфическая разметка, поэтому часть HTML тегов не воспринимается корректно валидаторами AMP-страниц, и наоборот – AMP-теги не всопринимаются корректно HTML-валидаторами.

Шрифты от Google и не только

Для темы были отобраны самые подходящие и стильные шрифты!

• 16 шрифтов для основного текста;
• 27 шрифтов для текстового логотипа;
• 35 шрифтов для заголовков.

4 392 иконки!

В теме вам доступны три пака иночных шрифтов:

• 1 534 иконки FontAwesome версии 5.9+
  
• И 2125 иконок WebHostingHub Glyphs
  
  
• И 733 иконки Ion Iocons версии 2.0.1
  
  

Super-богатые цветовые настройки

Предусмотрено 54 цветовых схемы для следующих элементов дизайна темы.
(Если этого будет недостаточно, то можно задать собственные цвета!)

• Главные кнопки;
• Второстепенные кнопки;
• Верхняя панель;
• Главное меню;
• Сайдбар (боковая колонка);
• Карточки товаров;
• Подвал.

Например, главное меню:
(ниже представлены не все цвета)

Фон сайта и/или шапки можно выбрать произвольный, с возможностью инвертировать цвет текста.
Благодаря этому вы получаете огромную свободу – выбирать собственные цвета сайта!

Но и это ещё не всё!

Через дополнительные параметры, вы можете задавать для разных категорий и/или страниц товара (в рамках одной витрины) собственный фон!
Благодаря этому в каждой категории вы можете создать определённую атмосферу для продажи именно тех товаров, которые находятся в конкретной категории!

Умные сетка и сайдбар

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

• Для десктопов (ширина экрана от 1024px): от 2 до 6 колонок.
• Для планшетов (ширина между 768px - 1023px): от 2 до 4 колонок.
• И для смартфонов (ширина до 767px): от 1 до 2 колонок.

Настройки сайдбара (боковой колонки) доступны для следующих страниц:

• Главная страница;
• Категории товаров;
• Страница товара;

На этих страницах можно выбрать на какой ширине сайдбар будет прятаться в offcanvas (пространство за пределами видимой части сайта).
Доступны следующие настройки:

• Прятать сайдбар только на смартфонах;
• Прятать сайдбар на смартфонах и планшетах;
• Прятать сайдбар везде (включая десктопы).

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

На снимке эарана показана категория товара с отлюченным сайдбаром на всех устройствах и сеткой из 4 колонок.

Даже если сайдбара не видно, он всегда доступен посетителю в один клик из любой части сайта, где бы он не находился!

Модульная шапка

Вы можете отображать в шапке только тот контент, который вам на самом деле необходим. Лишние блоки можно отключать.

Верхнюю панель и главное меню тоже можно отключать!
Также из настроек темы можно выбирать отступы шапки: большой или маленький (по умолчанию).

Модульные меню

Главной особенностью верхней панели и главного меню также является их модульность.
В экспертном режиме темы вы можете выбирать источники данных, которые попадут в панель и меню:

• wa-apps() меню;
• и/или страницы;
• и/или категории товаров;
• и/или теги магазина (только в главное меню);
• и/или плагины магазина (только в главное меню).

Модульное всё остальное!

• Сайдбар;
• Главная страница;
• Подвал.

Это означает, что вы можете с лёгкостью через настройки темы подключать/отключать определённые блоки в местах перечисленных выше, а также прямо из настроек менять очерёдность вывода этих блоков!

Подвал большой или маленький?

Каждый решает сам!
Подвал может содержать от 0 до 4 колонок (в экспертном режиме – 6 колонок).
Вы также можете выбирать какой-именно контент будет отображаться в этих колонках! В каждой колонке доступно по 3 блока!

В подвале также содержится эффектная форма подписки для приложения Рассылки, которая поможет вам собрать базу довольных подписчиков!

Форма содержит необходимые галочки подтверждения согласия с политикой обработки данных согласно современному законодательству!

Великолепный главный cлайдер

Главный слайдер отображается с потрясающим эффектом Кена Бёрнса – фотография в слайде уменьшаестя и сдвигается одновременно, создавая видео-эффект. А переключение слайдов сопроваждается смещением текстового контента слайда, создавая parallax-эффект!

Можно также выбрать один из нескольких эффектов переключения:

• Мастшабирование (Scale);
• Перелистывание (Slide);
• Выцветание (Fade);
• Вытягивание (Pull);
• Выталкивание (Push).

Главный слайдер может содержать в себе 2 типа контента: промо-карточки и/или товары из заданного в настройках темы списка (по умолчанию – promo).
Можно выбирать очерёдность, что идёт первым, товары и/или промокарточки и наоборот.

Настройки слайдера предусматривают:

• Сколько промо-карточек и товаров отображать в слайдере;
• Прозрачность фона наложения промо-карточки.
  
  
• Через доп. параметры можно добавить изображения фона для слайда товара;
  
• Через доп. параметры можно изменить цвет текстового контента слайда;
• Через доп. параметры можно изменить фон и прозрачность фона наложения слайда товара.

Super-удобные строчные слайдеры

Эти слайдеры везде!

• В списках товаров;
• В рекомендуемых товарах;
• В промо-карточках под главным слайдером;
• В инфо-блоках;
• В категориях товаров;
• В последних отзывах о товарах;
• В последних новостях блога.

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

Богатые настройки промо-карточек

Промо-карточки можно выводить не только в главном слайдере, но и под ним! Промо-карточки, идущие по счёту после цифры указанной в настройках, идут в блок карточек под главным слайдером!

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

• Изображение карточки – фон.
  В данном режиме хорошо использовать красивую фотографию, поверх которой разместить необходимый текст.
  
• Изображение карточки поверх фона.
  В данном режиме можно проводить промо-акции для определённых товаров или групп товаров, потому что изображения (желательно без фона) товара смотрятся в этом режиме особенно хорошо!
  
  В данном режиме доступно два эффекта поведения изображения при наведении на карточку: слайд вверх или увеличение.

Для обоих режимов отображения промо-карточек доступны следующие настройки:

• Три настройки высоты промо-карточек для различной ширины экрана (десктопы, планшеты, смартфоны);
• Отображать в режиме слайдера или нет;
• Прозрачность фона наложения;
• Выравнивание контента по горизотали (слева/центрально/справа);
• Выравнивание контента по вертикали (сверху/центрально/снизу);
• Режим наложения фона: пользовательский или тёмный;
• Для тёмного режима тёмного фона доступны опции наложения фона:
  • Градиент снизу;
  • Градиент сверху;
  • Круговой градиент;
  • Сплошная заливка.

Целая куча списков товаров на главной

На главной странице можно вывести до 6 списков товаров.
Для каждого из списков доступны следующие настройки:

• Идентификатор, из которого брать товары;
• Количество товаров;
• Отображать список во вкладке или вне её;
• Отображать список слайдером или нет;
• Перемешивать товары из списка или нет.
  Если да, то при каждой загрузке сайта товары будут отображаться в разной последовательности.

Кроме того к списку товаров во вкладки можно добавить до 5 страниц, которые будут подгружаться по AJAX.
Это позволит вывести вам важную информацию для покупателей непосредственно рядом с товарами и не гонять их по отдельным страницам!

Гибкие категории и подкатегории товаров

Можете быть уверены, что настроите категории так, как нужно вам!
Для органицзии категорий товаров тема имеет следующие возможности:

• Описание категории над товарами или под ними;
• Режим мозаики для карточек товаров.
  В данном режиме снимается фиксация одинаковой высоты карточек товаров, карточки товаров идут с разной высотой создавая эффект мозаики.
  
  На снимке экрана показан режим мозаики с отключенным сайдбаром и 5 колонками в сетке для настольных компьютеров.
  
  Режим мозаики можно включить как для всех категорий в настройках темы, так и для отдельно выбранных категорий через дополнительные параметры.
• Отображение поля количества единиц товара, добавляемых в корзину;
• Отображение подкатегорий товаров в виде карточек в режиме слайдера или нет.
  В экспертном режиме доступен выбор вида отображения категорий (карточки, вкладки, меню, кнопки).
• Загрузка подкатегорий без перезагрузки страницы;
• Сортировка товаров без перезагрузки страницы;
• В экспертном режиме или через дополнительные параметры можно менять цвета сайта, шапки и сайдбара.
• Индивидуальная настройка сетки и сайдбара через настройки темы для всех категорий или через дополнительные параметры для отдельно выбранной категории.

Отдельное внимание фильтрам товаров

Фильтры товаров получили 4 режима отображения!

• В выезжающем сайдбаре;
• В общем сайдбаре;
• Над контентом в свёрнутом состоянии;
• Над контентом в развёрнутом состоянии.

Также в настройках темы можно указать, сколько именно характеристик фильтров показывать (по умолчанию 6), остальные характеристики будут скрыты под спойлер «ещё».

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

Гибкие блоки карточек товаров

Карточки товаров получили массу настроек!

Текстовые поля заголовка товара, краткого описания, а также блока с характеристиками товаров получили построчное ограничение высоты (в режиме мозаики оно не действует) – больше не нужно высчитывать сколько пискелей занимает одна строка текста – очень удобно!

Практически все блоки в карточке товара можно отключать!

А также

• Выравнивание по горизонтали заголовка и цены товара;
• Два режима отображения характеристик товара (полностью или только значения);

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

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

фотографии в карточке товара

Настройки отображения фотографий в карточке:

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

Что можно делать с фотографиями в карточке товара:

• Слайдер всех фотографий товара:
  
• Показ второго фото при наведении:
  
• Ничего.

Удобный быстрый просмотр

Тема обладает быстрым просмотром товара прямо из категории!
Там выводится практически вся необходимая информация для принятия решения о покупке!


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

Умная страница товара

Страница товара обладает следующими преимуществами:

• Можно выбрать каким образом будет отображаться контент на странице (вкладки, меню, аккордеон);
  
  На снимке экрана выше отображение контента в виде вкладок.
  
  
  На снимке экрана выше отображение контента в виде аккордеона.
  
• Вкладки на узких экранах можно прокручивать горизонтально, однако для мобильных устройств можно назначить режим аккордеона отдельно;
• Для вкладок можно назначить горизонтальное выравнивание (слева, по центру, справа);
• Для аккордеона действуют свои настройки:
  • Раскрыт/закрыт только первый пункт аккордеона или все сразу;
  • Свернуть/развернуть несколько пунктов аккордеона или только один.
• 2 режима отображения характеристик на странице товара: над контентом (вкладками) или внутри контента (как одну из вкладок);
• Блок покупки товара «прилипает» (можно отключить);
• На мобильных устройствах блок покупки, естественно, не «прилипает», но зато можно выбрать место его расположения: над галереи изображений или под ней.
• Отзывы на странице товара подгружаются по AJAX, с ними можно работать не переходя на отдельную страницу отзывов.
• Можно добавить целый массив страниц, чтобы их содержимое подгружалось во вкладки и вся необходимая информация была доступна сразу на странице товара.
  
  Причём эти страницы будут добавлены сразу на все страницы товаров, но при этом не будут индексироваться поисковиками, т.к. они загржаются по AJAX.
• Можно переключаться между товарами без возврата в категорию.
  
  Доступно два режима подобной навигации:
  • Переход между товарами происходит по корневой категории (т.е. по самой главной);
  • Или переход между товарами происходит по последней родитльской категории (т.е. самой глубокой).

Галерея изображений товара

Для галереи товаров можно выделить следующие ключевые возможности:

• Галерею можно ограничить по высоте;
• Галерею можно «растянуть» во всю ширину страницы;
• Слайдер галереи можно листать стрелками влево и вправо на клавиатуре;
• Для слайдера также доступны следующие эффекты смены слайда:
  
  • Слайд;
  • Выцветние;
  • Переворот.
• Также доступно два эффекта увеличения изображения: линза и внутреннее увеличение!
  
• Для миниатюр галереи доступны настройки размеров миниатюр, а также выравнивания (слева, по центру, и режим coverflow).
  На снимке экрана выше изображён режим coverflow для миниатюр.

Оформление заказа

Тема дизайна поддерживает оба режима оформления заказа:

• Оформление заказа в одной корзине (новый режим для Shop-Script 8+);
• Пошаговое офомление заказа (для Shop-Script 7 и более ранних версий).

Так что можете не беспокоится, тема подойдёт вам в любом случае!
Вне зависимости от того, какая версия Shop-Script у вас стоит!


На снимке экрана выше страница оформления заказа в одной корзине.


На снимке экрана выше страница корзины при пошаговом оформлении.


На снимке экрана выше страница оформления заказа при пошаговом оформлении.

На снимках выше включен режим минимизации страниц оформления заказа для того, чтобы покупателя ничего не отвлекало от процесса оформления заказа. Этот режим можно отключить.

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


Фоновое изображение, естественно, можно заменить через настройки темы.

Предпросмотр корзины

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

Страницы ошибок

Бытует мнение, что страницы ошибок – это самые бесполезные страницы!
На самом деле это не так!
Когда пользователь ничего не находит на вашем сайте, он может «расстроиться» и уйти с сайта!

Мы придумали выход!
Если ничего не нашлось или пользователь забрёл на несуществующую страницу, то надо показать ему ваши лучшие предложения!

Возможно, он найдёт более лучший товар!
А если нет, то, по крайней мере, он не будет чувствовать себя брошенным!
Вдобавок он будет приятно удивлен, нарушением стереотипа о скучности страниц ошибок!

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

Приятные мелочи

• Виджеты соц. сетей для сайдбара, включая виджет инстаграм – не нужно покупать никаких подобных плагинов!
• Ссылки на мессенджеры.
  На устройствах, реагирующих на касание, в шапке можно добавить три ссылки на мессенджеры: Telegram, Viber, и WhatsApp.
• Каждая редактируемая страница снабжена ссылкой для быстрого перехода в бекенд и последующего редактирования.
  Больше не нужно искать товар в админке.
• Текстовые логотипы.
  Некогда рисовать графический логотип? И не надо!
  В теме есть 27 шрифтов для текстового логотипа с раздельными настройками для шапки и подвала!
  Ваш логотип будет выглядеть в стиле темы!
• Практически любую текстовую страницу, работающую на этой теме, можно открыть во всплывающей страницы без необходимости уводить пользователя с целевой страницы.