Клієнт — Oleksandr Balbyshev — потребував унікальної теми для Shopify, яка б:
Відображала індивідуальний дизайн, що відповідає фірмовому стилю бренду.
Забезпечувала гнучке управління контентом через редактор тем.
Підтримувала розширений функціонал, такий як кастомні блоки, динамічні секції та інтерактивні елементи.
Була оптимізована для продуктивності та відповідала вимогам Shopify щодо швидкості та доступності.
🛠 Рішення
Розроблено повністю індивідуальну тему Shopify з нуля, яка включає:
Liquid-шаблони для головної сторінки, колекцій, продуктів, кошика та сторінок оформлення замовлення.
Кастомні секції та блоки, які можна редагувати через редактор тем Shopify.
Модульна архітектура, що дозволяє легко додавати нові функції та компоненти.
Оптимізований код для швидкого завантаження сторінок та покращеного користувацького досвіду.
🚀 Використані технології
Liquid: шаблонна мова Shopify для динамічного контенту.
HTML5, CSS3, JavaScript: для структурування, стилізації та інтерактивності сторінок.
Shopify CLI: для локальної розробки та розгортання теми.
Theme Check: інструмент для перевірки якості коду теми.
Git: для контролю версій та спільної роботи над кодом.
📈 Результати
🎨 Унікальний дизайн, що відображає ідентичність бренду Balbyshev.
🧩 Гнучке управління контентом через редактор тем, що дозволяє клієнту самостійно оновлювати вміст сайту.
⚡ Швидке завантаження сторінок та оптимізована продуктивність, що покращує користувацький досвід.
📱 Адаптивний дизайн, що забезпечує коректне відображення на різних пристроях.
Виклики & Реалізація
Функціональна галерея для фото товарів, з можливістю повноекранного перегляду та збільшенням зображення.
Для реалізації галереї було використано бібліотеку FancyBox для повноекранного переглядача та Swiper для створення мініатюр, де кожен елемент це посилання, що відкриває галерею.
Виведення картки товару у формі, що відповідає розширенню товару.
Застосування css властивості columns для батьківського елементу карток товарів дозволило зберегти співвідношення висоти та ширини карки відповідно до форми картини(горизонтальна/вертикальна). Адаптив реалізовано за допомогою медіа запитів.
Створення 3 видів товару: "не для продажу", "продано", "доступний для продажу".
Створено тип продукту "not for sale", який вказується в адмін панелі продукту. Типи "продано" та "доступний для продажу" визначаються автоматично в залежності від залишку на складі. Відповідно до типу рендериться картка товару.
Додати можливість запиту на створення принту картини, якщо такого немає на сайті, та направлення покупців на сторонні платформи, де представлені такі принти.
Для продукту було створено додаткові мета поля, де потрібно вказати продукт принта, якщо такий є на сайті, а також вказати посилання на принти на інших платформах. Якщо такого принта на сайті нема, то рендеритья кнопка, що викликає модальне вікно з формою запиту на виготовлення лімітованого принта.
Створити додаткові поля для товару: динамічні та статичні.
Також було створено додаткові поля для опису товарів. Динамічні ("деталі", "про виріб") адмініструються з адмін панелі продукту, а статичні (інформація про доставку, сертифікат автентичності) у редакторі теми.
Додати можливість для покупців запропонувати власну ціну за товар.
На кожній сторінці товару є кнопка, що викликає модальне вікно, в якому користувач може запропонувати власну ціну. Лист з пропозицією приходить на електронну пошту.
Реалізувати функціонал кнопки довантаження товарів на сторінці замість звичайної пагінації.
Було створено кнопку "load more", клік на яку запускає асинхронний скрипт, що дозавантажує товари без перезавантаження сторінки.
Автоматичне наповнення колекцій.
Колекції наповнюються відповідно до обраних тегів у адмін панелі продукту.
Вивести інстаграм стрічку з останніми постами автора.
Для цього було встановлено плагін InstaFeed у магазин. Плагін дозволяє вставити інстаграм стрічку як секцію. Тому темплейт сторінки зі стрічкою повинен бути реалізований за стандартами Online Store 2.0, тобто бути у форматі json.