Skip to main content
The SaaS-Tool Storefront Template is a forkable Next.js storefront built for merchants selling subscription-based digital products — license-based software, automation tools, Discord-bot SaaS, cheats. It is opinionated where the Storefront Starter is generic.
Use this template when your catalog is mostly digital subscriptions with multiple plan tiers per product. Use the Storefront Starter when you want a more neutral baseline that fits any vertical.

​
Create a Storefront

bunx create-shoppex-storefront my-tool-shop --template saas-tool
cd my-tool-shop
bun install
bun run dev
For non-interactive setup: 
bunx create-shoppex-storefront my-tool-shop \
  --template saas-tool \
  --shop-slug your-shop \
  --customer-portal-url https://account.yourdomain.com
The dev server runs on http://localhost:3013 and ships in demo mode by default — sample products, sample reviews, demo checkout — so you can rebrand before connecting to your live shop.

​
What Is Included

Hero with Background Art

Full-bleed hero image slot, gradient text headline, floating pill nav with scroll-aware shrink animation.

Products Carousel

Drag-to-scroll Embla carousel with hover-sharpen image effect, status badges per tool, and a search/sort grid on the dedicated /products page.

Detail Page with 3-Plan Selector

Per-product page with video slot, system requirements grid, 3-card subscription selector with “Most Popular” highlight, and a modal checkout.

Reviews + Features + FAQ

Per-product customer reviews, “What you get” feature list with sub-feature counts, and an accordion FAQ. Six-card “Why choose us” on the home page.

Status Page

Live-style server status with uptime bars and per-product detection + version state.

Free-Tool Landing

A “free spoofer” or free-tier tool landing page wired in by default — easy to delete or repurpose.

​
AI-First Customization

Two config files cover ~80% of customizations. AI agents (Claude, Codex, Cursor) can edit them by following the CLAUDE.md operating manual at the repo root.
1

Brand identity

Edit theme.config.ts — brand name, accent color, hero copy, footer columns, social links.
2

Catalog and content

Edit src/config/storefront.config.ts — products, plans, status reports, reviews, features, jobs, FAQ.
3

Use a recipe

Pick a step-by-step recipe from docs/recipes/ (rebrand, change plan periods, add a category, customize status vocab, swap reviews, edit hero text, customize checkout fields, connect Shoppex checkout).
4

Or use a prompt

Pick a prompt template from docs/prompts/ and paste it into your AI agent. The recipes and prompts are linked from each other.

​
Connect to Live Shoppex

The modal checkout is wired to @shoppexio/storefront. Demo mode shows a confirmation toast; live mode creates a real invoice and redirects to hosted checkout.
1

Switch off demo mode

In .env.local:
NEXT_PUBLIC_SHOPPEX_SHOP_SLUG=<your-shop>
NEXT_PUBLIC_SHOPPEX_USE_SAMPLE_DATA=false
2

Map plans to Shoppex products

For each plan in storefront.config.ts, set productId and optionally variantId so the checkout SDK knows which Shoppex product to invoice.
3

Verify

Click Purchase Now on any product, fill in your email, accept terms — the browser redirects to checkout.shoppex.io/invoice/<id>. The hosted checkout handles payment, webhooks, and license delivery.

​
Stack

  • Next.js 16 (App Router, RSC)
  • TypeScript strict
  • Tailwind CSS v4 + hand-rolled BEM-style CSS
  • Radix UI primitives, Lucide icons, Embla carousel
  • @shoppexio/storefront for catalog reads + checkout

​
Differences vs. the Engine Starter

Engine StarterSaaS-Tool Template
VerticalGenericSubscription-based digital tools
ThemeLight, cleanDark, premium, cinematic
HeroHeadline + CTAFull-bleed background art + gradient headline
PlansSingle price per product3-card subscription selector
PagesHome, products, detail, jobs+ Status, free-tool landing, FAQ, payment methods
AI anchorsStandardCLAUDE.md, AGENTS.md, 8 recipes, 4 prompt templates
If neither template fits, fork the closer one and edit. Both are MIT-licensed.