Template · Online shop

A real online shop, yours to change.

Catalogue, customer accounts, card payments, returns, stock and a back office for your staff — tested, running, and written in plain code you own. Pick a look, put in your products, and open for business.

Pick a look

Eleven looks on one backend.

Vall, the Atelier style — Vall · Atelier Editorial shell

Vall, the Studio style — Vall · Studio Split shell

Vall, the Index style — Vall · Index Catalogue shell

Vall, the Drop style — Vall · Drop Marquee shell

Vall, the Boutique style — Vall · Boutique Storefront shell

Andra Varvet, the Rail style — Andra Varvet · Rail Storefront shell

Andra Varvet, the Kiosk style — Andra Varvet · Kiosk Editorial shell

Andra Varvet, the Fitting Room style — Andra Varvet · Fitting Room Split shell

Andra Varvet, the Swap Sheet style — Andra Varvet · Swap Sheet Catalogue shell

Andra Varvet, the Loud style — Andra Varvet · Loud Marquee shell

Rust & Chrome, the Workshop style — Rust & Chrome · Workshop Storefront shell

Ten of them are looks: a whole design each — the frame, the pages, the theme and fonts — installed beside the others. Staff switch the store’s look per version of the site in the back office, drafted and previewed first; orders, stock and every word staff placed stay put. They are also the worked example of building a look of your own.

A look How it all looksThe frame, the pages, the theme and fonts, a design of each block type — and blocks of its own. The shop ships 10.

Category contract What a shop hasA row of products, the shelves, and the store’s frame, front page, listing and a piece’s page — 9 types. Osysharp.Shop.Looks

Beside it A café’s, a salon’s…Each kind of site declares what it has, on the same site contract below.

Site contract What any site hasA hero, a quote, a sign-up, a banner, a gallery, the strip across the top and the footer — 12 types. Osysharp.Site.Looks

A contract says what a block holds. A look says how it looks — checked by the compiler like a class against an interface.

Switching a version’s look

Changes: The frame and every page, each block’s design, the theme, the fonts.
Stays: Orders, stock, customers — and every word and photograph staff placed, the menu, the strip and the footer: they are kept as the block’s type and its values, so the new look redraws them.

A block type the new look has no design for is drawn in the shop’s plain design. A block only the old look had waits in the arrangement — the back office lists it before the switch, and it comes back with that look.

Make your own look

Start a kit in your own namespace whose package.osy uses the site and shop contracts.
Declare look Linen { … } and its theme: palette, type, corners.
Draw the 7 parts of a store — the frame, the front page, a listing, a piece’s page — and the block types you want in your own hand.
Ship its fonts with osy font add; add blocks only your look has.
Install it in your store, photograph every page with osy test --pixels, and pick it in the back office.

Building a look, step by step

Get the code

Three commands to a running shop.

Create it

osy init shop --style atelier

Your own project: the pages and theme of the look you chose, sample products with their photographs, and the shop backend pinned as a dependency.

Run it

osy launch

A local platform starts on your machine, compiles the shop and opens it in your browser. No account and no cloud.

Fill it

osy user add [email protected] --role Staff
osy import

Add yourself as staff and load the sample products. From then on the back office is where you add, price and photograph your own.

What’s inside

Everything a shop needs to take real orders.

124 features
18 areas
12 integrations
608 tests

Catalogue · accounts · checkout · discount codes · payments · orders · delivery · returns and refunds · invoices and VAT · the books · stock and figures · the back office · customers’ data

Integrated with Stripe, Klarna, Sendcloud, Shippo, PostNord, Resend, VIES and your accounting (CSV or SIE 4) — or a provider of your own.

See every feature Browse the kits

For your staff

The back office is as finished as the storefront.

Vall's back office after a busy month: 59 orders, counted per step — waiting for payment, to pick, being picked, packed, sent, delivered — Overview Every order, with the step it is at and what can be done next

Vall's orders page: a month of orders, reserved, paid and on their way, each with its customer, items and total — Orders Payment received, pick, pack, send, refund

Vall's figures: 56 orders and 121,881 kr in 30 days, the margin, best sellers, most looked at, and what is sitting on the shelf — Figures Revenue, margin, best sellers, what sits on the shelf

Vall's stock, lowest first: sizes sold out or nearly, and what is held for unpaid orders — Stock Lowest first, held units, adjusted with a reason

Vall's customers: each with their orders and what they have spent — Customers Orders and spend, their data, store credit

Vall's books for the month: the SIE file, 121,881 kr sold at 25 % VAT, payouts, the accounts — The books SIE 4, the VAT report, payouts reconciled

How it works

A tested backend underneath. Your shop on top.

The shop backend is a package: The logic every shop shares — the order’s life, stock that cannot be sold twice, refunds that go back to the card once — lives in one package with its own tests. You depend on it, and a fix to it reaches your shop with an update.
The look is yours, in full: Pages, theme, fonts and words are ordinary source in your project. Change a colour token and every page follows; rewrite a page and nothing else moves. Five shells to start from — storefront, editorial, split, catalogue and marquee.
The data is yours: Products, photographs, customers and orders are rows in your application’s own database, and product photographs are stored by the application itself — nothing is hot-linked from anywhere.
Security is declared once: Who may read an order, change stock or see a customer’s address is written on the data itself, and every page, function and export obeys it. A visitor never sees a draft or another customer’s order.
Extend it without forking: What you sell is data: a spec sheet per product that staff edit in the back office. Fields every product of yours has go on a type of your own, entity Bike : Product. Your pages call the same functions the package’s components do, so a page can be rebuilt from scratch.
Or take it over completely: When your shop needs to work differently at its core, copy the package’s source into your project and drop the dependency. It is ordinary code with nothing privileged, so it compiles exactly as before — you are off the package, and fully in charge of it.

Open your shop.

Get started