E-Commerce

Build a Handmade & Craft Store with AI

Create an artisan-style online store with a masonry grid layout, collection-based browsing, product detail modals, a "Meet the Maker" story section, and Instagram-style photography presentation. The agent manages inventory, adds new pieces, updates collections, and redeploys to keep the store fresh.

Build Prompt

Copy this prompt into Claude Code
Build a handmade and craft store as a static HTML/CSS/JS site. Use a warm dark theme with background #0a0a0f, surfaces #12121a, borders #2a2a2a, and accent color #d97706 (warm amber). Load data from inline `const PRODUCTS = [...]` and `const COLLECTIONS = [...]`. Each product has: id, name, price, collection (string matching a collection id), description, images (array of emoji or placeholder descriptions), materials (string, e.g., "Hand-thrown stoneware clay"), dimensions (optional), madeToOrder (boolean), stock (number, 0 means sold out), featured (boolean), badge (optional: "One of a Kind", "Best Seller", "New"). Each collection has: id, name, description, featured (boolean), image (emoji). Layout: Hero section with store name in an elegant font style, tagline ("Handcrafted with love — each piece tells a story"), and a "Shop Collections" CTA. "Meet the Maker" section: a full-width card with maker's story (2-3 paragraphs about the artisan, their craft, process, and philosophy), a photo placeholder, and social links. Collections bar: horizontal scrollable cards showing collection name, icon, and item count. Clicking a collection filters the product grid. Product grid in a masonry-style layout (CSS columns or grid with varied heights). Each product card shows: image area, badge overlay, product name, price, collection tag, and a "Made to Order" badge if applicable. If stock is 0, show "Sold" overlay. Clicking a product opens a modal with: large image gallery, full description, materials, dimensions, price, stock status, and a "Buy" button (linking to payment URL or WhatsApp inquiry). Include "Featured Pieces" section at the top highlighting 3-4 products with `featured: true` in larger cards. Add a "Custom Orders" section explaining how customers can request custom pieces with a mailto or WhatsApp link. Footer with social media links (Instagram, Etsy), newsletter signup, and shipping info. Add SEO: JSON-LD Product schema per featured product, Organization schema for the maker. Meta targeting "handmade [product type]", "artisan [product type]". Seed with 12 products across 3 collections (Ceramics, Textiles, Jewelry) with realistic craft-style names and prices ($25-$180). Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].

Make It Yours

Process Gallery

Add a "How It's Made" photo gallery showing the creation process from raw materials to finished piece.

Gift Wrapping

Offer gift wrapping as an add-on option with a custom message card.

Seasonal Collections

Add time-limited seasonal collections (Holiday, Spring, Summer) with auto-hide dates.

Size Guide

Add a visual size comparison chart showing products next to common objects for scale.

Workshop Signup

Promote in-person or virtual craft workshops with date, price, and registration link.

Update Prompt

Update Prompt — Manage products and collections
Update my handmade craft store: [describe changes — e.g., "Mark 'Ocean Wave Mug' as sold", "Add new product: Name, $Price, Collection, Description, Materials", "Add a new collection: 'Holiday Specials' with description", "Update the Meet the Maker story with new paragraph about recent exhibition", "Feature 'Woven Wall Hanging' — set featured to true"]. Update the PRODUCTS and COLLECTIONS data. Redeploy.

SEO Tips

Monetization Ideas

Related Ideas

Ready to build your Handmade Craft Store?

Copy the prompt above and paste it into Claude Code. Your store will be live in minutes.

Get Started