What you get
- One HTML file with fonts and images embedded, or a Next.js, React, Vue or Astro port
- Home, catalog with filters, product pages, collections, bag and a demo checkout
- Size finder, delivery, FAQ, contact, about, newsletter, legal and 404 pages
- A validator that checks links, structure, offline safety and leftover sample names
- Optional matched product and campaign photos from PopNow, priced before each run
Good for
- Sneaker, footwear and sportswear brands
- Small apparel labels that want a campaign look
- Store prototypes to hand to a developer before connecting a real cart
Not for
- Taking real payments today: checkout is a demo until a provider is connected
- Catalogs with hundreds of items that need a database
- Loud, dark or neon brand identities
How to use it
In Claude or ChatGPT
Use the PopNow skill "Sneaker Store Website Template" (sneaker-store-website) for this: Make a store for Northfold, a small trail shoe brand selling five models in EUR, with free delivery over 120 EUR and a 30-day return window.
In a coding agent
/popnow-sneaker-store-website Make a store for Northfold, a small trail shoe brand selling five models in EUR, with free delivery over 120 EUR and a 30-day return window.
Then try
Put my product photos in ./photos on the store backdrop and quote me the price first.
Port the store to my Next.js project and keep the checkout as a demo.
What to have ready
- Product names, prices, colourways and sizes
- Two to four collections and your delivery and returns policy
- Product photos, or a PopNow API key to generate them
- Store address and hours if you have a shop
Similar skills
View all →3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Shader Hero Agency Website
+3A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Developer Portfolio Website
+3A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
KPI Dashboard Template
+3Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
Does the checkout take real payments?
No. It validates the form, changes totals with the delivery method and shows a confirmation, but it clearly stops before payment. Connecting a payment provider is a separate step in a real project.
Can I use my own product photos?
Yes. Drop them in and the skill uses them as they are, or, with your approval and a credit quote, places them on the store's matched backdrop or cuts them out with PopNow so the grid looks consistent.
Does it work for clothing instead of shoes?
Yes. Sizes switch to letter sizes, the size finder becomes a measurement chart and width options become fits. Collections and lines can be renamed or removed.
What if I do not have a PopNow API key?
The store still builds. Products get labelled placeholder tiles or your own photos, and the reply lists which slots still need images.