Back to templates
E-commerce template

Commerce (Shopify)

Shopify-backed storefront with collections, product cards, sidebar layout, checkout, and full Next.js commerce patterns.

Next.jsTypeScriptTailwind CSSshadcn/uiShopify Storefront API
View on GitHubUpstream source

Clone it

terminalClone the template
git clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./commerce
cd commerce
pnpm install
pnpm dev

What's in the box

  • Shopify Storefront API integration
  • Sidebar layout with collections
  • Latest products grid with badges
  • Product detail pages with variants
  • Cart + checkout flow

When to use

Use it

Online stores backed by Shopify. Use this when the user already has products in Shopify and wants a custom front-end with full SSR/SSG performance.

Skip it

Stripe-only or DGateway-only checkouts — install JB Stripe UI or DGateway Shop instead.

The 0 customization sections

When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.

    Customization prompt — paste into your AI agent

    After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:

    paste into your AI agentCustomization interview prompt
    I want to customize the "Commerce (Shopify)" template using the VibeKit customization guide.

Walk me through the 0 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.

After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.

CUSTOMIZATION GUIDE:
Set Shopify env vars (SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_ACCESS_TOKEN). Edit `lib/shopify/` for any API extensions, customise the sidebar in `components/layout/sidebar/`, and theme via Tailwind tokens.

SECTIONS:


Begin with section 1 now.