Das bekommst du
- Eine HTML-Datei mit eingebetteten Schriften und Bildern oder eine Portierung nach Next.js, React, Vue oder Astro
- Startseite, Katalog mit Filtern, Produktseiten, Kollektionen, Warenkorb und ein Demo-Checkout
- Seiten für Größenberater, Versand, FAQ, Kontakt, Über uns, Newsletter, Rechtliches und 404
- Ein Validator, der Links, Struktur, Offline-Sicherheit und übrig gebliebene Beispielnamen prüft
- Optionale passende Produkt- und Kampagnenfotos von PopNow, vor jedem Lauf beziffert
Gut für
- Sneaker-, Schuh- und Sportbekleidungsmarken
- Kleine Modelabels, die einen Kampagnen-Look wollen
- Shop-Prototypen für Entwickler, bevor ein echter Warenkorb angebunden wird
Nicht für
- Heute schon echte Zahlungen annehmen: Der Checkout ist eine Demo, bis ein Anbieter angebunden ist
- Kataloge mit Hunderten Artikeln, die eine Datenbank brauchen
- Laute, dunkle oder Neon-Markenauftritte
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Sneaker-Shop-Website-Vorlage“ (sneaker-store-website) dafür: Erstelle einen Shop für Northfold, eine kleine Trailschuh-Marke mit fünf Modellen in EUR, kostenlosem Versand ab 120 EUR und 30 Tagen Rückgaberecht.
In einem Coding-Agent
/popnow-sneaker-store-website Erstelle einen Shop für Northfold, eine kleine Trailschuh-Marke mit fünf Modellen in EUR, kostenlosem Versand ab 120 EUR und 30 Tagen Rückgaberecht.
Dann probier
Setz meine Produktfotos aus ./photos auf den Shop-Hintergrund und nenn mir vorher den Preis.
Portiere den Shop in mein Next.js-Projekt und lass den Checkout als Demo.
Das solltest du bereithalten
- Produktnamen, Preise, Farbvarianten und Größen
- Zwei bis vier Kollektionen und deine Versand- und Rückgaberegeln
- Produktfotos oder einen PopNow-API-Schlüssel, um sie zu erzeugen
- Adresse und Öffnungszeiten, falls du ein Ladengeschäft hast
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Kalender-Heatmap
+3Ein Jahr täglicher Aktivität als schattiertes Kalenderraster, mit Serien, Summen und Tastaturbedienung.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Entwickler-Portfolio-Website
+3Eine dunkle persönliche Website für Entwickler mit Fallstudien, Artikeln, Vorträgen, Lebenslauf und Kontaktformular.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktives Architekturdiagramm
+3Ein offline nutzbares, klickbares Systemdiagramm aus einem geprüften JSON-Modell, mit den Belegen zu jedem Kasten.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
KPI-Dashboard-Vorlage
+3Vier KPI-Kacheln mit Veränderungs-Chips über einem leuchtenden Liniendiagramm, Aufschlüsselung und Zielbalken.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Nimmt der Checkout echte Zahlungen an?
Nein. Er validiert das Formular, ändert die Summen je nach Versandart und zeigt eine Bestätigung, stoppt aber deutlich vor der Zahlung. Einen Zahlungsanbieter anzubinden ist in einem echten Projekt ein eigener Schritt.
Kann ich meine eigenen Produktfotos verwenden?
Ja. Leg sie ab, und der Skill verwendet sie unverändert oder setzt sie mit deiner Freigabe und nach einem Credit-Angebot mit PopNow auf den einheitlichen Shop-Hintergrund bzw. stellt sie frei, damit das Raster einheitlich wirkt.
Funktioniert es auch für Kleidung statt Schuhe?
Ja. Größen wechseln zu Buchstabengrößen, der Größenberater wird zur Maßtabelle und Weitenoptionen werden zu Passformen. Kollektionen und Linien lassen sich umbenennen oder entfernen.
Was, wenn ich keinen PopNow-API-Schlüssel habe?
Der Shop wird trotzdem gebaut. Produkte bekommen beschriftete Platzhalter-Kacheln oder deine eigenen Fotos, und die Antwort listet auf, welche Plätze noch Bilder brauchen.