Best for
Print-on-demand sellers or Shopify alternatives who want a branded product storefront with colour/size selectors and a cart, ready to wire to a payment provider.
Stack
A ready-made Hoodie Store UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Hoodie Storetemplate does, how it's wired, and where it's opinionated.
The Hoodie Store template is a polished single-product storefront designed to feel native on both desktop and mobile. ProductHero dominates the top of the page with a full-width product image and a live ColourPicker — clicking a colour swatch updates the displayed image to the variant. SizeGuideModal is a shadcn/ui Dialog with a size chart table and measurement tips, opened by a link next to the size selector. AddToCartButton pairs a quantity stepper with the cart CTA and triggers the CartDrawer, a shadcn/ui Sheet slide-over that lists cart items with remove controls and a Checkout CTA. RelatedProducts is a horizontal-scroll row of other product cards below the fold.
Two honest caveats worth knowing upfront. First, the ColourPicker's selected colour state lives in local component state and resets when CartDrawer opens because opening the drawer triggers a parent re-render. The medium fix prompt lifts this state to the page level to prevent the reset. Second, the CartDrawer item count badge shows NaN on first load if the cart is initialised as undefined before the localStorage useEffect fires — the gotcha fix below initialises cart as an empty array to prevent this.
The template is rated Beginner because all the interactive patterns are straightforward: useState for colour selection, a useEffect for localStorage rehydration, and next/image for optimised photos. The only external dependency beyond shadcn/ui is next/image, which requires domain whitelisting in next.config.js for any external product CDN — the most common trip-up on the first fork.
Key UI components
ProductHeroFull-width product image with ColourPicker swatches and a live preview area
SizeGuideModalshadcn/ui Dialog with size chart table and measurement tips
ColourPickerRow of clickable colour swatches that update the ProductHero preview image
AddToCartButtonCTA button with quantity stepper that adds the product to CartDrawer
CartDrawershadcn/ui Sheet slide-over listing cart items with remove and quantity controls
RelatedProductsHorizontal scroll row of other product cards below the fold
Libraries it leans on
shadcn/ui DialogSizeGuideModal shell — wraps the size chart table and measurement tips
shadcn/ui SheetCartDrawer slide-over panel
next/imageOptimised product photography — requires external CDN domain in next.config.js remotePatterns
shadcn/ui BadgeStock label on product variants and CartDrawer item count indicator
Fork it and get it running
Forking the Hoodie Store template takes about 5 minutes. You will open the community page, test the colour and size selectors, update branding for free, then publish to a live Vercel store URL.
Open the community page and fork
Go to https://v0.dev/chat/community/ELMX6m7UodU in your browser. Click the Fork button in the top-right area of the community page. V0 copies the full Hoodie Store template into a new Project in your account. A free V0 account is all you need — no paid plan required to fork.
Tip: Sign in to V0 before navigating to the URL so the Fork button is active immediately without a redirect.
You should see: A new V0 Project opens with the Hoodie Store code loaded and the Vercel Sandbox preview starting.
Test the colour swatch, size selector, and cart flow
Wait for the Vercel Sandbox preview to load. Click each colour swatch in ColourPicker and confirm ProductHero updates the preview image. Open SizeGuideModal by clicking the size guide link to confirm the chart renders. Add a product with AddToCartButton and verify CartDrawer slides in showing the item and quantity controls. Check that the CartDrawer item count badge in the header shows a number, not NaN.
Tip: If the badge shows NaN, that is the cart initialisation issue covered in the gotchas — the fix prompt resolves it.
You should see: ColourPicker, SizeGuideModal, AddToCartButton, and CartDrawer all respond correctly and the cart badge shows the right count.
Update store branding in Design Mode
Press Option+D (Mac) or Alt+D (Windows) to open Design Mode. Click the store name in the header, the hero text in ProductHero, and the CTA button label to edit them directly on the canvas — no credits spent. Update the primary brand colour to match your product. Change the placeholder product name and tagline to your real product.
You should see: Your store name, product name, and brand colour appear in the preview without spending any prompt credits.
Replace placeholder products with your real catalogue
In the V0 chat panel, paste the first prompt from the Prompt Pack below (Replace placeholder products with my hoodie catalogue). Include your actual product names, prices, colour variants, sizes, and image URLs. If your images are hosted on an external CDN, ask V0 to also add the CDN domain to next.config.js remotePatterns in the same prompt to avoid the 400 image error.
Tip: Send colour variants with image URLs for each colour — V0 can build the colour-to-image mapping in ColourPicker from a structured list.
You should see: ProductHero, ColourPicker, and RelatedProducts all show your real product data with correct prices and colour variants.
Publish to a live Vercel store URL
Click Share in the V0 top navigation, open the Publish tab, and click 'Publish to Production'. The build and deployment take approximately 30 seconds. Once complete you get a live .vercel.app URL. Test the full colour selector → add to cart → CartDrawer → checkout flow on a real device to confirm all interactions work outside the sandbox.
You should see: Your Hoodie Store is live on a Vercel subdomain with real product images loading and the full add-to-cart flow working.
Add your custom domain
Log in to the Vercel Dashboard at vercel.com/dashboard and open your hoodie store project. Navigate to Settings → Domains → Add Domain. Enter your store domain. Vercel provides the DNS records — typically a CNAME pointing to cname.vercel-dns.com. Update them at your domain registrar. SSL is provisioned automatically once DNS propagates.
You should see: Your Hoodie Store loads on your custom domain with HTTPS active and all product images loading through the next/image optimisation proxy.
The prompt pack
Copy-paste these straight into v0's chat to customize the Hoodie Storetemplate. Each one names this template's own components — no generic filler.
Replace placeholder products with my hoodie catalogue
Replaces every placeholder in ProductHero, ColourPicker, and RelatedProducts with your real product catalogue and fixes the next/image domain whitelist in one pass.
In the hoodie store template, replace all sample product data with my real catalogue. Products: [list name, price, available colour variants, sizes, and image URL per colour]. Update ProductHero, ColourPicker swatches, and RelatedProducts to use this data. Keep AddToCartButton wired to the cart state and CartDrawer totals. If any product image URLs come from an external domain, also add that domain to next.config.js remotePatterns so next/image can load them.
Add size recommendation quiz
Adds a two-question fit quiz that recommends a size and pre-selects it in the hoodie store size selector — no backend required.
Add a 'Find my size' link next to the SizeGuideModal trigger in the hoodie store. It should open a secondary shadcn/ui Dialog that asks two questions: 'How tall are you?' (dropdown: Under 5'5" / 5'5"–5'10" / 5'10"+) and 'How do you prefer your fit?' (radio: Slim / Regular / Relaxed). Based on the answers, recommend a size (S / M / L / XL) with a brief explanation. Close the quiz dialog and pre-select the recommended size in the size selector. No backend needed — pure client-side logic.
Add sticky header with cart item count badge
Adds a sticky branded header with a live cart badge that opens CartDrawer and reflects the item count from shared cart state.
Add a sticky top navigation bar to the hoodie store that displays the store logo on the left and a shopping cart icon on the right. The icon should show a shadcn/ui Badge with the current cart item count sourced from CartDrawer state. The header should be sticky (top-0 z-50) and use a subtle backdrop-blur-sm effect. Clicking the cart icon should open CartDrawer. The badge should show 0 when the cart is empty and disappear when there are no items.
Add colour-based image switching with smooth transition
Adds animated image switching to ProductHero ColourPicker with a cross-fade transition and fixes colour state persistence when CartDrawer opens.
In the hoodie store ProductHero, make each ColourPicker swatch update the displayed product image to the colour-specific variant when selected. Use a cross-fade CSS transition (opacity: 0 to opacity: 1 with a 200ms ease timing) between images so the swap feels smooth rather than instantaneous. Store the colour-to-image URL mapping as a typed Record<string, string> object in the component. Use next/image for every variant image and lift the selected colour state to the page level so ColourPicker selection persists when CartDrawer opens.
Wire CartDrawer to Stripe Checkout
Adds a full Stripe Checkout flow from CartDrawer to payment completion, including a success page and webhook handler for order confirmation.
Add a Checkout button to the hoodie store CartDrawer. When clicked, call a Next.js Server Action that iterates the cart items array and calls stripe.checkout.sessions.create() using STRIPE_SECRET_KEY with line_items for each product (name, unit_amount in cents, quantity). Set mode: 'payment', success_url to your store URL + '/success', and cancel_url back to the store page. Redirect the buyer to the Stripe Checkout URL returned by the session. Add a /success route that shows OrderConfirmation with the Stripe session_id from the query param. Add a webhook handler at /api/webhooks/stripe/route.ts using await request.text() for raw body signature verification with STRIPE_WEBHOOK_SECRET.
Add Supabase inventory check before checkout
Adds a Supabase stock validation step in the CartDrawer checkout flow that blocks Stripe Checkout if any item is out of stock.
Before creating the Stripe Checkout Session in the hoodie store, query a Supabase products table (id uuid, name text, colour text, size text, stock integer) to verify each CartDrawer item has sufficient stock. Use the Supabase server client initialised with SUPABASE_SERVICE_ROLE_KEY (server-only, no NEXT_PUBLIC_ prefix) in the Server Action. If any item is out of stock or has stock below the requested quantity, return an error object to the CartDrawer client component and highlight the out-of-stock items with a red shadcn/ui Badge. Only call stripe.checkout.sessions.create() if all items pass the stock check.
Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
Error: Failed to load resource: the server responded with a status of 400 for next/image on VercelWhy: Product image URLs are from an external CDN domain not listed in next.config.js remotePatterns. Vercel's next/image optimisation proxy rejects requests from unlisted domains with a 400 error.
Fix: Add the image CDN hostname to the images.remotePatterns array in next.config.js: { protocol: 'https', hostname: 'your-image-cdn.com' }.
Update next.config.js in the hoodie store to add my product image CDN domain to images.remotePatterns so next/image can load product photos from [your-domain]. Use the remotePatterns array format with protocol 'https' and the exact hostname.
ColourPicker selected state resets when CartDrawer opensWhy: Opening CartDrawer triggers a parent component re-render. The selected colour state stored in ColourPicker's local useState resets to the default colour because the component effectively unmounts and remounts.
Fix: Lift the selected colour state up to the page-level component so it is not owned by ColourPicker and is not destroyed when CartDrawer triggers a re-render.
Lift the ColourPicker selected colour state in the hoodie store up to the page component and pass it down as a prop to ColourPicker so the selection persists when CartDrawer opens and closes.
SizeGuideModal content is cut off on mobile screensWhy: The shadcn/ui Dialog default max-width is set for desktop viewports. On narrow mobile screens, the size chart table inside SizeGuideModal overflows the dialog width and the content is cropped or unscrollable.
Fix: Add overflow-x-auto to the table container inside SizeGuideModal and set the Dialog content width to w-[95vw] sm:max-w-lg to give the table horizontal scroll room on mobile.
Fix the SizeGuideModal in the hoodie store to be mobile-friendly: add overflow-x-auto to the size chart table container and set the shadcn/ui Dialog content width to w-[95vw] sm:max-w-lg.
CartDrawer item count badge shows NaN after page refreshWhy: The cart is initialised as undefined before the localStorage rehydration useEffect fires. When CartDrawer renders the badge, it calls cart.length on an undefined value, returning NaN instead of 0.
Fix: Initialise cart state as an empty array [], not undefined. The badge will then show 0 before localStorage rehydration completes instead of NaN.
Fix the hoodie store cart state initialisation to use useState<CartItem[]>([]) instead of undefined so the CartDrawer badge shows 0 instead of NaN before localStorage has rehydrated the cart on page load.
Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- Print-on-demand seller who wants to launch a branded store in a day and hand off payments to Stripe
- Designer testing product-market fit with a real buy flow before committing to a Shopify subscription
- Developer who needs a polished e-commerce UI scaffold with colour/size selection already built
- Pop-up brand or limited-run product drop that needs a fast, clean storefront without ongoing SaaS fees
Go custom when
- You sell 50+ SKUs and need inventory management, variant matrix, or bulk pricing
- You need abandoned cart emails, loyalty points, or upsell logic between products
- Multi-currency pricing, international shipping rates, or duty calculation are required
- You need a seller dashboard, fulfilment workflow integration, or return management
If you need the hoodie store connected to a real inventory system, Stripe, and a custom domain with production ISR, RapidDev handles the full build — see rapidevelopers.com.
Frequently asked questions
Is the Hoodie Store v0 template free to use?
Yes. V0 community templates are free to fork with any V0 account, including the free tier. You can fork, preview, and customise the template without spending paid credits until you start prompting V0 for code changes.
Can I use this template commercially — for example, as a real online store?
Yes. V0 community templates are MIT-licensed. You can use the code commercially, sell products through the store, build it for clients, and modify it freely without attribution or royalty requirements.
Why does my fork show broken product images in the preview?
External product image URLs need to be whitelisted in next.config.js remotePatterns for next/image to load them. The Vercel image proxy returns a 400 error for any unlisted hostname. Add your CDN domain to remotePatterns — the quick prompt does this automatically alongside the catalogue swap.
How do I connect real payments to the CartDrawer?
Use the advanced 'Wire CartDrawer to Stripe Checkout' prompt from the Prompt Pack. It adds a Checkout button to CartDrawer that calls a Server Action, creates a Stripe Checkout Session with your cart line items using STRIPE_SECRET_KEY, and redirects buyers to Stripe's hosted payment page.
Why does the ColourPicker reset when I open CartDrawer?
The selected colour state lives in ColourPicker's local useState. Opening CartDrawer triggers a parent re-render that resets it to the default colour. Lift the colour state to the page level — the medium fix prompt handles this and also adds the colour-based image cross-fade transition.
Why does my fork break in the preview after forking?
The most common causes are the NaN badge (cart initialised as undefined — initialise as an empty array instead) and the next/image domain error (add your CDN to remotePatterns). Check the browser console in the preview panel for the specific error string and match it to the gotchas above.
Can RapidDev build a production store from this template?
Yes. RapidDev connects Hoodie Store prototypes to real Stripe, Supabase inventory, and production ISR — including custom domain setup and performance optimisation. See rapidevelopers.com for details.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.