Your .myshopify.com address and public Storefront token, kept in the file so the whole team designs against the same store.
SHOPIFY
THEMES!
Design the shop you actually want, bind it to your real products, and ship it as an Online Store 2.0 theme. Or as a whole Next.js Commerce store on Vercel. Same design, same products, your call.
The Fieldwork storefront template on the canvas: its home, search, product and cart pages, drawn with the shop's sample products. The command palette runs Export as storefront components… and a zip downloads with a React component per page — HomePage, SearchPage, ProductPage and CartPage — whose props are the store's products, cart and menu and its add-to-cart and checkout actions.
KA-CHING!
THE PROBLEM
Your store looks like everyone else's
You know the drill. Pick a theme. Squint at the customiser. Move the hero up, then down. Wish the product cards did that thing from the mood board. Hire someone to fork the theme, and now every update is a merge. The shop ends up looking like the theme, not like you.
We flipped it. In PopCraft you design the shop like any page: type, colour, layout at every breakpoint, motion, the lot. Then you bind it to a store. Product cards read products. The cart reads the cart. The add-to-cart button is a form that does a store's job. When it is right, the exporter writes the store for you.
9
storefront templates, whole stores
5
screens a store needs: home to cart
3
targets: theme, store, components
1
design, bound once
START HERE
Templates that are whole stores
Every storefront template has the screens a store has, matched to its routes: Home, Search, Category, Product and Cart. This is Static, a streetwear drop in black and acid lime, with a ticker for the drop and a poster hero.
Their products, categories, cart and menu are collections with a commerce schema. On the canvas they show sample products. Hook up a store and they show yours.
The Static streetwear drop storefront template on the canvas: black and acid lime. The camera moves from the whole page to the Home screen with its ticker and poster hero, then to the Product screen with its price and add to cart, and the Cart screen with its lines, totals and checkout.
PICK A WORLD
Nine shops, nine moods
Fieldwork
Workwear, light, a split hero
Kiln
A ceramics studio in a serif
Ode
One kettle, dark and quiet
Static
Streetwear, black and acid lime
Bloom
Skincare in blush and plum
Summit
Outdoor gear, condensed type
Marginalia
A bookshop in cream and ink
Greenhouse
Plants in sage and soft cards
Circuit
Audio gear, navy and electric blue
Each one moves differently too: Static pops and bounces, Marginalia types its headline, Circuit lets its pictures drift. All of it is ordinary PopCraft motion you can change.
THE THEME
An Online Store 2.0 theme, written for you
The Ecommerce plugin's Export › Shopify theme writes the design as a theme. Each screen becomes a section, and a JSON template places it: Home is index, the product screen is product, the category screen is collection, plus search and cart.
Your breakpoints, variables and motion go into each section's stylesheet. Your pictures become theme assets. Upload the zip in Online Store › Themes › Add theme and it runs on Shopify, with Shopify's own cart, checkout and search.
The Circuit audio store template on the canvas. Its design is written as a Shopify theme by the Shopify theme target, the generator the Ecommerce plugin's export uses. The theme's files are then listed: layout/theme.liquid, a section per screen, the JSON templates that place them (index, product, collection, search, cart and the rest), the config and the pictures as assets, with the product section's Liquid loop shown under them.
X-RAY
What is inside the zip
No mystery meat. This is every kind of file the theme exporter writes, straight from the code.
your-shop-shopify-theme.zip
layout/theme.liquidThe page around everything: Shopify's header content, your fonts, the canonical linksections/popcraft-home.liquidOne section per screen of your design, written as Liquidsections/popcraft-product.liquid…with each product list a loop over the store's productstemplates/index.jsonHome. JSON templates place each section, Online Store 2.0 styletemplates/product.jsonThe screen that is one product's pagetemplates/collection.jsonThe screen about one categorytemplates/search.json · cart.jsonSearch and the carttemplates/404 · page · blog · article · password …Plain fallbacks for the templates every theme needs and your design has no screen fortemplates/gift_card.liquidThe gift card page Shopify asks forconfig/settings_schema.jsonTheme info: name, version, docs linklocales/en.default.jsonThe locale file a theme must haveassets/popcraft-*.png …Your design's own pictures, served by Shopify's CDN
DESIGN → LIQUID
Your bindings, translated
You never write Liquid. You bind a layer to a product field or set a form to a store action, and the exporter writes the Liquid that Shopify expects.
A frame repeating over Products→
{% for p in collections.all.products %}…on the Category screen→
{% for p in collection.products %}A product's price→
{{ p.price | money }}A product's picture→
{{ p.featured_image | image_url: width: 1200 }}One product picked for a layer→
{% assign p = all_products['kettle'] %}Your menu collection→
{% for link in linklists['main-menu'].links %}A form that adds to the cart→
<form action="/cart/add" method="post">Go to checkout→
<form action="/cart"> + checkoutSearch the store→
<form action="/search" method="get">FROM ZERO
From design to Shopify in six moves
- 1
Start from a storefront
Pick one of the nine shop templates, or any design: the Ecommerce plugin's Make it a store adds the products, categories, cart, cart lines and menu collections a store needs. - 2
Install the Ecommerce plugin
Marketplace › Plugins › Ecommerce. It opens as a tab on the side of the editor. Shopify is not built into PopCraft: this plugin brings it. - 3
Point it at your store
Paste your .myshopify.com address and your public Storefront access token. It keeps them in the file, so everyone who opens it uses the same store. - 4
Use your real products
The Catalogue shows your products. Click one to link selected layers to it, or Use in the design to fill the page with what you really sell. - 5
Run the checklist
It lists what the design still needs to sell (a product list, a product page, add to cart, the cart, checkout) and fixes what it can. - 6
Export › Shopify theme
Upload the zip in Shopify admin: Online Store › Themes › Add theme. It runs on Shopify with Shopify's own cart and checkout.
THE PLUGIN
The Ecommerce plugin does the Shopify part
CATALOGUE
OOH!Your products as pictures, filtered and sorted. Click one to link layers to it. Use in the design fills the page with what you really sell.
MAKE IT A STORE
ZAP!Adds the products, categories, cart, cart lines and menu collections a store needs, with sample records, to any design.
CHECKLIST
CHECK!What the design still needs to sell, each with the layer to fix selected, and Fix where the plugin can do it for you.
SHOPIFY THEME
KA-CHING!Export › Shopify theme: the Online Store 2.0 zip, ready for Online Store › Themes › Add theme.
ON THE MARKET
CLICK!Install it from Marketplace › Plugins. Plugins can add other stores too: an exporter reads the storefront with getStorefront().
The editor with a landing page open. The Marketplace button on the right rail opens the marketplace: plugins, templates, libraries and themes, with categories and a search. Templates and then Motion narrow it to animated templates, and clicking one (Synthwave tunnel visualizer) opens its listing, with its preview and description. Installing needs an account.
A brainstorm board with its sticky notes selected. From ⋯, Manage plugins… opens the plugin manager, and Install from file… installs Arrange in Grid from its package: it is listed with its commands and the permissions it asks for. Its Grid command is clicked and the permissions are allowed; its panel asks for the gap and the columns, 4 is typed, and Arrange lays the stickies out in a tidy grid.
NOT ON THEMES?
Or ship a whole store to Vercel
A theme is one road. The other is headless. Open Publish on a storefront and it grows a Store section: which Shopify store it sells from and where it is hosted. Deploy storebuilds a whole Next.js Commerce store from the design, makes a Vercel project the first time, sets your store's domain and Storefront token as its encrypted environment, and deploys. It is live in a minute or two.
The products, prices and pictures are your Shopify store's. Add to cart is real. Check out goes to Shopify's checkout. Add your own domain to the project in Vercel. Already run a Next.js Commerce store? Export a React component per page instead, typed with Next.js Commerce's own types.
The Fieldwork storefront template on the canvas: its home, search, product and cart pages, drawn with the shop's sample products. The command palette runs Export as storefront components… and a zip downloads with a React component per page — HomePage, SearchPage, ProductPage and CartPage — whose props are the store's products, cart and menu and its add-to-cart and checkout actions.
The Kiln ceramics storefront template on the canvas. The command palette runs Export storefront as a Next.js Commerce store and a zip downloads: a whole Next.js Commerce app, with its Shopify client, cart actions and a route per screen drawn by the design. Its files are listed with the .env.example that names the Shopify store's domain and Storefront token.
The website template with nothing selected. Collections in the Design panel opens the file's content: a Posts collection with a title and a reading time for each record, and under each field's name the token a text says it with. A record is added and its title typed into the new row.
CHOOSE
Three targets, one design
| IF YOU WANT | PICK |
|---|---|
| A theme on Shopify, with Shopify's cart and checkout | Shopify theme (Ecommerce plugin) |
| A fast headless store on your Vercel, selling Shopify products | Publish as a store, or Next.js Commerce store |
| Your design inside a Next.js Commerce store you already run | Next.js Commerce components |
| BigCommerce, WooCommerce, a CMS | A plugin exporter, built on getStorefront() |
WHAT STAYS WITH THE STORE
We draw. Shopify sells.
Variant pickers, the cart's optimistic updates, search sorting and filtering, accounts and checkout belong to the store, in every target. PopCraft supplies the design: its layout at every breakpoint, its type, colours and motion. The storefront docs cover every binding, and getpopcraft/examples has a whole store built this way.
ASKED & ANSWERED
Questions, answered
Is Shopify built into PopCraft?
No. The Ecommerce plugin brings it, from Marketplace › Plugins. It adds the store settings, the product catalogue, Make it a store, a checklist and Export › Shopify theme. Next.js Commerce exports are built in.
What kind of theme is it?
An Online Store 2.0 theme: a layout, one Liquid section per screen of your design, JSON templates that place them (index, product, collection, search, cart and a page template for any other screen), config, a locale file and your pictures as assets. You upload the zip in Online Store › Themes › Add theme.
Can a merchant edit the sections in the theme editor?
The sections can be placed like any Online Store 2.0 section, but they have no settings of their own yet: the words and layout come from the design. To change them, change the design and export the theme again.
What about variants, accounts and checkout?
Those stay with the store. The theme posts to Shopify's own cart and checkout. The design's add-to-cart sends the first available variant, so a store that sells options needs its own variant picker.
Can I sell without Shopify's theme system?
Yes. Publish as a store deploys a whole Next.js Commerce store to a Vercel project of yours, selling your Shopify products with a real cart and checkout. Or export React components for a Next.js Commerce store you already run.
Can I build the theme from a script?
Yes. popcraft storefront shop.popcraft --target shopify-theme --out theme writes the theme's folders headlessly. Pictures only the canvas can draw, like a shader or a blur, are left as a comment there: export from the app to have them drawn.
THE MANUAL, FOR THE DETAILS
KEEP EXPLORING
Goes great with
KA-CHING! YOUR TURN.
Design a storefront, ship an Online Store 2.0 theme. Free to start, in your browser or on your Mac.