Інтернет-магазин оптики
Про проєкт
ОКО — інтернет-магазин мережі салонів оптики, який, окрім широкого асортименту товарів, пропонує діагностику зору та виготовлення окулярів. Спочатку клієнт звернувся до нас за комплексним інтернет-маркетингом, невід’ємною умовою якого є добре підготовлений майданчик. Але за 30 років існування старий сайт компанії зжив себе і гостро потребував оновлення не тільки з метою просування, але також з метою оновлення дизайну та безпеки.
Задача: очікування та реальність
Початковим завданням було повне оновлення сайту, а саме версій WordPress і PHP, а також теми та плагінів. Також клієнт хотів підвищити швидкість сайту та реалізувати можливість задавати в картці товару чіткі параметри, що вкрай важливо при виборі контактних і оптичних лінз.
Насправді ми зіштовхнулися із застарілою темою WordPress, яка давно не підтримувалась розробниками. І якщо плагіни можна було спокійно оновити, то сама тема оновленню не підлягала. При перших спробах оновити сайт ми виявили багато застарілого коду та функції, що не працюють у новій версії мов програмування PHP, JavaScript і Jq.
Отже, трудовитрати на виправлення помилок були зіставні зі створенням нового інтернет-магазину, але навіть це не гарантувало його нормальну роботу. В результаті перед нами постало нове завдання — розробити інтернет-магазин оптики на WordPress / Woocommerce з нуля.
Навігація інтернет-магазину
Головна сторінка
Головна сторінка є звичною скороченою версією всього сайту. Перший екран складається з логотипу, меню, категорій товарів, навігації пошуку, СТА-кнопки та кошика. Для клієнтів інтернет-магазину є власний кабінет. Слайдер з банерами знайомить відвідувачів сайту з актуальними акціями та вигідними пропозиціями.
Поскроливши нижче, ми побачимо блоки з основними та популярними категоріями товарів, які так само поділяються на підкатегорії «Гарячі пропозиції», «Лідери продажів» і «Акційні товари». Наступний блок присвячений окремій групі товарів — оправам:
Якщо користувач не встиг «звернути» в каталог і догортав сторінку до цього місця, значить саме час звернутися до довіри користувачів і розповісти про переваги інтернет-магазину:
Наступний блок запрошує відвідувачів ознайомитись з асортиментом сонцезахисних окулярів. Далі головну сторінку доповнює «Блог» з корисними статтями та блок із Instagram-публікаціями. А завершальним акордом сторінки стає футер із головною кнопкою, основними послугами, останніми новинами та контактами компанії:
Каталог із фільтрацією товарів
Усі розділи каталогу об’єднують такі параметри, як «Ціна», «Бренд» та «Країна-виробник»:
Кожен розділ каталогу оснащений додатковими фільтрами залежно від типу товару. Так, контактні лінзи можна сортувати за «Аддидацією», «Терміном використання», «Циліндром» та «Сферою». Лінзи для окулярів можна вибрати за параметрами «Циліндр», «Сфера», «Покриття», «Діаметр» і «Тип лінзи», а швидко знайти потрібну оправу допоможе сортування товарів за «Матеріалом» і «Типом»:
Для категорії сонцезахисних окулярів можна задати додаткову фільтрацію за «Типом захисту», а засоби для контактних лінз фільтрують за «Об’ємом»:
Картка товару з функцією підбору та комбінації характеристик
Одна з найважливіших сторінок сайту виглядає акуратно та при цьому змістовно. Завдяки зручній функції підбору покупець може задати чіткі параметри лінз для правого й лівого ока та швидко оформити замовлення:
Крім опису продукту в картці товару також реалізована можливість поділитися посиланням на товар у соціальній мережі Facebook.
Картку також доповнює блок «Схожі товари», який не тільки підвищує ймовірність покупки, але й позицію сторінки в пошуку:
Оптичний блог
Ще один чудовий інструмент для SEO-просування, адже корисні та змістовні статті підвищують відвідуваність сайту, а отже, і його видимість у пошуковій видачі. Крім того, блог підвищує рівень компетентності компанії, допомагає користувачам знайти відповіді на запитання та здатний перетворити звичайних відвідувачів сайту на покупців:
Про компанію
Сторінка, що розповідає про компанію, виглядає просто та практично. Гарно структурований текст доповнюють якісні фото, цифри компанії та бордові кнопки, що закликають до дії:
Мережа оптик на карті
Компанія «ОКО» представлена не лише в інтернеті, а й у двох українських містах. Ми позначили мережу салонів на Google-карті, розбили їх за містами та оснастили зручним перемикачем:
Функціональність сайту: WordPress + WooCommerce
WooCommerce
У якості основи сайту ми використали популярну та звичну для клієнта платформу WordPress, плагін для електронної комерції WooCommerce та тему WoodMart з готовим дизайном і широким набором функцій для запуску інтернет-магазину:
Незважаючи на готове рішення від 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, клієнт отримує просту та зручну у використанні адмін-панель. З такою адмінкою навіть найскладнішим інтернет-магазином керувати буде нескладно. Завдяки інтуїтивно зрозумілому інтерфейсу адміністратори та контент-менеджери зможуть легко та швидко редагувати описи послуг і характеристики товарів, коригувати ціни та додавати фотографії на сайт:
Комбінування лінз за параметрами
Для відвідувачів сайту оптики з дефектами зору дуже важливою є функція вибору контактних лінз з різними параметрами для кожного ока.
У картках каталогу «Контактні лінзи» ми реалізували можливість обрати одразу два вироби, задавши параметри сфери та базової кривизни для лівого та правого ока.
З категорією товарів «Торичні лінзи» дещо складніше: окремо задані властивості для кожного ока налічували понад 5 тис. комбінацій, що в сумі виходило 10 тис. комбінацій на одну картку. Це позначалося на завантаженні сторінки, швидкість якої досягала цілих 15 секунд. У результаті було ухвалено рішення відмовитися від комбінування торичних лінз за параметрами. Натомість ми задумали завдання на перспективу – розробити власний плагін для WooCommerce, покликаний вирішувати подібні завдання без шкоди для продуктивності сайту.
Мультимовність
До зустрічі з Webnauts сайт ОКО функціонував російською мовою. І оскільки 16 липня 2022 року закон про державну мову зачепив усі інтернет-ресурси, для нашого клієнта було важливо реалізувати сайт двома мовами. Новий закон передбачає, що всі сайти, які представляють український бізнес, повинні обов’язково мати українську версію та завантажуватися за замовчуванням для всіх користувачів України.
Сказано — зроблено: ми здійснили автоматичний переклад сайту за допомогою плагіна GTranslate, і тепер стартова сторінка завантажується державною мовою.
Швидкість завантаження
Це не тільки важлива вимога клієнта, але й необхідна умова для нормальної роботи будь-якого інтернет-магазину, адже сучасні користувачі не готові завантажувати сторінку більше 4 секунд. Незважаючи на те, що тема інтернет-магазину і так заточена на продуктивність, ми додатково оптимізували швидкість сайту шляхом вимкнення непотрібних функцій із коробки WoodMart.
Написання статей для блогу
Будь-якому сайту потрібна оптимізація, а новому — тим паче. Одним із ефективних способів поступово підвищити трафік — це наповнити сайт контентом, що відповідає всім вимогам SEO: корисність, грамотність, унікальність, помірне використання входжень та ключових слів. Саме такі статті ми підготували для блогу мережі магазинів оптики «ОКО». Незважаючи на те що блог носить інформаційний характер, кожна стаття акцентує увагу на продукції інтернет-магазину та допомагає конвертувати відвідувачів у клієнти.
Статтею, що сподобалася, можна легко поділитися на Facеbook, — така функція ще краще сприяє зростанню відвідуваності сайту:
Результат
Відповідати часу означає відповідати технологіям. У цьому кейсі ми зіткнулися з проблемою, коли оновлення сайту на WordPress зовсім невиправдане та порівняне з розробкою нового продукту. В результаті ми створили сучасний і швидкий інтернет-магазин мережі оптик з WooCommerce, наповнили його сторінки якісним контентом і оснастили товарні картки зручною функцією підбору та комбінування параметрів.
