Vibe Code a WooCommerce Fashion Store
Free vibe coding prompt to build a WooCommerce fashion boutique. Editorial homepage, product filters, slide-out cart, lookbook, and Product schema. Full WordPress architecture.
Plan and produce a complete WordPress + WooCommerce site architecture for
an independent fashion boutique, including data model, theme.json,
templates, plugin stack, and conversion engine. Output should be
production-ready and copy-paste-able.
═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Brand name: [BRAND NAME]
- Category: women's / men's / unisex [CATEGORY: e.g., loungewear /
streetwear / occasion-wear]
- Price tier: [contemporary / premium]
- Brand story: founded [YEAR] in [CITY], produces in [COUNTRY],
emphasis on [SUSTAINABILITY / CRAFT / SMALL-BATCH]
- Inventory size: ~30-150 SKUs
- Markets shipped to: [REGIONS]
- Goals: increase ATV, build email list, drive repeat purchases
═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: editorial off-white (#f8f4ee) + deep ink (#0e0e0e) + ONE
brand accent (rust / oxblood / sage, let user pick). Override if user
provides palette; derive variants for AA contrast.
- Type stack: high-contrast display serif (PP Editorial New alternative -
Fraunces, Cormorant Garamond) for headings + clean sans (Inter Tight)
for body + small monospace for SKUs/sizes.
═══════════════════════════════════════════════════════════════
WORDPRESS + WOOCOMMERCE STACK
═══════════════════════════════════════════════════════════════
- Theme: Blocksy (WooCommerce-optimized block theme) OR custom child of
Storefront. Recommend ONE and justify.
- Required plugins (WP-CLI):
wp plugin install --activate
woocommerce
woocommerce-gateway-stripe
cartflows-cart
mailchimp-for-woocommerce
wp-rocket
shortpixel-image-optimiser
wordpress-seo
advanced-custom-fields
Optional:
- WooCommerce Subscriptions (if brand offers a capsule subscription)
- YITH Wishlist for WooCommerce
- Klaviyo for WooCommerce (replaces Mailchimp if brand prefers Klaviyo)
- Payment: Stripe (Apple/Google Pay), PayPal, ShopPay (if available)
═══════════════════════════════════════════════════════════════
PRODUCT MODEL
═══════════════════════════════════════════════════════════════
- Product types: simple + variable + grouped (capsule sets)
- Attributes: size, color, material, season, fit (slim/relaxed/oversized),
care (machine-wash/dry-clean)
- ACF on product: fit_notes (textarea), pairs_with (relationship to
products), model_height (text), model_size (text), made_in (text),
sustainability_badges (checkbox list), lookbook_images (gallery)
- Categories: hierarchical (Women > Tops > T-Shirts etc.)
- Tags: trend tags ("vacation", "everyday", "occasion")
- Cross-sells: "Pair it with", manually curated, 3 items per product
- Upsells: "Style it up", paired pricier item
═══════════════════════════════════════════════════════════════
SITE MAP
═══════════════════════════════════════════════════════════════
1. Home (editorial)
2. Shop (with filter rail) + category subpages
3. Lookbook (editorial pages per drop/season)
4. Editorial / Journal (blog with style-focused posts)
5. About (brand story)
6. Our Process / Sustainability
7. FAQ
8. Returns & Shipping
9. Contact
10. Account (dashboard)
11. Cart (slide-out drawer)
12. Checkout (single-page CartFlows)
13. Wishlist
14. Order Tracking (WooCommerce default)
15. Size Guide (modal accessible from any product page)
═══════════════════════════════════════════════════════════════
THEME.JSON
═══════════════════════════════════════════════════════════════
Output complete theme.json with:
- color palette (off-white surface, ink text, ONE brand accent)
- 4-step type scale (display + h2 + h3 + body); h1 uses ratio 1.333
- spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96, 128)
- block defaults: button (large pill in ink, hover to brand accent),
paragraph line-height 1.6, heading line-height 1.15
- registered patterns for: editorial hero, lookbook tile, product card,
newsletter signup, sustainability badge grid, drop announcement bar
═══════════════════════════════════════════════════════════════
HOME PAGE, BLOCK MARKUP
═══════════════════════════════════════════════════════════════
1. Sticky nav: logo (lowercase serif wordmark) | nav (Shop / Lookbook /
Journal / About) | account icon + wishlist count + cart icon (opens
drawer)
2. Hero: full-bleed editorial photo (shoppable, hotspots over models),
eyebrow with line marker, large two-line headline ("Designed for
*every season after this one*"), single CTA "Shop the new drop"
3. Shop by Category: 4 large cards (image fills card, name overlay
bottom-left in serif italic)
4. Featured Drop: title row "DROP 04, [NAME]" + 8-product grid (image,
name, price; on hover reveal alt color swatches)
5. Editorial pull-quote: long quote in display serif italic, attribution
small uppercase
6. Our Story: two-column with workshop photo + 2-paragraph brand origin
7. Editorial Journal: 3 article cards with hero photo, category tag,
title (serif), 1-line excerpt
8. Email capture band: "Sign up for 10% off your first order" with
inline form
9. Sustainability badge row: 4 typeset claims (organic cotton certified,
GOTS, fair-trade, locally produced), NOT real certification logos
10. Instagram feed: 8-image grid pulling from a Smash Balloon-style plugin
11. Footer: 4 columns (shop, help, brand, social) + payment-method icons
(typeset names, not logos) + copyright
═══════════════════════════════════════════════════════════════
PRODUCT DETAIL PAGE
═══════════════════════════════════════════════════════════════
- Image gallery with zoom and 1-2 lifestyle/lookbook shots
- Variant swatches (color = color chips, size = pill buttons with
out-of-stock crossed out)
- Title (serif), price, "Pair with" mini-grid (3 cross-sells)
- Fit notes (custom ACF) in collapsed accordion
- Size guide modal (full-screen on mobile, inline measurement chart)
- Made-in row + sustainability typeset badges
- "Style it up" upsell card below add-to-cart
- Reviews with photo uploads, use Woo built-in OR a plugin like
Photo Reviews for WooCommerce
- Sticky add-to-cart bar on mobile
═══════════════════════════════════════════════════════════════
CART + CHECKOUT
═══════════════════════════════════════════════════════════════
- Slide-out side cart (drawer) instead of full cart page
- Free shipping progress bar ("$22 away from free shipping")
- "Add gift wrap" upsell at checkout
- Single-page CartFlows checkout (or stock Woo block checkout)
- Express checkout: Apple Pay, Google Pay, ShopPay
- Order bump (small add-on item, e.g., care kit, before final submit)
- Post-purchase upsell page (one-click add to order)
═══════════════════════════════════════════════════════════════
EMAIL & RETENTION (Klaviyo or Mailchimp flows)
═══════════════════════════════════════════════════════════════
- Welcome series (3 emails over 7 days)
- Abandoned cart (3-email sequence: 1h / 24h / 72h)
- Browse abandonment (1 email after 24h)
- Post-purchase: order confirmation → shipping → "How's the fit?"
(D+14) → review request (D+21)
- Back in stock + low stock alerts
- Win-back at D+60 inactive
- Birthday: 15% off on the customer's birthday month
═══════════════════════════════════════════════════════════════
SEO & SCHEMA
═══════════════════════════════════════════════════════════════
- Yoast WooCommerce SEO + RankMath OR stock Yoast Premium
- Schema: Product, AggregateRating, Review, Organization, BreadcrumbList
- Open Graph + Twitter cards per product
- XML sitemap split by post type
- Product feed for Google Merchant + Pinterest + Meta Catalog (use
Pinterest for WooCommerce + Facebook for WooCommerce)
ADDITIONAL SEO REQUIREMENTS (implement all of these):
On-Page SEO for Every Page:
- Yoast/RankMath meta title template: "[Page Title] | [Site Name]" (under 60 chars)
- Meta description per page: 150-160 chars, include primary keyword + CTA
- Exactly ONE H1 per page — use the real, human headline; keep keywords in the title and meta, not the visible H1
- Logical H2 > H3 heading hierarchy, never skip a level
- Headings should include secondary keywords naturally,
keep the section's real, human label (keywords in title and meta, not stuffed headings)
- Every image must have a descriptive alt attribute with keywords
- Internal links between related content using descriptive anchor text
Structured Data (JSON-LD via Yoast/RankMath + manual where needed):
- Primary schema types: Product, Organization, AggregateRating
- BreadcrumbList on all pages
- FAQPage schema on any page with an FAQ/accordion section
- Article schema on all blog posts (auto via Yoast)
- Validate schema with Google Rich Results Test before launch
Open Graph & Social Sharing:
- og:title, og:description, og:image, og:url on every page
- twitter:card=summary_large_image on every page
- Default OG image set in Yoast; per-page overrides for key landing pages
- OG images should be 1200x630px, branded, with clear text
Content SEO:
- Write real, useful body copy for every page (not just headings and CTAs).
Every major section needs at least 2-3 sentences of descriptive text
that search engines can index.
- Blog content strategy: 10 seed articles targeting long-tail keywords
related to "fashion boutique". List the titles and target keywords.
- Use the primary keyword once or twice where it reads naturally; keep the rest in titles and meta, never stuffed.
- Every CTA should use descriptive anchor text with the service keyword.
Technical SEO:
- XML sitemap split by post type (auto via Yoast)
- Canonical tags on all pages (auto via Yoast)
- robots.txt: allow all, point to sitemap
- 301 redirects plan for any renamed/moved content
- Breadcrumbs enabled via Yoast + schema
- Clean permalinks: pick one post-permalink base that fits the site (do not force /blog/ on a post-centric site); /%postname%/ is fine for pages
- Lazy load all images below the fold, eager load hero/LCP image
- Core Web Vitals targets: LCP < 2.5s, CLS < 0.1, INP < 200ms
SECURITY, ACCESSIBILITY & HONESTY (required):
- Escape all output (esc_html/esc_url/esc_attr), sanitize all input (sanitize_text_field + wp_unslash), and use a nonce + current_user_can() on every form handler and custom action. Emit JSON-LD with wp_json_encode().
- Target WCAG 2.2 AA: visible :focus-visible states, <label for> on every field, full keyboard operability, and @media (prefers-reduced-motion: reduce) around all motion.
- Never fabricate business data, testimonials, ratings, credentials, or stats; leave labeled {{TODO}} placeholders for anything the user has not supplied.
- PLUGIN INSTALL: some listed plugins are premium or not in the wordpress.org directory, so a single `wp plugin install` will error out. Split the list into free (wp.org) vs premium (upload/license), verify each slug, and note that gallery/group ACF fields and ACF Blocks need ACF Pro.
- Commit to ONE paradigm: a block theme (theme.json + block templates) OR a classic theme/builder — never mix them. If a plugin already owns a post type or feed (inventory, sermons, courses, job listings, podcast feeds), extend it — do not re-declare that CPT or emit a second, conflicting schema block.
═══════════════════════════════════════════════════════════════
PERFORMANCE
═══════════════════════════════════════════════════════════════
- Hero LCP under 2s
- WP Rocket: page cache + critical CSS + image lazy loading + delay JS
- ShortPixel WebP + adaptive images at 3 sizes per upload
- CDN: Cloudflare or BunnyCDN
- Object cache (Redis), required
- Defer non-critical scripts (Klaviyo, GA4, delay JS via WP Rocket)
- Mobile-first audit: cart drawer must open under 100ms
═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis in product names or descriptions
- No "Hurry! Limited stock!" countdown timers unless real
- No popups within 5s of landing
- No animated "SALE!" ribbons across products that aren't on sale
- No fake reviews, only real or none
- No stock photos that look like obvious models on white backgrounds -
use real product on body shots
- No "magical fabric" / "transform your wardrobe" filler
- No script fonts (no Allura, no Pacifico)
- No real certification logos (GOTS, OEKO-TEX) unless brand actually has
the cert, typeset names otherwise
═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
Produce, in order:
1. Sitemap tree
2. WP-CLI install + activate commands (single block)
3. WooCommerce settings to configure (tax/shipping zones, payment, emails)
4. theme.json (complete)
5. ACF JSON for product field group
6. Product attributes + categories setup
7. Block markup for the homepage
8. Block markup for the product detail template
9. Cart drawer + checkout configuration
10. Klaviyo flow specs (or Mailchimp automation maps)
11. Launch checklist (in execution order, ~20 items)
This prompt gives ChatGPT or Claude a full WooCommerce build plan for a fashion boutique — the kind of store that sells apparel in multiple sizes and colors and lives or dies on how the product photos and the cart feel. It specifies variation swatches, an editorial homepage, filterable collection pages, a size guide, a slide-out cart, and a wishlist as Gutenberg and WooCommerce block markup. You get a plan for a store that looks like a brand, not a default WooCommerce theme.
What does the fashion boutique store prompt build?
The plan covers an editorial homepage with lookbook imagery, collection archives with AJAX filters for size, color, and price, and product pages with variation swatches, a size guide, and a fit description. It specifies a slide-out mini cart, a wishlist, an email capture offering a first-order discount, and a Google Merchant product feed for Shopping ads. Product, Offer, and Store structured data, plus review markup, are built in so each item can show price, availability, and rating in search. If you would rather not assemble it yourself, our WooCommerce store build delivers the same setup for a flat fee.
Who is this fashion boutique prompt for?
It is written for independent clothing labels, boutique owners moving off Etsy or Instagram, small apparel brands with a few dozen SKUs, and makers who want full control of their storefront instead of a marketplace cut. It assumes real products with variants, not a single-item shop.
What’s inside the prompt?
- A business details block for your brand voice, palette, product categories, and shipping regions
- A WooCommerce plugin stack: variation swatches, AJAX product filters, a wishlist, and image optimization
- A product data model with attributes for size, color, material, and fit, plus collection taxonomies
- Gutenberg and WooCommerce block markup for the editorial homepage, collection pages, and product detail layout
- A slide-out cart, a size guide template, and an email capture with a first-order discount
- Product, Offer, and Store structured data, a Google Merchant feed, and a keyword plan around your categories
- Core Web Vitals targets for image-heavy pages and a pre-launch checklist
Frequently asked questions
Does the store handle size and color variations with swatches?
Yes. The product data model uses WooCommerce variable products with attributes for size, color, material, and fit, and the product page spec renders color and size as clickable swatches rather than dropdowns. Each variation can carry its own image, price, and stock count.
Can shoppers filter a collection by size, color, and price?
The collection archive spec includes AJAX filters for size, color, price range, and category that update the grid without reloading the page. This is the single biggest difference between a boutique that converts and a default WooCommerce catalog, so it is specified in detail.
Does it include a size guide and fit information?
Yes. There is a reusable size guide template with a measurements table, plus a fit description field on each product so you can note whether an item runs small or is true to size. Returns in apparel are usually a sizing problem, and the spec treats it as one.
Will my products show price and availability in Google?
The SEO section adds Product and Offer structured data on every item, Store data for the brand, and a Google Merchant product feed. Together those let price, stock status, and star ratings appear in organic results and Shopping — the markup that turns a listing into a click.
Which AI tool should I use, and what if I would rather hire it out?
ChatGPT and Claude both return the full WooCommerce spec; paste the whole prompt in one message. If the DIY route feels like too much for a store you need selling this month, what a WordPress build costs and the rest of our free AI website prompts can help you decide where to draw the line.
How to actually run this.
Copy the whole thing
All of it. Do not trim it down, every line is in there for a reason.
Swap in your details
Find the BUSINESS DETAILS part and drop in the real business. Name, what they do, all of it.
Paste and wait
Drop it into Claude for the first pass, or v0 if it is a landing page. Give it a minute.
Clean it up
Tweak the boring 10 percent. Spacing, mobile, that one cringe line. Ship it.
What’s next: from generated code to a website that works
The prompt did the hard 90 percent. What’s left is the boring 10 percent that turns a folder of code into a site people can actually find and trust. Here’s the whole checklist, in order.
1. Buy a domain
Grab your name at a registrar like Namecheap, Cloudflare, or Porkbun — about $10 to $15 a year for a .com. Skip the ten-year prepay and the upsells; you just need the domain and, ideally, the free WHOIS privacy most registrars now include.
2. Put it online
If the AI built you a static site (HTML, CSS, and JavaScript), you can host it for free: drag the folder into Netlify or Vercel, or connect a GitHub repo, then point your domain at it. If it built a WordPress theme, you need WordPress hosting — pick a managed host, install WordPress, upload the theme, and connect the domain. Either way, turn on HTTPS; it’s free and automatic on every modern host.
3. Wire up the parts AI skips
Generated sites almost always ship with a contact form that goes nowhere and a fake “success” message. Connect it to a real endpoint (Formspree, Web3Forms, or a plain mailto link) so leads actually reach you. While you’re in there: add a favicon, swap the placeholder images for your own compressed photos, and open the site on your phone to catch whatever breaks on a small screen.
4. Do the basic SEO and AI-search setup
This is what gets you found on Google and cited by ChatGPT, Perplexity, and AI Overviews. The essentials: a unique title tag and meta description on every page, one clear topic per page, an XML sitemap submitted to Google Search Console, basic structured data (Organization and FAQ schema), and an llms.txt file so AI crawlers can read you. If that reads like a foreign language, our SEO optimization service does it as a flat-fee pass, and our free SEO checklist walks the DIY route step by step.
5. Make it fast
AI builders love shipping four-megabyte images and render-blocking scripts. Compress your images, lazy-load anything below the fold, and run the page through PageSpeed Insights until Core Web Vitals turn green — speed lifts both rankings and conversions, so it’s the rare fix that pays twice. Our speed optimization service handles it if you’d rather not.
6. Get found locally, and measure it
Add analytics (GA4, or a lighter option like Plausible) so you can see what’s working instead of guessing. If you serve a local area, set up a Google Business Profile and use the exact same business name, address, and phone number everywhere — that consistency is what lands you in the map pack and in local AI answers.
7. Keep it alive
A website isn’t set-and-forget, especially on WordPress. Budget for backups, security, and updates so a routine plugin update doesn’t take the site down six months from now. Our care plans cover all of it from $290 a month, or you can do it yourself — you own all the code either way.
When it’s worth handing off
If any of these steps stall you — and hosting, DNS, and SEO stall a lot of people — that’s exactly what we’re for. We build the whole thing at a flat fee, ship it live, and hand you the code on GitHub, having read every line the AI wrote. Or take the free prompts and run with it yourself. Both outcomes are genuinely fine with us.
More from the stash.
Vibe Code an Architect Portfolio Website
Free vibe coding prompt to build an architecture portfolio. Project gallery, design philosophy, awards, inquiry form, and SEO-optimized markup. One editorial HTML file.
Vibe Code a Gym Website
Free vibe coding prompt to build a WordPress gym site with booking. Class schedule, online booking, memberships, trainer profiles, and ExerciseGym schema. Full fitness…
Vibe Code a SaaS Startup Website
Free vibe coding prompt to build a complete SaaS startup WordPress site. Feature pages, pricing, demo form, blog, changelog, and full SEO strategy with…
No free weekend? We will build it for you.
This is the exact prompt we would use. Flat fee, real deadline, code is yours.