Кастомні Shopify додатки: автоматизація та інтеграція

Стандартні програми з Shopify App Store рідко покривають специфіку середнього та великого бізнесу. Коли потрібна глибока кастомізація — обхід стандартних лімітів API, нестандартна логіка чекаута або синхронізація з legacy-системами — доводиться писати власний додаток. Ми допомагаємо створювати такі рішення. Економія на комісіях може сягати 10 000 грн на місяць. Кастомний додаток працює в 2-3 рази швидше за публічні аналоги.

Правильно спроектований кастомний додаток окупається за 2–3 місяці завдяки відсутності комісії Shopify (до 15%) та оптимізації бізнес-процесів. Наприклад, автоматична синхронізація замовлень з 1С скорочує час обробки на 80%, а кастомні знижки через Shopify Functions збільшують середній чек на 12%. Якщо ви задумалися про таке рішення, зв'яжіться з нами — оцінимо завдання за один день.

Наші спеціалісти мають понад 5 років досвіду та реалізували більше 20 проєктів з інтеграції Shopify.

Як вибрати тип Shopify App під ваші завдання?

Custom App — оптимальний вибір для корпоративної автоматизації: немає комісії, повний контроль над функціоналом, можливість роботи з будь-якими API. При правильній архітектурі продуктивність Custom App на 30–50% вища, ніж у публічних аналогів, завдяки оптимізованим запитам та відсутності зайвих абстракцій. Крім того, ви економите до 70% на транзакційних витратах, уникаючи комісії App Store.

Офіційна документація Shopify підтверджує: для конфіденційних даних та нестандартної бізнес-логіки краще використовувати Custom App.

Коли кастомний додаток виправдовує витрати?

Типові сценарії: синхронізація замовлень з 1С у реальному часі, кастомна логіка розрахунку знижок (Shopify Functions), розширення чекаута для Plus-магазинів, створення особистого кабінету постачальника. Якщо стандартний функціонал Shopify не вирішує задачу — кастомний додаток закриває прогалину. Особливо це актуально для компаній з обігом від кількох мільйонів гривень на місяць, де навіть невелика економія на комісіях окупає розробку за 2–3 місяці.

Наприклад, один із наших клієнтів — мережа магазинів електроніки — автоматизував вивантаження залишків в 1С. Раніше менеджери вручну звіряли дані, що займало 4 години на день. Після впровадження Custom App процес скоротився до 10 хвилин, а помилки синхронізації зникли повністю. Витрати на розробку окупилися за 2,5 місяці.

Які технології ми використовуємо?

Основний стек: Node.js (Express/Nest.js), React + Polaris, PostgreSQL, Redis, Docker. Для черг — BullMQ, для вебхуків — вбудовані обробники Shopify.

Процес розробки:

1. Аналіз — вивчаємо бізнес-процеси, API-ліміти, вимоги до безпеки.
2. Проектування — архітектура, вибір типу додатку, схема OAuth, база даних.
3. Реалізація — backend на Express, frontend на React+Polaris, webhooks.
4. Інтеграція — підключення до 1С, CRM, телефонії через REST/SOAP.
5. Тестування — навантажувальне, на відповідність Shopify guidelines, автотести.
6. Деплой — на Railway, Fly.io або власний VPS + моніторинг CI/CD.

import { shopifyApp } from '@shopify/shopify-app-express';
import { PostgreSQLSessionStorage } from '@shopify/shopify-app-session-storage-postgresql';

const shopify = shopifyApp({
  api: {
    apiKey: process.env.SHOPIFY_API_KEY,
    apiSecretKey: process.env.SHOPIFY_API_SECRET,
    scopes: ['read_products', 'write_products', 'read_orders', 'write_orders'],
    hostName: process.env.HOST.replace(/https?:\/\//, ''),
    apiVersion: ApiVersion.Latest,
  },
  auth: {
    path: '/api/auth',
    callbackPath: '/api/auth/callback'
  },
  webhooks: {
    path: '/api/webhooks'
  },
  sessionStorage: new PostgreSQLSessionStorage(process.env.DATABASE_URL),
});

app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(shopify.config.auth.callbackPath, shopify.auth.callback(), shopify.redirectToShopifyOrAppRoot());

const client = new shopify.api.clients.Graphql({ session });
const response = await client.query({
  data: `{
    orders(first: 50, query: "financial_status:paid") {
      edges {
        node {
          id
          name
          totalPriceSet {
            shopMoney {
              amount
            }
          }
          lineItems {
            edges {
              node {
                title
                quantity
              }
            }
          }
        }
      }
      pageInfo {
        hasNextPage
        endCursor
      }
    }
  }`
});

shopify.webhooks.addHandlers({
  ORDERS_PAID: [
    {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: '/api/webhooks/orders-paid',
      callback: async (topic, shop, body, webhookId) => {
        const order = JSON.parse(body);
        await syncOrderToERP(shop, order);
      },
    },
  ],
});

import { Page, Layout, Card, DataTable, Button } from '@shopify/polaris';
import { useAppBridge } from '@shopify/app-bridge-react';

export default function Dashboard() {
  const app = useAppBridge();
  return (
    <Page title="Управління замовленнями">
      <Layout>
        <Layout.Section>
          <Card>
            <DataTable
              columnContentTypes={['text', 'text', 'numeric']}
              headings={['Замовлення', 'Статус', 'Сума']}
              rows={orders.map(o => [o.name, o.financial_status, o.total_price])}
            />
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}