загрузка

Дизайн и верстка сайта BY

Что делали
Разработали структуру, нарисовали дизайн-макет, сверстали и интегрировали сайт с Wordpress, Woocommerce, СДЭК, Почтой России и Google Таблицами
Город заказчика
Екатеринбург

О задаче

1
У Заказчика уже был сайт разработанный сайт на конструкторе Tilda в связке с Ecwid, но поскольку нужно было подключить Яндекс.Маркет, Facebook Analytics, Google Merchant Center и сделать интеграцию Google Таблицами для отслеживания остатков на сайте, то решили отойти от конструктора и перейти на Woocommerce

Как решили задачу

2
Поскольку мы заранее понимали, что будем разрабатывать на Woocommerce, то проблема выбора CMS перед нами не стояла - использовали Wordpress

Для функции интернет-магазина решили использовать плагин Woocommerce поскольку он:
1) бесплатный
2) простотой в управлении
3) есть готовые плагины для интеграции Почты России, EMS, СДЭК, Яндекс.Касса (для приема платежей на сайте)
4) поддерживает как простые товары так и вариативные (тип товара , в котором цена зависит от выбранных опций)
5) легко формируется фид для Яндекс.Маркета и/или Google Merchant Center
6) просто настраивается Facebook Analytics, электронная коммерция для Яндекс.Метрики и Google Analytics

Дизайн

3

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

На главной странице мы рассказали о текущих акциях, отобразили самые важные категории и товары интернет-магазина и рассказали о том что у нас есть офлайн-магазины

О бренде

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

Карту реализовали с помощью Google Maps, а точки на нее расставляются в редакторе страницы

Страница категории Для мужчин

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

Страница категории Шорты

Категория Шорты является дочерней категорией к категории Для мужчин, на ней мы отобразили все опубликованные товары из этой категории

Страница коллекции

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

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

Страница товара отображает вариативный товар, в котором при изменении цвета и размера меняются фотографии товара

Страница товара, блок выбора опций товара

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

Если описание товара длиннее 2-х строк, то мы прячем его за кнопку Читать далее

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

Страница товара, блок формирования образа

С помощью этого блока мы дали администратору возможность собирать готовые образы из уже имеющихся товаров на сайте
Другие страницы
С любого устройства
Мы проработали все размеры устройств от мобильных до телевизора
Команда
Николай Корниенко
руководитель проекта
Николай Николенко
веб-дизайнер
Виктор Гросс
бэкенд-разработчик
Дмитрий Мовчан
фронтенд-разработчик
Понравился кейс?
Давайте сделаем что-то крутое вместе, для этого
просто заполните форму
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Откладывая на потом вопрос с сайтом, вы стоите на месте. А это равноценно регрессу