Shopify store + Integration of CRM - Klavio/ Gorgias
2000 UAHСтворити функціональний Shopify магазин з інтеграціями основних e-commerce сервісів. Завдання демонструє реальний робочий процес нашої компанії.
Час виконання: 4-6 годин
Дедлайн: 3-5 робочих днів від отримання
Мета Завдання
Оцінити твої навички в:
Роботі з Shopify платформою
Frontend розробці (JavaScript, верстка)
Backend розробці (Node.js, API)
Інтеграціях з третіми сервісами
Документуванні коду
Частина 1: Shopify Магазин (Frontend)
Завдання:
Створити базовий Shopify магазин для продажу одягу (тестовий).
Що потрібно зробити:
1. Налаштування магазину
Зареєструвати безкоштовний Shopify Trial (14 днів)
Обрати та встановити будь-який безкоштовний theme
Налаштувати базову інформацію магазину
2. Додати товари
Створити мінімум 5 товарів (можна вигадані):
Назва, опис, ціна
Хоча б 1 зображення на товар
Варіанти (sizes: S, M, L)
Інвентар (stock quantity)
3. Кастомізація Theme
Внести зміни в обраний шаблон:
a) Головна сторінка:
Додати custom banner з текстом "Welcome to Our Store"
Секція з featured products (3-4 товари)
Newsletter signup форма (поки без backend)
b) Картка товару:
Додати кнопку "Add to Wishlist" (тільки UI, функціонал не обов'язковий)
Показувати індикатор наявності товару ("In Stock" / "Low Stock" / "Out of Stock")
c) Кошик:
Додати promotional banner "Free shipping on orders over $50"
4. JavaScript функціонал
Реалізувати одну з цих функцій (на вибір):
Варіант A - Quick View:
При кліку на кнопку "Quick View" на картці товару:
- Відкрити modal з інформацією про товар
- Показати назву, ціну, головне фото
- Кнопка "Add to Cart" в modal
Варіант B - Dynamic Cart:
Оновлювати кошик без перезавантаження сторінки:
- Після додавання товару показати mini-cart sidebar
- Відобразити кількість товарів та загальну суму
- Можливість видалити товар з mini-cart
Очікуваний результат:
Робочий Shopify магазин (посилання на preview)
Кастомізований theme з вашими змінами
Працюючий JavaScript функціонал
Чистий, коментований код
Частина 2: Backend Інтеграція (Node.js)
Завдання:
Створити Node.js застосунок для інтеграції Shopify з зовнішнім сервісом.
Сценарій:
Коли в магазині створюється нове замовлення, потрібно:
Отримати webhook від Shopify
Обробити дані замовлення
Відправити інформацію в зовнішню систему (mock API)
Залогувати результат
Технічні вимоги:
1. Налаштування проєкту
Структура:
shopify-integration/
├── server.js (або index.js)
├── config/
│ └── shopify.js
├── routes/
│ └── webhooks.js
├── services/
│ └── orderService.js
├── utils/
│ └── logger.js
├── package.json
└── README.md
2. Реалізувати webhook endpoint
POST /webhooks/orders/create
Що має робити:
javascript
1. Приймати webhook від Shopify
2. Верифікувати HMAC signature (безпека)
3. Парсити дані замовлення
4. Валідувати структуру даних
5. Викликати orderService для обробки
6. Повертати 200 OK response
3. Order Service
Створити сервіс, який:
javascript
// Приклад структури
async function processOrder(orderData) {
// 1. Витягнути важливі дані:
const orderInfo = {
orderId: orderData.id,
customerEmail: orderData.email,
totalPrice: orderData.total_price,
items: orderData.line_items.map(item => ({
name: item.name,
quantity: item.quantity,
price: item.price
}))
};
// 2. Відправити в "Klaviyo" (mock)
await sendToKlaviyo(orderInfo);
// 3. Відправити в "Gorgias" (mock)
await sendToGorgias(orderInfo);
// 4. Залогувати успіх
logger.info('Order processed successfully');
}
4. Mock інтеграції
Створити функції-заглушки для API calls:
javascript
// Не потрібно реальне підключення до Klaviyo/Gorgias
// Достатньо імітувати HTTP request
async function sendToKlaviyo(data) {
// Mock POST request
console.log('Sending to Klaviyo:', data);
// Симулювати затримку
await new Promise(resolve => setTimeout(resolve, 100));
// Повернути mock response
return { success: true, service: 'Klaviyo' };
}
async function sendToGorgias(data) {
// Аналогічно для Gorgias
console.log('Sending to Gorgias:', data);
await new Promise(resolve => setTimeout(resolve, 100));
return { success: true, service: 'Gorgias' };
}
5. Error Handling
Обробити можливі помилки:
Невалідний webhook signature
Помилки парсингу JSON
Помилки відправки в зовнішні сервіси
Network timeouts
6. Логування
Використати будь-який logger (Winston, Pino, або console):
javascript
// Логувати:
- Отримання webhook
- Успішну обробку
- Помилки з деталями
- Час обробки
Очікуваний результат:
Node.js застосунок з коментарями
Працюючий webhook endpoint
Mock інтеграції з Klaviyo та Gorgias
Error handling
README з інструкціями запуску
Частина 3: Демонстрація Integration Flow (опціонально, але великий плюс)
Завдання:
Показати, як би використав Gadget.dev для реальної інтеграції.
Що зробити:
Варіант A - Документація: Написати покроковий план (без коду):
1. Як би налаштував з'єднання Shopify → Gadget
2. Які тригери використав би (наприклад, "New Order")
3. Які дії виконував би в Klaviyo
4. Як обробляв би помилки
5. Які дані синхронізував би
Варіант B - Скріншоти/Відео:
Зареєструватися на Gadget.dev (безкоштовний trial)
Створити просту інтеграцію (хоча б початок)
Зробити скріншоти налаштувань
Пояснити логіку в README
Що здати?
1. Shopify Магазин:
Посилання на preview магазину (публічне)
Код кастомізацій (JavaScript, Liquid files)
Можна ZIP архів або GitHub repo
Скріншоти основних сторінок
2. Node.js Backend:
GitHub репозиторій (публічний або private з доступом)
README.md з інструкціями:
Як встановити (npm install)
Як запустити (npm start)
Як тестувати webhook (приклад curl command)
Структура проєкту
Використані технології
3. Документація:
SOLUTION.md файл з поясненнями:
Які рішення прийняв і чому
З якими складнощами зіткнувся
Що б покращив, маючи більше часу
Досвід з подібними задачами (якщо є)
4. Опціонально:
Відео (2-3 хв) з демонстрацією
Gadget.dev plan/screenshots
Unit tests для Node.js коду
Критерії Оцінювання
Frontend (Shopify):
Магазин виглядає професійно
Кастомізації інтегровані в theme
JavaScript код чистий та працює
Responsive design
Увага до деталей (UX)
Вага: 30%
Backend (Node.js):
Код структурований та читабельний
Правильна обробка webhooks
Error handling присутній
Асинхронність реалізована правильно
Логування налаштоване
Вага: 40%
Документація:
README зрозумілий
Інструкції працюють
Код закоментований
SOLUTION.md відповідає на питання
Вага: 20%
Додатково:
Креативність у рішеннях
Використання best practices
Git commits (якщо є історія)
Gadget.dev частина
Вага: 10%
Технічні Вимоги
Обов'язково:
Node.js: v16+ або v18+
JavaScript: ES6+ (async/await, arrow functions)
Framework: Express.js (рекомендовано) або будь-який інший
Package manager: npm або yarn
Дозволено використати:
Будь-які npm пакети (але обґрунтуй вибір в README)
TypeScript (якщо зручно)
Будь-які testing frameworks
Environment variables (.env файл)
Заборонено:
Копіювати готові рішення з інтернету
Використовувати no-code tools замість коду (окрім Gadget частини)
Підказки
Shopify Development:
Документація: https://shopify.dev/docs
Theme customization: редагуй через Admin → Online Store → Themes → Customize
Webhooks:
Shopify webhooks: https://shopify.dev/docs/api/admin-rest/2024-01/resources/webhook
Для локального тестування: ngrok або localtunnel
Приклад HMAC verification: https://shopify.dev/docs/apps/auth/hmac-validation
Node.js:
Express guide: https://expressjs.com/
Обробка webhooks: body-parser middleware
Environment variables: dotenv package
Gadget.dev:
Документація: https://docs.gadget.dev
Безкоштовний trial для тестування
Якщо Виникли Питання
Немає доступу до Shopify? → Можна створити безкоштовний Development Store
Не можу налаштувати webhooks локально? → Використай ngrok: ngrok http 3000
Не знайомий з Gadget.dev? → Ця частина опціональна, зроби хоча б план на папері
Щось не працює? → Задокументуй проблему в SOLUTION.md
Не вистачає часу на все? → Зроби мінімум з Частини 1 та 2, але якісно
-
655 2 0 Ми вже робили Shopify-магазини з кастомним фронтендом і Node.js інтеграціями:
🔹 Trellify – https://trellify.com/en
– SaaS із інтерактивними компонентами на React + TypeScript та API-інтеграціями
🔹 Optimeal – https://optimeal.com/products/optimeal-chicken-turkey-recipe-tender-morsels-in-gravy-for-adult
– Shopify-каталог із кастомними темами та SEO-структурою
🔹 InsideShop – https://insideshop.com.ua/
– Shopify-сторі з динамічними промо-блоками та мобільною оптимізацією
Можу виконати тестове:
… 🔹 Shopify frontend: базовий магазин для одягу, кастомні банери, wishlist-UI, stock-індикатор, JS-функціонал (Quick View або Dynamic Cart)
🔹 Node.js backend: webhook /orders/create з HMAC-валідацією, mock-інтеграції з Klaviyo та Gorgias, логування (Winston/Pino), README + SOLUTION.md
🔹 Документація: код у GitHub, інструкції для запуску, скріншоти preview магазину
Термін — 4–6 годин чистої роботи, віддам у дедлайн 3–5 днів.
Коли можемо стартувати тестове, щоб передати preview-посилання та GitHub repo?
-
307 Доброго дня.
У мене великий досвід створення магазинів Shopify на замовлення та інтеграції бекендів Node.js для автоматизації та сторонніх сервісів, що робить мене ідеальним кандидатом для вашого проєкту. Я можу ефективно налаштувати повнофункціональний та адаптивний магазин Shopify, налаштувати теми з використанням Liquid та JavaScript, а також реалізувати інтеграцію на основі веб-хуків точно за описом. Моя мета — надати вам чисте, добре документоване та готове до запуску рішення протягом 3–5 днів, дотримуючись найкращих практик Shopify та Express.js. Завдяки багатому досвіду в робочих процесах електронної комерції, інтеграції API та оптимізації продуктивності, я можу гарантувати, що ваш проєкт буде виконано професійно та на найвищому рівні.
Актуальні фриланс-проєкти в категорії HTML та CSS верстання
Розробка інтернет-магазину WordPress + WooCommerce# Розробка інтернет-магазину сільськогосподарської техніки Макет дизайну зараз на фінальній стадії розробки. Я чудово розумію, що без готового макету фінальна оцінка буде неточною. Проте, якщо ви вже реалізовували подібні e-commerce проєкти зі складною структурою, вашого досвіду… CMS, HTML та CSS верстання ∙ 4 хвилини тому |
Верстальщик для багатосторінкового рекламного матеріалу сайту (Health Media) — вайб-кодинг, чистий код
6654 UAH
Потрібно створити багатосторінковий сайт у стилі health media, за зразком healthinsider.news. Не просто лендінг — повноцінний псевдо-редакційний сайт (advertorial), під який буде литися трафік з Meta Ads. ВАЖЛИВО: завдання виконується через вайб-кодинг (AI-assisted coding /… HTML та CSS верстання, Веб-програмування ∙ 7 годин 22 хвилини тому ∙ 40 ставок |
Оновлення дизайну на сайтіПотрібно оновити дизайн існуючого сайту, використовуючи HTML, CSS, JS: освіжити зовнішній вигляд, зробити його сучасним і адаптивним під мобільні пристрої. Потрібно додати плавні анімації та інтерактивні елементи. HTML та CSS верстання, Javascript та Typescript ∙ 1 день 11 годин тому ∙ 85 ставок |
Шукаю WordPress/Elementor/Woo спеціаліста який має великий досвід з шаблоном Woodmart
5000 UAH
Потрібно оновити візуал та структуру інтернет-магазину стоматологічних товарів (посилання відправлю в ПП) Сайт працює на зв'язці WordPress + WooCommerce. Шаблон — Woodmart. Завдання: Оновлення шапки (header), підвалу (footer) та контенту на головній сторінці згідно з готовим… CMS, HTML та CSS верстання ∙ 1 день 14 годин тому ∙ 34 ставки |
Верстка сайтуТехнічне завдання на верстку сайту. Писав чат гпт Посилання на дизайн - https://www.figma.com/file/bBuR3yG2eSzLpBcBJURNZi?node-id=60:397&t=zQ9Kln2RtyBgNHKw-1&locale=en&type=design Загальна інформація Необхідно виконати адаптивну кросбраузерну верстку сайту на основі наданого… HTML та CSS верстання ∙ 1 день 15 годин тому ∙ 113 ставок |