compits Shop – Refurbished-IT auf Shopify

Für die compits GmbH haben wir den Onlineshop für refurbished IT-Hardware neu aufgebaut: shop.compits.at. Verkauft werden geprüfte Notebooks, Desktop-PCs, Monitore, Tablets, Smartphones und Server. Produktdaten, Bestand, Bestellungen und Checkout laufen über Shopify, die Oberfläche ist ein eigenes Frontend mit Next.js – ein sogenannter Headless-Shop.

Warum Shopify – und warum headless

Shopify übernimmt, was ein Shop zuverlässig können muss: Produktverwaltung, Lagerbestand, Bestellabwicklung und einen sicheren, von Shopify gehosteten Checkout. Bezahlt wird über Mollie. Das Frontend haben wir dagegen selbst entwickelt, mit Next.js, React und TypeScript. So ist der Shop an kein Theme gebunden, sieht aus wie die Marke compits und lädt schnell.

Eine Shop-Logik für Einzelstücke

Refurbished-Ware funktioniert anders als ein klassischer Shop: Jedes Gerät ist ein Einzelstück mit eigenem Zustand. In Shopify ist deshalb jedes Gerät ein eigenes Produkt mit genau einer Variante und Bestand 1. Darauf baut die Logik im Frontend auf:

• Zustand (Neuware, Grade A, B, C), Gruppen baugleicher Geräte und Aufrüstungen werden über Shopify-Tags gesteuert.
• Baugleiche Geräte erscheinen im Shop zusammengefasst, mit Anzeige, wie viele davon verfügbar sind.
• Kategorien und Filter nach Hersteller, Zustand und Verfügbarkeit entstehen automatisch aus Titel, Hersteller und Tags. Kollektionen müssen nicht von Hand gepflegt werden.

Kundenkonto und Bestellungen

Kundinnen und Kunden melden sich über die Shopify Customer Account API an (OAuth mit PKCE) und sehen dort ihre Bestellungen samt Sendungsverfolgung.

Anbindung an die Warenwirtschaft

Die Produkte entstehen in einer eigens entwickelten App, die geprüfte Geräte aus dem Prüfsystem übernimmt, und kommen über JTL-Wawi und den JTL-Shopify-Connector in den Shop. Als nächster Schritt ist geplant, dass diese Laravel-Anwendung die Produkte direkt über die Shopify Admin API anlegt und aktualisiert.

Schnell und suchmaschinenfreundlich

Produktdaten werden zwischengespeichert, damit Seiten sofort laden. Ändert sich in Shopify etwas, leert ein Webhook gezielt den Cache, und der Shop zeigt den neuen Stand. Für Google gibt es eine Sitemap, strukturierte Daten (JSON-LD) und 301-Weiterleitungen für die URLs des bisherigen Shops, damit bestehende Links und Rankings auf die richtigen Seiten führen.

Technik: Next.js 15 (App Router, Server Components, Server Actions), React 19, TypeScript, Tailwind CSS 4, Shopify Storefront API und Customer Account API, Mollie, Hosting auf Vercel.