compits Shop – Refurbished IT on Shopify

Project Type

Online shop

Technologies

shopify, next.js, react, typescript, tailwind, vercel

compits shop for refurbished IT hardware: home page in the browser and the notebook category on a phone

For compits GmbH we rebuilt the online shop for refurbished IT hardware: shop.compits.at. It sells tested notebooks, desktop PCs, monitors, tablets, smartphones and servers. Product data, stock, orders and checkout run on Shopify; the storefront is a custom Next.js frontend – a headless shop.

Why Shopify – and why headless

Shopify handles what a shop has to get right: product management, inventory, order processing and a secure checkout hosted by Shopify, with payments through Mollie. The frontend is our own, built with Next.js, React and TypeScript, so the shop is not tied to a theme, looks like the compits brand and loads fast.

Shop logic for one-off items

Refurbished hardware works differently from a classic shop: every device is a one-off with its own condition. In Shopify each device is therefore its own product with exactly one variant and a stock of one. The storefront builds on that:

  • Condition (new, grade A, B, C), groups of identical devices and upgrades are controlled through Shopify tags.
  • Identical devices are shown as one listing, with the number available.
  • Categories and filters by manufacturer, condition and availability are derived from title, manufacturer and tags, with no collections to maintain by hand.

Customer accounts and orders

Customers sign in through the Shopify Customer Account API (OAuth with PKCE) and see their orders, including shipment tracking.

Inventory integration

Products are created in a purpose-built app that takes tested devices from the testing system, and reach the shop through JTL-Wawi and the JTL Shopify connector. The next step is for that Laravel application to create and update products directly through the Shopify Admin API.

Fast and search-friendly

Product data is cached so pages load instantly; when something changes in Shopify, a webhook clears exactly that cache. For Google there is a sitemap, structured data (JSON-LD) and 301 redirects for the previous shop's URLs, so existing links and rankings keep pointing at the right pages.

Stack: Next.js 15 (App Router, Server Components, Server Actions), React 19, TypeScript, Tailwind CSS 4, Shopify Storefront API and Customer Account API, Mollie, hosted on Vercel.

Notebook category page with filters by manufacturer and condition, next to a product page on a phone

Like what you see?

Let's create something amazing together.

Start a Project