Tillbaka

Knowville Shopify App

En native Shopify-integration som visar rätt information i rätt tid för att minska felköp

Bakgrund

Knowvilles vision är att visa rätt information i rätt tid för att minska felköp. Plattformen samlar användargenererat innehåll kring produkter. För att nå användarna där köpbesluten faktiskt fattas byggde jag en Shopify-app som visar Knowvilles innehåll direkt på produktsidor i Shopify-butiker.

Appen matchar produkter automatiskt och visar relevant innehåll. Besökare kan läsa utan konto, och logga in för att bidra med eget innehåll och rösta.

Arkitektur

Appen använder Shopifys App Proxy för att säkert kommunicera mellan butiken och Knowvilles backend. Alla anrop går server-till-server genom en mellanliggande appserver som hanterar autentisering och säkerhet. Inga API-nycklar exponeras i klientkoden.

En dual-token-modell styr åtkomsten: läsoperationer använder butikens token, skrivoperationer kräver besökarens personliga token. En strikt allowlist säkerställer att enbart godkända endpoints är tillgängliga via proxyn.

Storefront-komponent

Innehållet visas via en lättviktig Preact-komponent som byggs som en IIFE-bundle och laddas via Shopifys Theme App Extension. Handlaren drar in blocket i sin temaredigerare utan att skriva kod.

Komponenten visar innehåll i ett unified feed med filterchips. Trådar kan expanderas inline för att visa alla kommentarer.

Teknikstack

AppserverReact Router v7
StorefrontPreact
Admin UIShopify Polaris
BackendLaravel + PostgreSQL
HostingAzure Container Apps
CI/CDGitHub Actions
BuildVite (IIFE)

Funktioner

  • Unified feed med användargenererat innehåll
  • Filterchips för att växla mellan innehållstyper
  • Automatisk produktmatchning med stöd för variantbyte
  • Inloggning och registrering direkt i butiken
  • Bidra med innehåll och rösta
  • Merchant-dashboard i Shopify Admin för kontokoppling

Min roll

Jag har designat arkitekturen, byggt appen och gjort alla tekniska val. Projektet har drivits iterativt i sju faser – från en proof-of-concept med en enda API-endpoint till en komplett app med autentisering, skrivoperationer och deploy-pipeline.