​

Vite Design

​

What you design

​

Scaffold

cp -r templates/markt-vite-storefront templates/my-theme
cd templates/my-theme
npm install
npm run dev

​

Required routes

​

Design rules

1. Colors only in theme/colors.css
2. Landing sections stay inside LandingPage.tsx
3. Keep lib/ to the four platform files
4. On-hold: isStoreProductOnHold(product) — disable cart / buy
5. Respect product groups on grids
6. Policies via LegalPolicyPage — see Policy Pages
7. Checkout is platform-only — no payment form in the theme

​

Policy page example

import { LegalPolicyPage } from '@/components/legal-policy-page'

export const PrivacyPage = () => (
  <LegalPolicyPage
    title="Privacy Policy"
    policyKey="privacyPolicy"
    emptyMessage="No privacy policy has been added yet."
  />
)

​

Publish checklist

• npm run build passes
• Preview iframe shows required routes
• Empty / loading states for catalog and policies
• On-hold items not purchasable

​

Next

• Vite Storefront
• Template Structure
• Build a Custom Theme