Programista Shopify - sklepy, headless i integracje pod realny ruch

Jestem Mariusz Szatkowski i od 2006 roku piszę sklepy i strony. Przy Shopify robię to, czego nie załatwi edytor motywu: kod Liquid, sekcje Online Store 2.0, headless na Storefront API, Functions, integracje z ERP i magazynem oraz migracje z WooCommerce. Pracuję sam, więc kod, który dostajesz, piszę ja, a dostępów do Twojego sklepu nie przekazuję nikomu.

Projekt graficzny i makiety przygotowujesz Ty, na przykład w Figmie albo w arkuszu, w którym zaznaczasz, co ma stać gdzie. Ja zamieniam to w działający motyw.

#Co ustalić przed wdrożeniem sklepu na Shopify

Shopify trzyma w jednym miejscu katalog, stany, podatki, płatności i zwroty. Działa to dobrze, dopóki nikt nie próbuje przenieść całej logistyki hurtowni do Liquida. Dlatego zaczynam od listy rynków, walut, magazynów i zasad zwrotów.

W polskim sklepie dochodzą lokalne płatności. Shopify Payments jest dostępne w Polsce, a Przelewy24, PayU czy BLIK podłącza się przez bramki dostępne jako aplikacje płatnicze. Którą z nich da się włączyć dla Twojej waluty i rodzaju działalności, sprawdzam w panelu przed wyceną. Zwroty i częściowe realizacje testuję przed sezonem, bo tam wychodzą błędy.

Patrzę też na aplikacje. Polskie sklepy często mają jednocześnie dwie aplikacje do opinii, upsell i program lojalnościowy. Każda dokłada JavaScript i może się rozjechać z motywem po aktualizacji. Najpierw sprawdzam, czy wystarczą sekcje OS2, metaobiekty albo Shopify Flow, i dopiero potem dokładam kolejną subskrypcję.

#Liquid i migracja do Online Store 2.0

Online Store 2.0 zastąpiło szablony plikami JSON z sekcjami, więc treść da się układać w edytorze bez programisty. Sporo sklepów nadal stoi na starych szablonach, bo migracja wymaga przeniesienia treści i ustawień. Traktuję ją jak refaktoryzację: usuwam zduplikowane snippety, ograniczam zapytania o kolekcje w pętlach i nadaję obrazom stałe proporcje, żeby nie skakał układ strony (CLS).

W Liquidzie pilnuję też dostępności: fokus w szufladzie koszyka, kontrast przycisków i komunikaty o stanie magazynu czytelne dla czytników ekranu. Od 28 czerwca 2025 sklepy internetowe obejmuje ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług, z wyjątkiem mikroprzedsiębiorców.

#Przykłady kodu Liquid, GraphQL i webhooków Shopify

Wzorce, których używam w sklepach: ustawienia sekcji OS2, ograniczone zapytanie GraphQL pod siatkę kolekcji i odbiornik webhooków odporny na duplikaty.

#Schema sekcji (Online Store 2.0)

{% schema %}
{
  "name": "Featured collection",
  "tag": "section",
  "class": "section-featured-collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [{ "name": "Featured collection" }]
}
{% endschema %}

#Zapytanie Storefront API z paginacją kursorową

Zmienne: handle (kolekcja), first (rozmiar strony), after (kursor).

query CollectionProducts($handle: String!, $first: Int!, $after: String) {
  collection(handle: $handle) {
    id
    title
    products(first: $first, after: $after) {
      pageInfo {
        hasNextPage
        endCursor
      }
      edges {
        cursor
        node {
          id
          handle
          title
        }
      }
    }
  }
}

#Jak obsłużyć webhooki Shopify bez duplikatów

Shopify może dostarczyć ten sam webhook więcej niż raz. Dokumentacja zaleca deduplikację po nagłówku X-Shopify-Webhook-Id. Odbiornik ma 5 sekund na odpowiedź, więc cięższa praca idzie do kolejki.

// Pseudokod: odbiornik w Node z krótkotrwałym cache deduplikacji
async function handleOrderCreate(payload, headers) {
  const webhookId = headers["x-shopify-webhook-id"];
  const orderId = payload?.id?.toString();
  if (!webhookId || !orderId) return { status: 400 };

  const dedupeKey = `orders/create:${webhookId}`;
  if (await cache.has(dedupeKey)) {
    return { status: 200, body: "duplicate ignored" };
  }

  await enqueueErpExport(orderId);
  await cache.set(dedupeKey, "1", { ttlSeconds: 86400 });
  return { status: 200 };
}

#Ograniczona pętla Liquid na siatce produktów

Sztywny limit i stałe szerokości w image_url zatrzymują rozrost pętli i pobieranie za dużych obrazów na telefonach.

{% assign cap = section.settings.products_to_show | default: 8 %}
{% assign collection = section.settings.collection %}
<ul class="product-grid" role="list">
  {% for product in collection.products limit: cap %}
    <li>
      <a href="{{ product.url }}">
        {{
          product.featured_image
          | image_url: width: 640
          | image_tag: loading: 'lazy', widths: '320,640,960'
        }}
      </a>
    </li>
  {% endfor %}
</ul>

#Jak dodać produkt do koszyka przez Storefront API

Jeśli token Storefront API nie powinien trafić do kodu w przeglądarce, mutację wywołuję po stronie serwera, na przykład w akcji trasy w Hydrogen.

mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
  cartLinesAdd(cartId: $cartId, lines: $lines) {
    cart {
      id
      totalQuantity
    }
    userErrors {
      field
      message
    }
  }
}

Przykładowe zmienne:

{
  "cartId": "gid://shopify/Cart/YOUR_CART_ID",
  "lines": [
    {
      "merchandiseId": "gid://shopify/ProductVariant/YOUR_VARIANT_ID",
      "quantity": 1
    }
  ]
}

#Jak dostosować checkout Shopify przez Functions

Shopify nie pozwala sklepom wstrzykiwać dowolnego JavaScriptu do checkoutu. Rabaty, koszty wysyłki i dostępne metody płatności zmienia się przez Shopify Functions i oficjalne rozszerzenia UI.

Ograniczenia planów, o których trzeba wiedzieć przed wyceną:

• rozszerzenia UI w krokach informacji, wysyłki i płatności działają tylko na Shopify Plus (dokumentacja),
• własna aplikacja z Functions wymaga Plus; na niższych planach Functions działają przez aplikacje publiczne z App Store (dokumentacja).

Pól podatkowych nie podmieniam skryptem na skróty. Dane do faktury muszą zgadzać się z ustawieniami rynków i z tym, czego oczekuje Twoja księgowość.

#Integracja Shopify z ERP przez webhooki i kolejki

Zamówienia trzeba zwykle spiąć z magazynem centralnym albo zewnętrznym fulfilmentem. Webhooki orders/create i inventory_levels/update muszą być odporne na duplikaty, bo Shopify może dostarczyć to samo zdarzenie dwa razy, a ERP potrafi zablokować rekord przy złym SKU.

Webhook trafia do kolejki (np. Cloudflare Queues albo AWS SQS), a eksport do ERP odczytuje ją osobno i zapisuje błędy w widoku zaległych zdarzeń. Alert przychodzi, zanim stany w Shopify i w magazynie rozjadą się na tyle, że zauważy to obsługa klienta.

Sklep na WooCommerce da się przenosić etapami: najpierw katalog i płatności na Shopify, a stary checkout wyłączam, gdy webhooki działają stabilnie.

#Wydajność: Core Web Vitals i skrypty marketingowe

Interakcje na telefonach (INP) psują najczęściej mega menu, karuzele produktów i skrypty opinii ładowane od razu. Profiluję szablony i odchudzam kod firm trzecich. Część tagów można przenieść na serwer, jeśli pozwala na to Twoja polityka prywatności.

Wzrostu konwersji o konkretny procent nie obiecuję. Dostajesz pomiar przed zmianą i po niej oraz listę usuniętych wąskich gardeł.

#Migracja na Shopify bez utraty SEO

Przeprowadzka bez mapy przekierowań kończy się falą błędów 404 w Search Console. Eksportuję stare adresy, przypisuję im przekierowania 301 i sprawdzam błędy po starcie. Atrybuty techniczne przenoszę do metapól, żeby nie zniknęły filtry kolekcji. Dane strukturalne Product i Organization dopasowuję do tego, co faktycznie sprzedajesz.

Asystenci AI czytają te same fakty co ludzie: politykę zwrotów, czas wysyłki, dostępne rozmiary. Pilnuję, żeby JSON-LD, FAQ i treść strony mówiły to samo.

#Narzędzia

Motyw ma CI, testy najważniejszych ścieżek koszyka, a sekrety leżą poza kodem motywu. Integracje dokumentuję tak, żeby Twój dział IT mógł je przejąć bez mojej pomocy.

Pozostałe kursy Shopify Partner Academy: Liquid Storefronts for Theme Developers (Credly) i Creating a Digital Marketing Strategy.

Łączyłem Shopify z WordPressem i WooCommerce dla klientów z Polski i Wielkiej Brytanii. Opinie o tych wdrożeniach są w rekomendacjach na LinkedIn, część z nich także poniżej.

Jeśli budujesz aplikację Shopify i potrzebujesz wsparcia przy jej wpisie w App Store, pomiarze onboardingu i kontakcie po instalacji, tym zajmuje się inżynieria go-to-market.

#Jak zacząć projekt na Shopify

Napisz przez formularz kontaktowy, co chcesz zrobić. Pomoże eksport produktów, lista aplikacji i integracji oraz terminy kampanii. Odpowiem na piśmie, z pytaniami albo z ofertą opisującą etapy, założenia i ryzyka.