Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Интернет-магазин оптики

О проекте

ОКО — интернет-магазин сети салонов оптики, который, кроме широкого ассортимента товаров, предлагает диагностику зрения и изготовление очков. Изначально клиент обратился к нам за комплексным интернет-маркетингом, неотъемлемым условием которого является хорошо подготовленная площадка. Но за 30 лет существования старый сайт компании изжил себя и остро нуждался в обновлении не только в целях продвижения, но также в целях обновления дизайна и безопасности.

Задача: ожидание и реальность

Первоначальной задачей было полное обновление сайта, а именно версий WordPress и PHP, а также темы и плагинов. Также клиент хотел повысить скорость сайта и реализовать возможность задавать в карточке товара чёткие параметры, что крайне важно при выборе контактных и оптических линз.

На деле мы столкнулись с устаревшей темой WordPress, которая давно не поддерживалась разработчиками. И если плагины можно было спокойно обновить, то сама тема обновлению не подлежала. При первых попытках обновить сайт мы обнаружили много устаревшего кода и функции, не работающие в новой версии языков программирования PHP, JavaScript и Jq.

Таким образом, трудозатраты на исправление ошибок были сопоставимы с созданием нового интернет-магазина, но даже это не гарантировало его нормальную работу. В итоге перед нами стала новая задача — разработать интернет-магазин оптики на WordPress / Woocommerce с нуля.

Навигация интернет-магазина

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

Главная страница является привычной сокращённой версией всего сайта. Первый экран состоит из логотипа, меню, категорий товаров, навигации поиска, СТА-кнопки и корзины. Для клиентов интернет-магазина есть личный кабинет. Слайдер с баннерами знакомит посетителей сайта с актуальными акциями и выгодными предложениями.

Поскроллив ниже, мы увидим блоки с основными и популярными категориями товаров, которые в свою очередь делятся на подкатегории «Горячие предложения», «Лидеры продаж» и «Акционные товары». Следующий блок посвящён отдельной группе товаров — оправам:

01

/ 03

Если пользователь не успел «свернуть» в каталог и долистал страницу до этого места, значит самое время воззвать к доверию пользователей и рассказать о преимуществах интернет-магазина:

Следующий блок приглашает посетителей ознакомиться с ассортиментом солнцезащитных очков. Далее главную страницу дополняет «Блог» с полезными статьями и блок с Instagram-публикациями. А завершающим аккордом страницы становится футер с главной кнопкой, основными услугами, последними новостями и контактами компании:

01

/ 03

Каталог с фильтрацией товаров

Все разделы каталога объединяют такие параметры, как «Цена», «Бренд» и «Страна-производитель»:

Каждый раздел каталога оснащён дополнительными фильтрами в зависимости от типа товара. Так, контактные линзы можно сортировать по «Аддидации», «Сроку использования», «Цилиндру» и «Сфере». Линзы для очков можно выбрать по параметрам «Цилиндр», «Сфера», «Покрытие», «Диаметр» и «Тип линзы», а быстро найти нужную оправу поможет сортировка товаров по «Материалу» и «Типу»:

Для категории солнцезащитных очков можно задать дополнительную фильтрацию по «Типу защиты», а средства для контактных линз фильтруют по «Объёму»:

Карточка товара с функцией подбора и комбинации характеристик

Одна из самых важных страниц сайта выглядит аккуратно и при этом содержательно. Благодаря удобной функции подбора покупатель может задать чёткие параметры линз для правого и левого глаза и быстро оформить заказ:

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

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

Оптический блог

Ещё один прекрасный инструмент для SEO-продвижения, ведь полезные и содержательные статьи повышают посещаемость сайта, а значит, и его видимость в поисковой выдаче. Кроме того, блог повышает уровень компетентности компании, помогает пользователям найти ответы на вопросы и способен превратить обычных посетителей сайта в покупатели:

О компании

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

Сеть оптик на карте

Компания «ОКО» представлена не только в интернете, но и в двух украинских городах. Мы обозначили сеть салонов на Google-карте, разбили их по городам и оснастили удобным переключателем:

Функциональность сайта: WordPress + WooCommerce

WooCommerce

В качестве основы сайта мы использовали популярную и привычную для клиента платформу WordPress, плагин для электронной коммерции WooCommerce и тему WoodMart с готовым дизайном и широким набором функций для запуска интернет-магазина:

01

/ 03

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

  • WR All Export Pro — для массового экспорта данных из программы 1С.
  • All Import — для импорта из предоставленной базы данных 1С.
  • Yoast SEO — для поисковой оптимизации сайта.
  • Платёжный шлюз для LiqPay для Woocommerce — для оплаты товаров через сервис LiqPay.
  • Contact Form 7 — для управления контактными формами.
  • Markup by Attribute for WooCommerce — для корректировки цен на сайте.
  • Facebook for WooCommerce — для синхронизации сайта со страницей Facebook.
  • JetElements Plugin for Elementor — для реализации интерактивной Google-карты.

Админка сайта

Выбирая разработку сайта на WordPress, клиент получает простую и удобную в использовании админ-панель. С такой админкой даже самым сложным интернет-магазином управлять будет несложно. Благодаря интуитивно понятному интерфейсу администраторы и контент-менеджеры смогут легко и быстро редактировать описания услуг и характеристики товаров, корректировать цены и добавлять фотографии на сайт:

01

/ 03

Комбинирование линз по параметрам

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

Banner

С категорией товаров «Торические линзы» всё немного сложнее: отдельно заданные свойства для каждого глаза насчитывали более 5 тыс. комбинаций, что в сумме выходило 10 тыс. комбинаций на одну карточку. Это сказывалось на загрузке страницы, скорость которой достигала целых 15 секунд. В итоге было принято решение отказаться от комбинирования торических линз по параметрам. Взамен этого мы затеяли задачу на перспективу — разработать собственный плагин для WooCommerce, призванный решать подобные задачи без ущерба для производительности сайта.

Мультиязычность

До встречи с Webnauts сайт «ОКО» функционировал на русском языке. И поскольку 16 июля 2022 года закон о государственном языке коснулся всех интернет-ресурсов, для нашего клиента было важно реализовать сайт на двух языках. Новый закон подразумевает, что все сайты,  представляющие украинский бизнес, должны обязательно иметь украинскую версию и загружаться по умолчанию для всех пользователей Украины.

Сказано — сделано: мы осуществили автоматический перевод сайта с помощью плагина GTranslate, и теперь стартовая страница загружается на государственном языке.

Скорость загрузки

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

Banner

Написание статей для блога

Любому сайту нужна оптимизация, а новому — тем паче. Одним из эффективных способов постепенно повысить трафик — это наполнить сайт контентом, отвечающим всем требованиям SEO: полезность, грамотность, уникальность, умеренное использование вхождений и ключевых слов. Именно такие статьи мы подготовили для блога сети магазинов оптики «ОКО». Несмотря на то, что блог носит информационный характер, каждая статья акцентирует внимание на продукции интернет-магазина и помогает конвертировать посетителей в клиенты.

Понравившейся статьёй можно легко поделиться на Facеbook, — такая функция ещё лучше способствует росту посещаемости сайта:

Banner

Результат

Соответствовать времени значит соответствовать технологиям. В этом кейсе мы столкнулись с проблемой, когда обновление сайта на WordPress совсем неоправданно и соизмеримо с разработкой нового продукта. В итоге мы создали современный и быстрый интернет-магазин сети оптик с WooCommerce, наполнили его страницы качественным контентом и оснастили товарные карточки удобной функцией подбора и комбинирования параметров.

Владеете интернет-магазином с историей и пробелом в технологичности?

Мы обновим ваш сайт на Wordpress (и не только) без крупных финансовых вложений и временных затрат.

Над проектом работали