Разработка сайта на 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 inline в
<head>через секциюhead_theme
Сроки запуска
Типичный магазин на готовой теме с каталогом до 500 товаров и стандартным набором приложений: 5–10 рабочих дней. Включает: настройку платформы, кастомизацию темы под брендбук, наполнение, интеграцию аналитики и базовый SEO-аудит.