Skip to main content
ForkMe is also a free Theme Store theme you edit in the visual Builder, with the same design. This page is about the code storefront. ForkMe is an official code storefront: a React and Vite project you own, that Shoppex builds, serves on your domain and connects to checkout. Nova is a finished shop and Clean Minimal (Code) is a port of the Easy theme. ForkMe is the starting point: every visual decision sits in one token file, every home section in its own file, and the cart, catalog and customer account come from the @shoppexio/storefront-react package instead of thousands of lines of copied code.
The ForkMe home page in dark mode: announcement bar, a centred headline with the accent word in blue, two buttons, the shop rating and a fanned row of product cards

ForkMe home page, dark scheme (the default)

​
What ships

  • Home: announcement bar, hero with a shelf of your real products, trust strip, categories, products, a promo band, how it works, reviews with your real tally, FAQ, store stats (off by default). Each section is one file and can be hidden in the Design tab.
  • Product page: gallery, options, quantity, add to cart and buy now, delivery line, and tabs for the description, your own content tabs, reviews and FAQ.
  • Pages: catalog with categories, search and sort, cart, checkout details, reviews, contact, terms, FAQ, your own pages, 404, and the customer account.
  • Light and dark from one token set. Dark is the default; buyers switch in the header.
  • Four colour presets in the Design tab: Cobalt, Emerald, Violet and Ember, each a complete light and dark pair.
  • AGENTS.md at the project root: the folder map, the primitives, the platform rules and how to add a section. The dashboard agent reads it, and so do Cursor, Codex or Claude Code once you work locally.
A ForkMe product page in dark mode: a large product image on the left, and on the right the category, title, rating, stock, price, three selectable options, a quantity stepper, Add to cart and Buy now

Product page: options, quantity and the buy box

​
Get the template

1

Create a storefront from ForkMe

Open Store → Storefronts, switch to Advanced and create a storefront from the ForkMe template.
2

Pull it

Install the Theme CLI, sign in, and pull the project:
3

Check it locally

bun run dev starts Vite without shop data and shows a short setup screen. Your real catalog appears in the dashboard preview after a push.
4

Push and publish

The push starts a build. Preview it under Store → Storefronts, then publish. Visitors only see a build after you publish it.

​
Where things live

Start an AI session by asking the agent to read AGENTS.md. It names the primitive to use for each job, so new UI stays inside the design system.
The ForkMe catalog in dark mode: page title, search field, sort menu, category tabs, and four product cards showing a bundle, a best seller badge, ratings, prices and instant delivery status

Catalog: category tabs, search, sort and product cards with their states

​
Theming

Open src/theme/tokens.css. The two palettes, the accent and the colours derived from it, the font stack, radii and shadows are the first hundred lines. Every Tailwind colour, font, size and radius utility in ForkMe maps to a token there, so a component cannot reach for a value outside the system.
  • Without code: Design → Theme edits the same values, and the four presets set a full palette in one click.
  • Accent: one colour. Hover states, the soft tint behind badges, the focus ring and the text colour on accent surfaces are derived from it, so changing the accent keeps contrast readable.
  • Type: Inter, bundled with the project, so no font request leaves your domain.
  • A primitive: change its rule in src/styles/primitives.css and keep the class name. Every page follows.

​
Content

The Design tab edits src/config/content-defaults.json: section order, labels, the hero, the promo band, footer links. What a merchant saves is a partial override on top of those defaults; records merge, lists replace. content-schema.json declares the choices and bounds, so the Design tab shows a picker instead of a text field. To remove a home section, set visible: false or delete its entry. To add one, create the file in src/sections/, register it, add its parser and defaults. AGENTS.md lists the steps.

​
Cart, checkout and the customer account

ForkMe depends on @shoppexio/storefront-react, pinned to an exact version. The package reads the shop data Shoppex puts on the page and gives the template hooks and models: useStorefront() for the catalog, useCart() for the cart, quotes and the hand-off to checkout, and helpers for reviews, pages, menus and the contact form. The template only draws them.
The ForkMe cart page in dark mode: one line item with image, option, quantity stepper and remove link, and an order summary with subtotal, total and a Checkout button

Cart page with the order summary

The customer account (orders, downloads, subscriptions, rewards, referrals, reseller, support, settings) also comes from the package and takes its look from your tokens. To change one part, target its hook:
The package README lists every hook and every token the account reads. See Customer accounts for sign-in and routing.

​
Eject the account

When hooks are not enough and you want to own the account’s markup, copy it into the project:
  1. Copy node_modules/@shoppexio/storefront-react/eject/account/ to src/account/.
  2. In src/pages/account-page.tsx, import AccountPage from ../account/account-page instead of @shoppexio/storefront-react/account.
  3. Keep the @shoppexio/storefront-react/account.css import; it styles the copied markup.
From then on the account is yours, and package updates no longer change it.

​
Physical products

ForkMe sells physical products next to digital ones. A physical product’s card says Ships to your address instead of a delivery time. When the cart holds one, the summary says shipping is calculated at checkout, because the cart total does not include it. If the shop does not ship physical products, checkout refuses the cart and says This shop does not ship physical products yet.
The ForkMe product page on a phone in dark mode: header with search, cart and menu, the product image, title, rating, price, options, and a Buy now bar fixed to the bottom of the screen

Mobile product page with the sticky buy bar

​
Build and deploy

Every push and every import runs the same pipeline: install from the lockfile, build in a sandbox with no network, upload the output as a build that never changes. A failed build leaves the published storefront untouched.
  • package.json and bun.lock stay committed and in step; the sandbox installs them frozen.
  • vite.config.ts keeps base: './', so the build works under a preview path and on your domain.
  • The Shoppex SDK stays a script tag in index.html, not an npm import.
  • Elements that render content keep their data-sx-config attribute; the Design tab uses it for click-to-select.
  • An option you add to a parser goes into content-schema.json in the same change.
To move to a newer @shoppexio/storefront-react, change the exact version in package.json, run bun install, then bun run typecheck && bun run test before you push. The package’s CHANGELOG.md lists what changed. See Code storefront development for the globals every code storefront reads, Build your own theme for replacing the design entirely, and Code storefronts for import, export and the build limits.