Розробка сайту електронної комерції на Shopify
Shopify — SaaS-платформа з хостингом, оновленнями та PCI DSS-compliance в комплекті. Підходить для запуску інтернет-магазину без власної серверної інфраструктури. Робота розробника тут — тема на Liquid, налаштування приложень з App Store та базова конфігурація платформи.
З чого складається Shopify-магазин
-
Тема — файли
.liquid, CSS, JS у репозиторії теми (доступні через Shopify CLI або Theme Editor) - Приложення — встановлюються з Shopify App Store, додають функціонал (відгуки, фільтри, email-маркетинг)
- Метаполя — кастомні дані для товарів, коллекцій, сторінок
- Shopify Functions — серверний код для знижок і доставки (Rust/JS, розгортається в інфраструктурі Shopify)
- Admin API / Storefront API — для інтеграцій і headless
Що не можна змінити в стандартному Shopify: чекаут (до Shopify Plus), логіка платежів, структура бази даних.
Процес запуску магазину
Етап 1 — структура магазину (1–2 дні)
Створення магазину, базова конфігурація:
- Валюта, податки, одиниці виміру
- Платіжні шлюзи (Shopify Payments, Stripe, PayPal, локальні провайдери)
- Способи доставки: зони, ставки, розрахунок по вазі/розміру
- Сповіщення: трансакційні листи через Shopify Email або зовнішній сервіс (Klaviyo, Postmark)
Етап 2 — вибір і установка теми (1 день)
Теми з Shopify Theme Store: Dawn (безкоштовна, мінімалістична, OS 2.0), Sense, Craft, Impact — для різних ніш. Для клієнта зі специфічним дизайном — кастомна тема на базі Dawn або з нуля.
# Ініціалізація розробки теми через CLI
npm install -g @shopify/cli @shopify/theme
shopify theme dev --store=your-store.myshopify.com
Етап 3 — наповнення каталогу
Товари, коллекції, метаполя. При великому каталозі — імпорт через CSV або Admin API:
// Створення товару через Admin API (Node.js + @shopify/shopify-api)
const product = await shopify.rest.Product.save({
session,
title: "Кофемашина DeLonghi",
body_html: "<p>Опис товару</p>",
vendor: "DeLonghi",
product_type: "Кофемашини",
variants: [{
price: "45990.00",
sku: "ECAM-22110-B",
inventory_quantity: 15,
inventory_management: "shopify"
}],
images: [{ src: "https://cdn.example.com/img/ecam.jpg" }]
});
Етап 4 — приложення
Обов'язковий мінімум для більшості магазинів:
| Завдання | Приложення |
|---|---|
| Пошук з фільтрами | Boost Commerce / Searchie |
| Відгуки | Judge.me / Yotpo |
| Email-маркетинг | Klaviyo / Omnisend |
| SEO | SEO King / Plug In SEO |
| Аналітика | GA4 через офіційний канал Shopify |
| Мультивалютність | вбудовані Shopify Markets |
Етап 5 — SEO та аналітика (1 день)
- Налаштування
robots.txt(обмежено редагуємий в Shopify) - Canonical URLs — управляються через тему
- Structured data (
application/ld+json) — додаються вproduct.liquid - Sitemap:
/sitemap.xmlгенерується автоматично - GA4: через Shopify > Preferences > Google Analytics або GTM
{%- comment -%} Schema.org Product у product.liquid {%- endcomment -%}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": {{ product.title | json }},
"sku": {{ product.selected_or_first_available_variant.sku | json }},
"offers": {
"@type": "Offer",
"price": {{ product.selected_or_first_available_variant.price | divided_by: 100.0 | json }},
"priceCurrency": {{ cart.currency.iso_code | json }},
"availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}"
}
}
</script>
Локалізація та мультимовність
Shopify Markets + Shopify Translate & Adapt для управління перекладами. Альтернатива — Weglot (приложення, додає піддомен або мовний префікс).
Обмеження: безкоштовний план Shopify підтримує 1 мову. Для мультимовності потрібний Shopify Basic і вище.
Продуктивність
Shopify CDN (Fastly) обслуговує статику автоматично. Основні точки оптимізації:
- Lazy loading зображень через
loading="lazy"на<img> - Використання
{% render %}замість{% include %}для ізоляції змінних - Мініміз ація сторонніх скриптів з приложень (кожен додає 50–200 мс)
- Вбудовування критичного CSS в
<head>через секціюhead_theme
Терміни запуску
Типовий магазин на готовій темі з каталогом до 500 товарів і стандартним набором приложень: 5–10 робочих днів. Включає: налаштування платформи, кастомізацію теми під брендбук, наповнення, інтеграцію аналітики та базовий SEO-аудит.