Shopify-Entwickler - Themes, Headless-Storefronts und ERP-Anbindung

#Shopify-Entwicklung für Händler in Deutschland, Österreich und der Schweiz

Shopify bringt Checkout, Zahlungen und Steuerberechnung mit. Was die Plattform nicht mitbringt, ist ein durchdachtes Stammdatenmodell. Meine Arbeit beginnt dort: Liquid, das wartbar bleibt, Metafelder, die zum ERP-Export passen, und Webhooks, die unter Last keine doppelten Lieferaufträge erzeugen. Braucht Ihr Shop daneben eine starke Redaktion, kann WordPress die Inhalte tragen, ohne dass Produktdaten an zwei Stellen gepflegt werden.

Grafikdesign und Wireframes bringen Sie mit, etwa als Figma-Datei. Ich setze sie als Theme oder Frontend um.

#Was vor dem Aufbau eines Shopify-Shops zu klären ist

Shopify bündelt Katalog, Bestände, Märkte und Zahlungsarten. Das funktioniert, solange niemand versucht, jede Sonderregel aus dem Großhandel in Theme-Snippets nachzubauen. Ich frage deshalb zuerst nach Märkten, Steuersätzen, Versandzonen und dem Retourenprozess.

Für Kunden in Deutschland zählen im Checkout meist PayPal, Klarna und Kauf auf Rechnung, in der Schweiz zusätzlich TWINT. Shopify Payments ist in Deutschland, Österreich und der Schweiz verfügbar; welche Zahlungsarten darüber laufen und welche einen eigenen Anbieter brauchen, kläre ich mit Ihnen anhand der Shopify-Hilfe. Jede zusätzliche App für Bonitätsprüfung oder Ratenkauf bringt Skripte in den Shop und personenbezogene Daten zu einem weiteren Empfänger. Das dokumentiere ich, bevor die App installiert wird.

#Was ich als Shopify-Entwickler übernehme

• Sections und JSON-Templates für Online Store 2.0, die Ihr Merchandising im Theme-Editor ändern kann, ohne die Produktseite zu verlangsamen.
• Metafelder und Metaobjekte für Größentabellen, technische Datenblätter und Kompatibilitätslisten, mit Validierung beim CSV-Import.
• Storefront API mit Cursor-Pagination und Fehlerbehandlung für Kampagnen-Traffic.
• Admin API und Fulfillment für Teilsendungen, mehrere Lagerorte und den Abgleich mit DHL, DPD oder einem Fulfillment-Dienstleister.
• App-Audit: doppelte Review-, Upsell- und Loyalty-Apps zusammenführen oder durch Shopify Flow ersetzen.

#Liquid und Online Store 2.0

Online Store 2.0 ersetzt Liquid-Templates durch JSON-Templates mit Sections. Viele Shops laufen trotzdem auf alten Themes, weil die Migration Inhalte und Einstellungen neu zuordnet. Ich behandle das als Refactoring: doppelte Snippets entfernen, Kollektionsabfragen in Schleifen begrenzen, Bilder mit festen Seitenverhältnissen ausliefern, damit sich das Layout beim Laden nicht verschiebt.

Barrierefreiheit gehört dazu: Fokusführung im Warenkorb-Drawer, ausreichender Kontrast der Buttons, Live-Regionen für Lagerstatus. Seit dem 28. Juni 2025 verlangt das Barrierefreiheitsstärkungsgesetz (BFSG) von vielen Onlineshops in Deutschland barrierefreie Bestellstrecken; Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen.

#Codebeispiele für Liquid, GraphQL und Webhooks

Drei Muster aus der Praxis: Section-Einstellungen für OS2, eine begrenzte GraphQL-Abfrage für Kollektionsraster und ein Webhook-Worker, der Duplikate erkennt.

#Section-Schema (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 %}

#Storefront API mit Cursor-Pagination

Variablen: handle (Kollektion), first (Seitengröße), after (Cursor).

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
        }
      }
    }
  }
}

#Shopify-Webhooks ohne Duplikate verarbeiten

Laut Shopify-Dokumentation kann derselbe Webhook mehrfach ankommen; zum Deduplizieren dient der Header X-Shopify-Webhook-Id. Shopify wartet höchstens fünf Sekunden auf die Antwort, daher nimmt der Endpunkt nur an und reiht die Arbeit in eine Queue ein.

// Pseudocode: Worker mit kurzlebigem Dedupe-Cache, ERP-Export läuft asynchron
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 };
}

#Begrenzte Liquid-Schleife für Produktraster

Ein festes limit und feste image_url-Breiten verhindern teure Schleifen und zu große Bilder auf mobilen Kollektionsseiten.

{% 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>

#Produkte per Storefront API in den Warenkorb legen

Wenn das Token nicht im Browser-Bundle landen soll, läuft die Mutation über eine Serverroute oder in Hydrogen über eine React-Router-Action.

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

Beispiel-Variablen:

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

#Shopify-ERP-Anbindung mit Webhooks und Queues

Im Mittelstand heißt die Gegenseite oft SAP Business One, Microsoft Dynamics, weclapp oder ein ERP mit CSV- und XML-Schnittstelle; die Buchhaltung läuft über DATEV oder Lexware. Webhooks wie orders/create müssen idempotent verarbeitet werden. Ich setze einen Worker mit Queue, Wiederholungen, Dead-Letter-Queue und Alarm auf, damit Bestandsabweichungen auffallen, bevor der Vertrieb sie meldet.

Bei Filialnetz und Zentrallager zählen Standorte und die Reihenfolge der Fulfillment-Regeln. Ich teste Teilstorno und Nachlieferung, nicht nur die normale Bestellung.

#Performance und Core Web Vitals

Schnell wird ein Shop durch Theme und Tags, nicht durch Hosting, das Shopify ohnehin stellt. Ich setze Budgets je Template, entferne render-blockierende Assets und vermeide Layoutverschiebungen durch feste Medien-Container und font-display. Umsatzsteigerungen verspreche ich nicht. Was ich liefere, sind Messungen vorher und nachher auf denselben Seiten.

#Auslandsverkauf und B2B mit Shopify Markets

Wer aus Deutschland nach Österreich und in andere EU-Länder an Verbraucher verkauft, kann die Umsatzsteuer über das OSS-Verfahren melden; die Schweiz ist Drittland mit Zoll. Shopify Markets zeigt Preise, Währungen und Versandkosten pro Markt, die steuerliche Bewertung trifft aber Ihre Steuerberatung, und ich bilde sie technisch ab. Für B2B mit Firmenkonten, Preislisten und Zahlungszielen gibt es Shopify-B2B-Funktionen auf Basic, Grow, Advanced und Plus, je nach Plan in unterschiedlichem Umfang (Shopify-Hilfe).

#Migration zu Shopify ohne SEO-Verlust

Jede alte URL bekommt eine 301-Weiterleitung auf den neuen Handle. Produktattribute wandern in Metafelder, damit Filter erhalten bleiben. Nach dem Launch beobachte ich Crawl-Fehler in der Search Console und prüfe die Produkt-Feeds.

#Sichtbarkeit in KI-Suche und Rich Results

Assistenzsysteme zitieren einen Shop dann zuverlässig, wenn Lieferzeiten, Retourenregeln und Produktattribute im Frontend, im Merchant-Center-Feed und in den strukturierten Daten übereinstimmen. Ich sorge dafür, dass diese drei Quellen dieselben Werte führen.

#Tech-Stack für die Shopify-Entwicklung

Deployments laufen über Git und CI auf ein Staging-Theme, mit dokumentiertem Rollback.

Wenn Sie eine Shopify-App entwickeln und Unterstützung beim App-Store-Eintrag, bei der Onboarding-Messung und beim Nachfassen brauchen, ist das Go-to-Market-Engineering.

#Wie startet man ein Shopify-Projekt?

Schicken Sie mir über das Kontaktformular den Link zu Ihrem Shop, die Liste der Apps und Schnittstellen und die Zeitfenster, in denen nichts ausfallen darf. Sie bekommen schriftlich eine priorisierte Planung mit Risiken und ein Angebot mit den Annahmen, auf denen es beruht.