The layout at every breakpoint, the type, the colours, the motion, the promo, and the code that carries them.
SELL
ONLINE!
Design the shop you actually want, put your real products in it, and ship it as a Shopify theme or a whole Next.js store. Then make the Black Friday noise from the same app.
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 BRIEF
Fieldwork wants a shop by Black Friday
Meet Fieldwork: workwear, cut for work, worn for years. It is the shop inside our Fieldwork storefront template, so it is the shop we'll build here. They already sell on Shopify, with a theme that looks exactly like four thousand other shops. Black Friday is coming. They want a store that looks like them, a sale page, a countdown post and an email header that moves.
The usual way: a theme from the store, a developer to fork it, a designer in one tool for the mockups and another for the social posts, and a theme update that undoes the fork. This page is the other way. One app designs the shop, binds it to the products, writes the store, and makes the promo. Shopify does what Shopify is good at: the products, the checkout, the money.
9
storefront templates, whole stores
5
screens: home, search, category, product, cart
3
ways out: theme, store, components
31
Black Friday templates in the gallery
STEP 1
Start from a store, not a blank page
Every storefront template has the screens a store has, matched to its routes: Home, Search, Category, Product and Cart. This one is Bloom, skincare in blush and plum. Fieldwork, Kiln, Ode, Static, Summit, Marginalia, Greenhouse and Circuit are the other eight.
The products, categories, cart and menu are collections with a commerce schema, so the product cards already repeat over products and the cart already lists lines. On the canvas they show sample products. That changes in step 3.
The Bloom skincare storefront template on the canvas, in blush and plum. The camera moves from the whole page to the Home screen, then the Product screen with its price and add to cart, and the Cart screen with its lines and checkout.
STEP 2
Make it look like you
Fieldwork has a brand. Open ⋯ › Brand kit…, fill in the colours, the heading and body fonts and the shop name, and click Apply to document. Every screen takes it at once, because the templates bind their fills to brand colours and their text to styles.
In the clip we applied the Gym & fitness example kit to Fieldwork so you can see the change: red, yellow, Bebas Neue, a new name in the header. Then design past the template. Layout per breakpoint, motion, your own sections: it is a normal PopCraft file.
The Fieldwork workwear storefront template, zoomed on its Home screen. From ⋯, Brand kit… opens; the Gym & fitness example kit is applied, and Home, then every other screen, takes its red and yellow, its Bebas Neue headings and its shop name at once.
STEP 3
Your real products, not sample ones
Install the Ecommerce plugin from Marketplace › Plugins. Shopify is not built into PopCraft; this plugin brings it. Paste your .myshopify.com address and your public Storefront access token. They are kept in the file, so everyone on the team designs against the same store.
The Catalogue shows your products as pictures. Click one to link selected layers to it, or Use in the design to fill the page with what you really sell. Then run the checklist: product list, product page, add to cart, cart, checkout. It selects what is missing and fixes what it can.
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.
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.
STEP 4
Pick your road
Same design, same products, three ways out. Fieldwork already runs Shopify, so road one is the easy pick. Road two is for when they outgrow theme limits.
ROAD 1: SHOPIFY THEME
You already run Shopify and want it to stay simple: Shopify hosts, Shopify checks out.
Ecommerce plugin › Export › Shopify theme. Upload the zip in Online Store › Themes.
How it works →ROAD 2: WHOLE STORE ON VERCEL
You want a fast headless shop on your own Vercel, still selling your Shopify products.
Publish › Store › Deploy store. A Next.js Commerce store, built and deployed.
How it works →ROAD 3: COMPONENTS
Your developers already run a Next.js Commerce store and only want the new look.
Export storefront as components: a React component per page, typed for Next.js Commerce.
How it works →ROAD 1
A Shopify theme, written for you
Export › Shopify theme writes the design as an Online Store 2.0 theme: a section per screen, JSON templates that place them, your breakpoints and motion in each section's stylesheet, your pictures as assets. Product lists become Liquid loops over the store's products.
Upload the zip in Online Store › Themes › Add theme. It runs on Shopify, with Shopify's own cart, checkout and search. The Shopify themes page opens the zip up file by file.
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.
ROAD 2
Or a whole store on your Vercel
Open Publish on a storefront and it grows a Store section: which Shopify store it sells from and where it is hosted. Deploy store builds a 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.
The products and prices are your Shopify store's. Add to cart is real; checkout is Shopify's. Add your own domain to the project in Vercel. Prefer the code in hand? Export the same store as a zip and deploy it yourself. (Not selling, just a site? That is design to Next.js.)
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.
STEP 5
Make the Black Friday noise
A sale nobody hears about is just a discount. The gallery has 31 Black Friday templates in five looks (classic till, coupons, neon, scratch card and ticker): each with a landing page, a display ad set and an animated email header, plus countdown posts, deal reels and last-call posts between them, and two GIF cards for the group chat.
Fair warning: they are written for a software sale, half off an annual plan on a till receipt. They are templates, so change the words, drop in a jacket instead of a plan, and apply Fieldwork's brand kit. The motion, the timing and the receipt gag stay.
The Black Friday receipt deal drop template in Animate, zoomed on its story size. Space plays it: the till prints the deal slip and the claim button lands.
The Kinetic headline template in Animate, zoomed on its frame. Space plays it: the headline’s words punch in one after another and the highlight pill slides under the key word, all from ordinary keys and curves on the timeline below.
The Love you more card in its Doodle theme, in Animate. The export button in the transport bar opens Export animation; GIF is picked as the format, showing its shared palette, dither and loop forever settings and the summary of the size, frame count and estimated file size.
STEP 6
Promo motion, without a motion tool
Want your own? Open Animate on any frame. Key the price dropping in, put a stagger on the product cards, add a bounce to the button. Export MP4 for stories, GIF for the email header, or a PNG sequence. The motion studio page has the toolkit.
The sale landing page publishes like any web page: click Publish, it goes live at an address of its own, and every publish is a version you can roll back to after the sale ends. Need it at your own domain? Send it to a Vercel project. The publishing page has the rest.
The website template in the editor, signed in. The Publish button in the top bar opens the Publish dialog. An address is typed, Publish is clicked, the files upload, and the dialog shows the site's link with Version 1 marked Live. The published site is then opened on its own: the landing page shows, and clicking Pricing in its navigation goes to the pricing page.
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.
THE BILL
What Fieldwork shipped
Itemised, like a good receipt. Every line is a template or a feature in PopCraft today.
FIELDWORK
BLACK FRIDAY · ONE APP · NO. 001
- Storefront: Home, Search, Category, Product, Cart
↳ Fieldwork template✓ - Brand: colours, fonts, shop name
↳ Brand kit✓ - Real products and prices
↳ Ecommerce plugin✓ - The store itself
↳ Shopify theme or Next.js store✓ - Sale landing page
↳ Black Friday landing✓ - Countdown post, deal reel
↳ Black Friday motion✓ - Email header that moves
↳ Black Friday GIF header✓
EXTRA APPS0
CART & CHECKOUTSHOPIFY'S
THANK YOU · KEEP THIS FOR YOUR RECORDS
WHAT YOU SKIP
The shop stack, before and after
| THE USUAL SHOP | IN POPCRAFT |
|---|---|
| A bought theme, forked by a developer | Your own design, exported as a theme |
| Mockups in a design tool, rebuilt in Liquid | Bindings the exporter turns into Liquid |
| A separate headless build for speed | Deploy store: Next.js Commerce on your Vercel |
| A social tool for the sale posts | Black Friday motion templates, in your brand |
| An email builder for the header | An animated GIF header from the same file |
FROM ZERO
From template to till in six moves
- 1
Pick a storefront
Nine of them, each a whole store: Fieldwork, Kiln, Ode, Static, Bloom, Summit, Marginalia, Greenhouse, Circuit. - 2
Put your brand on it
⋯ › Brand kit…, Apply to document. Every screen follows at once. - 3
Install the Ecommerce plugin
Marketplace › Plugins. Paste your .myshopify.com address and your public Storefront token. - 4
Use your real products
The Catalogue shows them; Use in the design fills the page with what you sell. - 5
Run the checklist
Product list, product page, add to cart, cart, checkout. It fixes what it can. - 6
Ship it
A Shopify theme zip, a whole store deployed to Vercel, or components for the store you have.
WHO DOES WHAT
We draw, Shopify sells
SHOPIFY
KA-CHING!Products, variants, inventory, checkout, payments, accounts and orders. Same as before you changed the look.
YOU
YAY!Variant pickers and anything custom live in the theme or the Next.js code, where a developer can own them.
BEING HONEST
Shopify only, for now.
Selling today means a Shopify store behind the design. The theme's sections have no merchant settings yet, and add to cart sends the first available variant. Other platforms can come through plugins, which read the storefront with getStorefront(). The storefront docs cover every binding.
ASKED & ANSWERED
Questions, answered
Do I need a Shopify store?
For selling, yes, today. The theme runs on Shopify, and the Next.js Commerce store sells your Shopify products through the Storefront API. PopCraft designs the shop; Shopify keeps the products, the cart's checkout, payments and orders.
Is Shopify built into PopCraft?
The Shopify theme export and the product catalogue come from the Ecommerce plugin, in Marketplace › Plugins. The Next.js Commerce store and components exports are built in.
Can a merchant edit the theme in Shopify's theme editor?
The sections can be placed like any Online Store 2.0 section, but they have no settings of their own yet. Change the design in PopCraft, export again and upload.
What about product variants?
The design's add to cart sends the first available variant. A store that sells sizes or colours needs its own variant picker, in the theme or in the Next.js code.
Are the Black Friday templates for shops?
They are written for a software sale: half off an annual plan, on a till receipt. They are ordinary templates, so the words, prices and pictures are yours to change, and a brand kit re-skins them. They are a starting point for the motion, not a ready-made shop promo.
Can I use my own domain?
On the Vercel road, yes: add the domain to the Vercel project. On the Shopify road, your domain is Shopify's to serve as always. A sale landing page published on PopCraft lives at a PopCraft address; send it to Vercel for your own domain.
THE MANUAL, FOR THE DETAILS
KEEP EXPLORING
Goes great with
KA-CHING! YOUR TURN.
A storefront designed, then a Shopify theme or a Next.js store. Free to start, in your browser or on your Mac.