inspiration

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

Однако, как и в любых отношениях, кто-то должен сделать первый шаг! И вот, вам уже не стоит беспокоиться, - мы сделали этот шаг за вас, тема оформления "Inspiration" (с англ. - ВДОХНОВЕНИЕ)!

Новые технологии уже здесь!

Начнем с самого интересного – внешнего вида!

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

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

НАСТРОЙКИ

На демо сайте оцените дизайн и функционал. Меняйте настройки темы, кликнув по иконке "настройки" и сайт моментально изменится на ваших глазах.

демо сайт с настройками

Стили

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

Мы создали несколько предустановленных стилей чтобы вам было проще начать преобразовывать сайт под свой вкус.

Попробовать можно уже сейчас

Инструкция Демо

Список элементов шапки и инструкции →

Список элементов подвала и инструкции →

Свой макет подвала или шапки.

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

Отображения товаров (категория, список товаров)

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

Другие режимы отображения товаров в списке, и их подробное описание →

Навигация по категориям.

Несколько макетов, как с плагином «иконка, изображение и баннер категории», так и без него.

Подробнее о горизонтальной панели навигации по категориям →
Подробнее о вертикальной панели навигации по категориям →

Отображения страницы товара

Выбирайте предпочтительные варианты макетов страницы товара. Подробнее →

Выбирайте режим отображения и расположение эскизов изображений товара. Подробнее →

Отключайте основные или добавляйте свои элементы информации о товаре и выводите все это в нужной последовательности. Подробнее →

Сопутствующие элементы магазина

Вы можете выбрать и настроить элементы главной страницы магазина:

- слайд-шоу →
- промо карточки →
- инфоблоки →
- категории →
- списки товаров →
- бренды →
- новости →
- фотографии →

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

Всплывающие окна, галереи, слайдеры, аккордеоны и еще много-много всего!

В шаблоне используется «UIkit» - высокомодульный front-end фреймворк выделяющийся среди большинства своим гибким и адаптивным компонентам с понятными именами. Содержит множество модульных компонентов, среди которых: меню, HTML формы, таблицы, JS компоненты (выезжающие вкладки и модальные окна, общие элементы, такие как кнопки, знаки и перекрывающие слои), а также компоненты макета, такие как жидкие, адаптивные системы сеток.

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

Иконки

В качестве иконок используются SVG объекты, что позволяет увеличить скорость за счет отсувствия дополнитльеных http запросов и плюс ко всему, нет привязки к сторонним сервисам (которые бывают заблокированны или медленно работают. Подробнее →

Удобство использования

Внешний вид,
несомненно, важен, но, в первую очередь, необходимо ориентироваться на удобство пользователя: улучшать взаимодействие с посетителем и простоту восприятия интернет-магазина.

Связь параметров товара

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

Тема «Inspiration» содержит решение данной проблемы! В ней связаны все параметры, сколько бы их ни было. Покупка не станет для посетителя сложной задачей, ему не придется кликать кнопки наугад, - он будет видеть доступность каждой вариации.

Пример →

Связь вариаций и изображений товара

В Shop-Script для каждой вариации можно привязать изображение. Меняя вариацию, меняется основные изображения. Но только в теме «Inspiration», при перелистывании изображений, меняются значения параметров товара.

Пример →

Первый доступный артикул

Основной артикул отсутствует на складе - это означает, что посетитель, попав на страницу товара, увидит, что на складе его нет, но, возможно, на складе есть его вариации. Тем не менее, посетитель может и не догадаться об этом. Тема «Inspiration» (при включенном параметре) выбирает на странице товара, первую доступную к покупке вариацию.

Артикулы товара кнопками

Артикулы на радио элементах вы можете заменить на обычные кнопки

Кнопки

В настройки магазина добавлены два типа кнопок для товаров в категорий.

Кнопка «подробнее» заменяет кнопку «в корзину» и является ссылкой на страницу товара.

Кнопка «выбор вариаций» используется только для товаров, которые состоят из нескольких вариаций (если же вариаций нет, остается обычная «в корзину»). При клике всплывает окно с предпросмотром товара, где можно выбрать параметры.

В любой из кнопок можно изменить текст.

Цена

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

Автоматическая наклейка

В списках товаров, у товаров с зачеркнутой ценой, автоматически появляется наклейка - "скидка ..%"

Блок "Вы экономите"

На странице товара, при наличии зачеркнутой цены, автоматически появляется блок с надписью - "Экономия: "

Выбранные параметры фильтра товаров

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

Уведомления

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

Взаимодействие
Пользователь должен видеть результат и понимать, что происходит.

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

В настройках темы так же можно:

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

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

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

Нет страницам с ошибкой и пустым результатам поиска

Посетитель вполне может оказаться на странице «ошибка 404» или «найдено 0 товаров». Конечно, избавиться от таких страниц нельзя, но мы можем успокоить посетителя, дать подсказку, что не все потеряно: вот вам купон, посмотрите другие популярные товары или выберите категорию, попробуйте еще раз воспользоваться поиском.

Редактор страницы с ошибкой в настройках темы

Результат посмотреть здесь →

Также можно изменить содержимое страницы «спасибо за заказ» и страницу результатов "пустого" поиска.

Фильтр спама

Спамные отзывы, боты: каждый из нас знает, что это такое и сколько времени отнимает контроль и чистка сайта от этого мусора. В теме «Inspiration» встроено решение, которое может стать серьезным препятствием для многих автоматических спамеров.

Подробнее про фильтр спама →

SEO оптимизация:

- rel="canonical", rel="prev" и rel="next" для категорий магазина. подробнее →

- отключение описания категорий на 2-й и последующих страницах магазина. подробнее →

- В качестве иконок используются SVG объекты, что позволяет увеличить скорость за счет отсутствия дополнительных http запросов и плюс ко всему, нет привязки к сторонним сервисам (которые бывают заблокированы или медленно работают). подробнее →

- Поддержка микроразметки «schema.org» соответствует стандарту.

- Отложенная загрузка изображений. Изображения в интернет-магазине занимают внушительную часть контента, чуть ли не вдвое увеличивают время загрузки страницы и кучу уведомлений "pagespeed" о оптимизации и не соответствии требованиям. Отложенная загрузка изображений от "inspiration" позволяет избавиться от этой проблемы (добавлено в версии 1.0.3) подробнее →

Прочие настройки

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

• Адаптирован под Федеральный закон от 07.02.2017 N 13-ФЗ;
• Отключаемая боковая панель на всех типах страниц (главная, категория, товар, корзина, страницы магазина и сайта)
• Выбор места размещения описания категорий.
• Ленивая загрузка при клике по кнопке «показать еще» после первых 2-х автоматических подгрузок (настраиваемая опция).
• Липкий блок покупки на странице товара
• Возможно включение блока дополнительной информации на странице товара (изначально там краткое описание и характеристики, которые можно заменить на любое другое содержимое)
• Слайд-шоу на главной может работать на промо карточках, изображениях приложения фото, и списках товаров. Причем в режиме демонстрации промо карточек, можно выбирать диапазон от и до.
• Вариации товара кнопками
• Включение отключение артикула и оценки товара
• Включение / отключение выбора «кол-ва товара» для добавления в корзину
• Тип отображения обзора товаров: аккордеон, табы либо блоки
• Блоки произвольной информации для товара (одинаковые для всех товаров магазина)
• Корзина с выпадающим списком добавленных товаров, в которой можно изменить кол-во, удалить товар
• Автопоиск товаров при заполнении первых символов
• Кнопка «вверх»
• Возможность загрузить свое изображение «заглушку» для товаров у которых нет изображения
• Переключатель языка витрины
• Выбор валюты
• Функционал сравнения (можно отключить)
• Функционал избранных товаров (можно отключить)
• Функционал просмотренных товаров (можно отключить)
• Возможность отключить функционал покупки товаров (отсутствует кнопка купить и корзина)
• AJAX фильтр – автоматическая подгрузка товаров в зависимости от выбранных характеристик
• Предварительный просмотр товара
• Слайдер изображений в карточке списка товаров
• Возможность отключение/включения элементов в карточке списка товаров
• Настройка контактных данных
• Карта на главной странице магазина
• Кнопки / ссылки на соц. Сети
• Поля для виджетев соц сетей
• Поле для вставки кода счетчиков посещений
• Поддержка микроразметки «schema.org» соответствует стандарту

Адаптация под любые устройства просмотра

«Inspiration» прекрасно отображается на экранах мобильных устройств, не менее удобно, чем использование полной версии сайта.

Чистый и профессионально написанный код:

Ни единой ошибки при проверке на валидацию w3c.org
главная страница →
страница категории →
страница товара →

Ваши идеи приветствуются!
Если у вас возникли какие-либо пожелания или идеи, касающиеся макетов (оформления) страницы товара, карточки товара в списке, шапки и подвала и т.д. присылайте их нам через форму на странице техподдержки, или на электронную почту: kolmakov.igor@gmail.com.
Наиболее интересные, на наш взгляд, идеи будут внедрены в тему оформления, остальные могут быть выполнены в качестве доработки.

---

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