New: shop theme for Astro and Next.js + Sanity
Parcel
The site for a small brand that makes its own products and sells them online: a pantry, a roaster, a soap or skincare maker. A shop with a page per product, a bag, the people and the place behind it, a journal and the shops that stock you, in two editions: Astro, or Next.js with a Sanity Studio. 31 pages, 29 sections and 2 presets, light and dark, WCAG 2.2 AA.
Pay once · Both editions · Lifetime updates
- 31
- pages
- 29
- sections
- 2
- presets
- 2
- editions, one license
- 0
- axe violations
- 2
- demo brands
Home, the shop, a product, the valley, the journal, stockists and help, ready for your brand.
Every page as it ships, with the invented pantry Sorrel & Salt. Switch to dark to see the other mode, and click a page to see all of it.
As considered on a phone.
Every page is checked at phone width in both modes. On a phone the hero jar is cropped shorter so the products start on the second screen, the bag stays in the header, the customer notes scroll sideways with snap, and the valley map’s place names move into a legend under it.
Two editions, one license
Static files or a Studio. Same design.
Both editions render the same pages from the same sections and presets, so you choose by who edits the site, not by how it looks. Your license includes both.
- Framework
- AstroAstro 7, static output
- Next.js + SanityNext.js 16, App Router and React Server Components
- Content
- AstroPage copy in typed data files; journal posts in Markdown
- Next.js + SanitySanity Studio with documents for products, growers, stockists, reviews, posts, the year, help, the legal pages and the copy of each page
- Products
- AstroOne typed file: kinds, sizes and prices, sold out and out of season, label colour, harvest note, record and pairings
- Next.js + SanityA product document with the same fields, ordered in the Studio
- Bag and checkout
- AstroA bag drawer kept in the browser; the checkout button sends the visitor to your checkout address, set in site.json
- Next.js + SanityThe same bag; the provider and checkout address are set in the Studio
- Demo content
- AstroIn the repository, both brands
- Next.js + SanityA seed script imports every product, person, stockist, post and image into your dataset, for either brand
- Publishing
- AstroRebuild and deploy
- Next.js + SanityPages generated ahead of time, refreshed within a minute or at once with the publish webhook
- Preview
- Astropnpm dev
- Next.js + SanityDrafts beside the form in the Studio’s Presentation tool
- Forms
- AstroContact, newsletter and wholesale post to endpoints you name in site.json; in demo mode they send nothing
- Next.js + SanityRoute Handlers that forward to your endpoint and fail closed
- JavaScript
- AstroSmall scripts: the bag, the size and plan choice, quick add, the carousel, the mobile menu and the light/dark switch
- Next.js + SanityThe same small parts as client components; every page renders on the server
- Lighthouse, mobile
- Astro100
- Next.js + Sanity97–99
- Deploys to
- AstroCloudflare Workers, Netlify, Vercel or any static host
- Next.js + SanityVercel, or Cloudflare Workers through OpenNext
- Repository
- Astrothemesdev/parcel-astro
- Next.js + Sanitythemesdev/parcel-next
| Aspect | Astro | Next.js + Sanity |
|---|---|---|
| Framework | Astro 7, static output | Next.js 16, App Router and React Server Components |
| Content | Page copy in typed data files; journal posts in Markdown | Sanity Studio with documents for products, growers, stockists, reviews, posts, the year, help, the legal pages and the copy of each page |
| Products | One typed file: kinds, sizes and prices, sold out and out of season, label colour, harvest note, record and pairings | A product document with the same fields, ordered in the Studio |
| Bag and checkout | A bag drawer kept in the browser; the checkout button sends the visitor to your checkout address, set in site.json | The same bag; the provider and checkout address are set in the Studio |
| Demo content | In the repository, both brands | A seed script imports every product, person, stockist, post and image into your dataset, for either brand |
| Publishing | Rebuild and deploy | Pages generated ahead of time, refreshed within a minute or at once with the publish webhook |
| Preview | pnpm dev | Drafts beside the form in the Studio’s Presentation tool |
| Forms | Contact, newsletter and wholesale post to endpoints you name in site.json; in demo mode they send nothing | Route Handlers that forward to your endpoint and fail closed |
| JavaScript | Small scripts: the bag, the size and plan choice, quick add, the carousel, the mobile menu and the light/dark switch | The same small parts as client components; every page renders on the server |
| Lighthouse, mobile | 100 | 97–99 |
| Deploys to | Cloudflare Workers, Netlify, Vercel or any static host | Vercel, or Cloudflare Workers through OpenNext |
| Repository | themesdev/parcel-astro | themesdev/parcel-next |
What's inside
31 pages from 29 sections.
Each page is a short list of sections: the hero, the larder grid, the buy box, the valley map, customer notes, posts, stockists, questions and the rest. The products, with their sizes, prices, label colours and harvest notes, live in one place, so a new price shows on the grid, the product page, the bag and in the structured data at once.
- Home
- A photographed honey jar on the first screen, the larder grid with every product on its own tinted ground and the newest harvest at feature size, one product up close with its sizes and add to bag, the valley map with the growers, notes from customers, the journal and a newsletter band.
- Shop and kinds
- Every product, with filter tabs that are links to a page per kind and the shipping terms in one strip. Five kinds in the demo; the tea page shows how a kind looks when it is out of season.
- Product
- The buy box in the product’s colour: sizes with sold out, one-off or every two months, the price per size and per 100 ml, add to bag. Then how it tastes, how to use it and what is in it, the harvest record as a dated timeline, and three products that go with it. Nine in the demo.
- Our valley
- Where the products come from: a drawn map with the growers’ places, the story, the growers with their portraits, and the year as a strip of months with what is harvested when.
- Journal
- Posts with a photo cover, the author’s portrait and a harvest note with the date and place of the story; one is a recipe with ingredients and steps. Every post as Markdown. Six in the demo.
- Stockists
- The shops that carry the products, grouped by city, each with a drawn street map, opening hours, the products it stocks and when the last delivery came. A wholesale form for new stockists.
- Help and contact
- Questions on shipping, returns, subscriptions, allergens and storage; a contact form with an optional order number beside the address and the hours.
- Privacy, terms, thank-you and 404
- Sample legal texts for the demo brand, marked as samples until you replace them, and the pages forms and lost visitors land on. The 404 offers three products.
Two looks, one line apart.
Everything a section draws comes from the preset’s tokens: colours, type, space and corners, the label colours of the products included. Balm also swaps the demo catalogue, so you can see the same pages selling skincare instead of food. Contrast is checked in every mode.
Checked, not promised
Accessible and fast, page by page.
These checks ran on every page of both editions, in light and dark, at desktop and phone widths.
- WCAG 2.2 AA
- Zero axe violations on all 31 pages, in light and dark, at desktop and phone widths, in both editions, and on the Balm home page.
- Fast on a phone
- Lighthouse performance on mobile: 100 for the Astro edition, 97–99 for Next.js, on the home page, a product and the shop. Every photo has a fixed ratio and a file per width, so a phone loads the narrow one.
- Checked at 17 widths
- Every page measured from 320 to 5120 pixels in both modes, and looked over by a reviewer at every width: no sideways scrolling, no clipped text, no orphaned tiles.
- Honest stock
- A sold-out size is marked and can’t be chosen; a product out of season says so in place of the buy box, and its kind page shows what to buy meanwhile. The structured data says the same.
- Structured data for a shop
- Every product a Product with an offer per size and its availability; shop pages an ItemList; every stockist a Store with opening hours; help a FAQPage; posts BlogPosting, the recipe a Recipe; breadcrumbs. A sitemap, RSS, llms.txt and every post as Markdown.
- Design rules, checked
- Colours only from the preset, images with alt text and a size: pnpm lint holds every page to it, yours included.
Delivery
A zip, or straight from GitHub.
Download both editions from your account, or connect GitHub and get read access to the private repositories. Each release is one tagged commit, so updating is a pull.
$ git clone git@github.com:themesdev/parcel-next.git
$ cd parcel-next && pnpm install
$ pnpm dev # the demo content, until you connect Sanity
$ pnpm seed # then import it into your own dataset- 01Buy a licensePay once. The license belongs to your organisation; owners and admins hand out the seats.
- 02Connect GitHubIn your account, sign in with GitHub once. We learn only your username, and invite it read-only to both repositories.
- 03Pull updatesUpdates are free for life. Access follows your license, and the zip stays in your account next to it.
Pay once. Both editions.
Unlimited projects, private, commercial and for clients, with every future update of both editions. Prices exclude VAT; we sell to businesses. License details
For a freelance developer, or a brand owner who builds their own shop.
Choose SoloA small studio building shops for brands: everyone gets their own seat.
Choose Team
A registered Dutch company, KvK 01129853. Questions before you buy? Ask me.
Paying
Through Mollie: card, Apple Pay, iDEAL, Bancontact or PayPal. A proper invoice for every order, with EU reverse charge.
Updates
Offset 1.1.3 came out on . 19 releases across our themes in the last 30 days, all free for buyers.
Track record
400+ teams and developers have bought from themes.dev since 2020. Their licenses now live in their accounts here.
What's new
Updates for both editions, free.
v1.0.1
Latest
Astro
- The home hero's honey jar carries the shop's label (Sorrel & Salt, Wildflower, raw honey, spring, 340 g, 2 May) in place of a blank paper label. The label is set in the theme's own fonts, as on the drawn jars; the alt text names the jar.
Next.js + Sanity
- The home hero's honey jar carries the shop's label (Sorrel & Salt, Wildflower, raw honey, spring, 340 g, 2 May) in place of a blank paper label. The label is set in the theme's own fonts, as on the drawn jars; the alt text names the jar.
Questions
Do I get both editions?
Yes. Parcel is one product: every license includes the Astro theme and the Next.js + Sanity edition, as a zip and as two private GitHub repositories. Use either or both in any project your license covers.
Which edition should I use?
The Astro edition if a developer keeps the site: the products, prices and stockists are in typed files, the posts in Markdown, and the output is plain static HTML on any host. The Next.js + Sanity edition if the brand keeps it: whoever runs the shop changes a price, marks a size sold out or adds a stockist in the Studio, with a live preview, and nobody touches code.
Does it take payments?
Not by itself. Parcel is the storefront: products, the bag and the pages around them. Payment, stock and orders stay with your checkout provider. Set a provider and its checkout address and the bag’s checkout button goes there; until then it shows a notice that this is a demo. The bag does not pass its lines on for you: connecting it to a Shopify Buy Button, Stripe Payment Links or Snipcart means replacing one function, checkout() in bag.ts.
How do subscriptions work?
Products you mark as subscribable get a choice on the product page: once, or every two months at a discount you set. The choice is shown in the bag and travels with the line. The recurring billing itself is your checkout provider’s.
We don’t sell food. Does it fit?
The demo is a pantry, but nothing in the layout depends on it. The Balm preset shows the same pages selling skincare, with its own products, kinds and photos. The harvest note works for anything with a date and a place: roasted, fired, poured, packed.
Do I need a paid Sanity plan?
No. Sanity’s free plan is enough for this theme. The README walks you through the project, tokens and the seed script.
How does the GitHub access work?
In your themes.dev account, connect your GitHub account once by signing in with GitHub. You then get a read-only invitation to themesdev/parcel-astro and themesdev/parcel-next. Every release is a tagged commit there. Access follows your license: a seat you lose or a refund ends it. The zip stays in your account either way.
Can I build sites for clients with it?
Yes, in unlimited projects. A site you build with Parcel for a brand is theirs: they may own, host, edit and keep running it without a license of their own. They may not take Parcel out of that site to build other sites.
Can I see it before buying?
Yes. The live demo is the Astro edition with every page, and the screenshots on this page show them in light and dark. The demo brands, Sorrel & Salt and Fennwick, and everything in them are invented: people, places, shops, reviews and figures. The photos are generated and show fictional people and unbranded products; the valley map and the street maps are drawn.
Can I use our own photos and colours?
Yes. Every product, person and scene takes a photo at a fixed ratio under the same file names; the README lists the slots and sizes. Each product’s label colour comes from the preset: switch to Balm, or change them in one file, and every page follows.
Do you charge VAT?
We sell to businesses. Dutch businesses pay 21% VAT; businesses elsewhere in the EU with a valid VAT number pay none (reverse charge); outside the EU there is no Dutch VAT. You get a proper invoice by email.
Is Parcel an official Astro, Next.js or Sanity product?
No. Parcel is made by themes.dev and builds on the open-source Astro, Next.js, Tailwind CSS and Sanity projects; it is not affiliated with them.
Put your brand on Parcel.
From €49 for one person to €349 for your whole company. Both editions, pay once, lifetime updates.