What is delivered by default?

One self-contained store HTML file with pages, fonts and chosen assets embedded for offline opening. The source template needs the provided build step to embed its separate files. In an existing or requested Vue, Astro, Next.js or other supported framework, the design is ported into native components and real routes.

Do I need to generate a new image set?

Use your own catalogue and premises photographs or generate suitable new ones with the agent’s image tool, which may charge for usage. The 14 product cut-outs, shop image and sample raincoat banner depict the fictional store and need replacement. Retriever, cat, comfort and the three topical guide scenes can remain neutral art; real staff, shop pets and premises need their own photographs or disclosed stand-ins.

Can it match my market and products?

Yes. Configure currency, locale, tax handling, postcode validation, pickup and delivery terms, and replace products/categories/guides/reviews with your facts. Update the visible checkout fields and policy text alongside the settings. The example does not supply real tax calculation, inventory, fulfilment or subscription services; those require separate integrations and verification.

Royal Blue Pet Store

Previews from the publisher

Build a coherent pet-shopping journey from discovery to a clearly labeled demo order. Royal Blue Pet Store frames white pages in royal blue, combining serif headings, animal portraits, seasonal stories and a consistent product catalogue. Filters, variants, a bag and refill planning make the front end explorable; stock, payment and fulfilment services are separate work.

What you get

A royal-blue framed storefront with Newsreader headings, Instrument Sans text, a split retriever-portrait hero, category tiles, seasonal and comfort banners, cat edit, favourites, refill planner, care guide, shop visit and customer reviews. The fictional example spans 39 routes and 22 images; its content is a worked mapping rather than your actual catalogue.
Shop/category views with category, pet, price and refill-ready filters, live counts, search, sort, removable filter chips and an empty state. Product pages show variants with changing prices and sold-out options, quantities, wishlist controls, specification/size/care content, related products and gallery views. The sample’s detail gallery can zoom the same cut-out, so it is not an additional photograph.
A mini-cart with quantities/subtotal/free-delivery progress and a full bag with promo codes and save-for-later. Demo checkout validates customer/address fields and updates totals for delivery methods; its confirmation includes local order lines, amounts and an explicit no-charge notice. Nothing here reserves stock, processes payment or sends an order to fulfilment.
A refill planner with item and cadence choices, next-three-delivery preview, per-delivery price and estimated annual saving, adding a refill-marked bag line. A sleeping-position bed finder, saved-items page, article guides, FAQ and review carousel support product discovery. The planner is not a connected recurring-subscription service.
About, delivery/returns, contact, privacy, terms and designed404 pages, with newsletter/contact validation and local feedback. Policy text, opening hours, reviews and claims such as veterinary review must reflect actual facts.
One offline HTML deliverable with fonts and selected images embedded by default. The package supplies the source, visual/page/route/image/motion/framework guides, builder and static validator. An existing or requested framework project receives native components, content collections and real routes.

Before you choose

Judge the storefront by one complete product journey and its arithmetic, not its route count. Keep variant, discount, delivery and refill terms consistent across detail, bag and checkout. Distinguish local order previews from payment, actual stock and recurring commitments before inviting customers to use it.

Good fit

Independent pet shops and brands needing a calm product-led storefront prototype with a complete buying journey.
Grooming salons or veterinary clinics that also sell products and can adapt refills to their actual plans.
Pet-food brands explaining recurring replenishment, provided the real subscription service is connected separately.

Not for

Real payments, inventory control or order fulfilment out of the box; demo checkout never charges a customer.
A dark, heavily illustrated or deliberately loud identity; the royal frame, photography and blue serif system define the treatment.
Presenting the fictional shop’s products, catalogue photographs, premises or customer reviews as your own.

How to use

You say

/royal-blue-pet-store Build an online store for Dunmere Pet Supply, a neighbourhood shop selling everyday essentials for dogs and cats.

Provide the shop name, market, product/category catalogue, variant prices/sizes and availability, delivery/pickup terms, opening hours and contact details. Add accurate care content, reviews and policies where available. Missing facts may be drafted as labeled placeholders to confirm; remove unsubstantiated endorsements, sourcing or safety claims.
Prepare a consistent catalogue shoot or supply your own product photographs. The guide uses white-background cut-outs with matching light/object scale, staged on mist-colored panels. Optional new generation uses the agent’s image tool and may cost credits. All 14 sample product cut-outs, the shop photo and raincoat banner need replacement; retriever/cat/comfort scenes and three topical care-guide images can serve as neutral art.
Set currency/locale, tax mode, postcode rule, pickup location and delivery cut-off for the target market, then update visible labels and policy copy as well as the calculation settings. Match category/product/article/refill/recommendation references when IDs change. Do not assume a sample postal or tax rule is a complete market integration.
Populate meaningful product detail and category pages. Check every variant’s price and sold-out state, sizes, quantities, image pairing and related guide. Keep the refill planner only for eligible products and actual cadence/discount offers; verify its displayed dates and annual-saving estimate. Sleeping-position recommendations are configured merchandising choices, not veterinary advice.
With no existing project, use Node.js 18 or newer and build-time internet to embed the three font files and local images into one HTML file. The completed file opens offline. In an existing or requested framework, preserve its stack and port the same pages/state natively; the guide maps React controls to ReUI and provides separate adaptation guidance.
Run static checks, then inspect desktop/tablet/phone layouts and every route family. Walk filters/search/sort/empty state, variant/quantity/add/save, mini-cart, promo, delivery/tax totals, refill plan and demo checkout through confirmation. Test menu/drawer keyboard behavior, review carousel, FAQ and invalid/valid forms. Connect and verify payment, stock, order, recurring billing and actual mail services before operational launch.

Requirements and costs

You bring: Shop name, products with prices and sizes, and categories · Delivery terms, opening hours, contact details and your market · Your own product photos, or approval to generate a new catalogue
Dependencies: Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent, or your own photos, for product cut-outs and shop images
Outside costs: New product cut-outs and shop photos are generated with your agent's own image tool, which may charge for usage. Without one, supply your own photos; the retriever, cat and comfort images can stay. Viewing the example costs nothing, and the checkout never charges.
Publisher testing: v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT