Canvas

Canvas shows your store's pages side by side on one board, as they look right now. You describe a change, Nib makes it on a copy of your theme, and the page updates in place. Nothing reaches your live store until you press Done, Moss tests the change and you publish it, as with any other task.

Canvas works on a computer with a screen at least 1024 px wide. On a phone or a narrow window you see a note with a link to the task instead.

Opening the canvasCopy Anchor Link

• On a store's page, click Open canvas. The arrow next to it offers Resume session… when you already have one open, and Start from another theme… to copy a theme other than your live one.
• In the sidebar, hover a store and click the window icon next to +.

Kobold starts copying your theme and opens the board straight away. While the copy is made, a blue bar shows the progress (Theme copied › Loading pages › Ready) and you can already look around. You only see a start screen when something blocks the canvas, such as a lost Shopify connection, a store set to CLI change packages, Shopify's 20-theme limit, or three canvases already open on the store. The start screen says what to fix and links to it.

Each person can have one canvas open per store, and a store can have three open at once (each one holds a theme slot). Only the person who opened a canvas can prompt in it. Approvers don't see Canvas.

The boardCopy Anchor Link

The board starts with your store's main pages: Home, a collection, a product, the cart, the cart drawer, search, a blog post and the 404 page, using real links from your store.

• Every page shows in full: each page on the board is as tall as the page itself, from the header to the footer, so you see the whole page at once instead of scrolling inside it. Sections that fill the screen, like a hero banner or a slideshow, keep the height they have in a real browser window (900 px on desktop, 844 px on mobile). A very long page is cut after 24,000 px with a Page continues note.
• Move around: scroll with two fingers anywhere, pages included, or hold Space and drag.
• Zoom: pinch, or hold ⌘ (Ctrl on Windows) and scroll. The zoom menu in the top bar has Zoom in, Zoom out, Zoom to fit (⇧1, fits every page side by side and shows their tops), Zoom to frame (⇧2, fits the focused page's width and shows its top) and 100% (⌘0).
• Focus a page: click it. A focused page shows its path, its template and the Back, Full screen and menu buttons above it. Picking a section in Layers moves the board to it when it's off screen.
• Select / Interact (bottom left, V / I): in Interact mode clicks behave like a shopper's, so you can open menus and the cart drawer. Checkout and accounts stay switched off. The first time, a hint at the bottom says so, with Switch to Select.
• Desktop / Mobile (D) switches every page between 1440 and 390 px wide and brings the top of the page you're on to the top of the screen. Each page is measured again at the new width, so it grows below as it loads.
• The minimap in the bottom right shows where you are. Click or drag it to move. M hides it.

At most six pages are live at once. A page you scroll to or click always loads, and the page you looked at longest ago pauses to make room. Pages you aren't looking at may show "Waiting…" until you move to them, with a grey dot in their header instead of the green live one.

Go toCopy Anchor Link

Press ⌘K or /, or click Go to a page or template… in the top bar.

• With nothing typed you see your recent pages, what changed in this session, and suggested checks such as the product with the longest title, one on sale, one sold out and an empty collection.
• Type to search your theme's templates (including alternates like product.ab-test and metaobject templates), products, collections, pages and blog posts.
• Paste a link from your store to open exactly that page. The result shows the product, collection or page name. Links to other sites are refused.

Opening a result takes you to it on the board. If a page on the board already shows it, the board moves to that page. If it's a different kind of page from the one you're on (say, a product while you're on the home page), it opens as a new page next to it, so you don't lose the page you were looking at. A page of the same kind opens in place.

Use ↑ ↓ to move, ↵ to open, ⌘↵ to open as a new page on the board, ⇧↵ to open and start typing a prompt, and Tab to jump to the next group or show all results of a group. Go to only reads public pages of your store, the same ones any visitor sees.

Selecting what to changeCopy Anchor Link

In Select mode, point at a page: a blue outline and a small tag show the section under the pointer, such as Section · Image banner. Header and footer sections are shared: changing them changes every page, which is why Layers lists them under Header (all pages) and Footer (all pages).

• Click selects that section. Click again inside it to go down to a block, and again to reach a single element. ⌘-click jumps straight to the element.
• The tag on a selection shows where it sits (Home › Image banner › Button). Click an earlier part to go back up a level, or use the level menu in the prompt box.
• Esc goes up one level at a time, then clears the selection.
• Layers (top bar, L) lists the focused page's sections in order, the template's first, then the header and footer groups. Click a row to select it. ↑ ↓ move between rows, → shows a section's blocks and ↵ selects.

Drawers and modalsCopy Anchor Link

You can change what only shows after a click, like the cart drawer, the mobile menu, search or a quick view:

1. Switch to Interact (I) and open it the way a shopper would.
2. Switch back to Select (V). It stays open, and you can point at it and select inside it like any section. Hide popups never hides something you opened yourself.
3. Prompt as usual. When the change lands, the page opens the drawer or modal again and selects the same element, so you see the result where you made it.

The tag says where the drawer comes from: its section (Quick add modal · Product), or the theme file it's probably built from (Cart drawer · snippets/cart-drawer.liquid) when no section renders it. A modal your theme builds with JavaScript reads theme script; Nib still gets the element and what opened it, so he can find the code.

PromptingCopy Anchor Link

With a selection, the prompt box at the bottom grows: it names what you picked, which level it is, and which devices the change applies to (All devices, Desktop only or Mobile only). Start typing anywhere and the text goes into the box. ↵ sends, ⇧↵ adds a line, and ↑ in an empty box brings back your last prompt. The paperclip attaches up to five files.

Without a selection, the change applies to the focused page.

While Nib works, the selection shimmers and a chip above the prompt box says what he's doing, with Stop. You can keep selecting and sending: new prompts wait their turn in a queue, and Cancel on a queued step in History cancels it for free. Right after you send, before Nib starts, Pip thinks it over in the chip ("Reading your prompt…", "Getting Nib ready…") with Cancel, and the send button spins until Nib picks it up. When a change is ready, only the sections it touches show Rendering… for a moment while they load the new version, then fade back in with the change (a moved, added or removed section moves, appears or goes in place; only theme layout and theme settings changes reload the whole page), a green Changed · Step 3 marker shows where, and a message offers Undo. If a step fails, a red bar on the area offers Try again and Edit prompt.

Changes to a whole page or the whole storeCopy Anchor Link

A prompt can reach further than your selection: "make every heading on this page bigger", "apply the style change to the rest of the store", "use this font everywhere". Before Nib starts, Kobold works out how far the request reaches, so there's nothing to pick:

• Your selection (the usual case): Nib changes what you selected.
• This page: Nib changes every section of the page you're on.
• Whole store: Nib looks through the whole theme, works out what "the style change" or "the same" refers to from your earlier steps, and applies it everywhere it belongs.

For a page or store change, the selection clears as soon as Nib starts, and the step reads This page or Whole store in History and on the working chip. If the change is big (more than 8 files, or 3 or more page types), Nib stops before writing anything and asks: This changes 6 sections across 3 pages · Go / Cancel. Go carries on; Cancel ends the step for free with nothing changed (so does leaving it unanswered for 5 minutes). When it's done, every page on the board reloads (pages off screen reload when you scroll to them), each changed section gets a Changed · Step N marker, and the message reads Applied to N pages.

A new look for a sectionCopy Anchor Link

Most prompts adjust what's there ("make the heading larger", "use the green button"), and Nib stays in your theme's style for those. When you ask for something new ("make this hero editorial", "redesign the product grid like a fashion magazine", "brutalist", "something completely different"), Nib builds a fresh design instead of matching the rest of the theme:

• He writes a new section for it (for example Editorial hero) with its own layout, type, colors and fonts, and keeps your content: the same text, images, links and blocks. You can still edit it in Shopify's theme editor.
• Only the section you selected changes. Other pages keep the old section unless you ask for the whole page or store, and Undo puts the old one back.
• Show him what you mean: attach screenshots or images with the paperclip, or paste a link to a page whose look you like ("like https://…", or just "like pletoscience.com"). Nib matches their layout, type, spacing and mood, not their content. Without one, he interprets your words himself. For a link, Nib also gets the page's real measurements (columns, spacing, proportions, type sizes and weights, colours, the mobile layout) of the part you name ("make this product grid like the ones on https://…", "a hero like https://…"; otherwise the first section under its header), so he rebuilds the layout instead of guessing from a picture. Fonts the page licenses are swapped for the closest font Shopify offers, and he tells you which. Nothing from that page is copied into your theme. A link you already used in the same session opens instantly the second time. If Kobold can't open the page (it takes too long to load, or the address doesn't work), the step stops before Nib changes anything, at no cost, and says why, so try again or attach a screenshot instead.
• Fonts come from Shopify's font library when possible; a font that isn't there loads from Google Fonts in that section only.
• Before the change appears, Nib looks at a screenshot of the new section on desktop and mobile and fixes what doesn't match once. These prompts take longer and may use more credits than a small change (they settle at what they really used).
• The chip above the prompt box follows along: Looking at nike.com… while a page you linked opens, Designing the new section… while he works out the design, Writing sections/editorial-hero.liquid… as he writes it, then Checking how it looks… and Fixing what it spotted… for the screenshot check.

LanguagesCopy Anchor Link

A store with more than one language shows a language switcher next to the session status. Frames then render that language and prompts edit it. See Translations.

CreditsCopy Anchor Link

• Each prompt holds 25 credits while Nib works and settles at what it really used, like any Nib round.
• A whole-store prompt, and a prompt that asks for a new look for a section, holds 75 credits (or what you have, if less) and settles at what it really used. Cancelling at Go / Cancel costs nothing.
• A prompt Nib refuses, one you stop or cancel, and one that fails cost nothing. The copy goes back to how it was before that step.
• Nib keeps the whole session's conversation, and Kobold keeps it ready for an hour between prompts, so a follow-up prompt mostly reuses what Nib already read instead of paying for it again. Coming back within the hour costs noticeably less than starting cold.
• Undo, reordering and Go to are always free.
• If your workspace has fewer than 25 credits, a red bar in the prompt box offers Top up. Prompts already waiting in the queue run once you top up.
• After Done, Moss's tests and any fix rounds cost the same as on any other task.

See Credits.

Reordering sectionsCopy Anchor Link

Select a section, then drag the handle on its tag up or down: a blue line shows where it lands. In Layers, drag a row by its handle, or focus a row and press Alt ↑ / Alt ↓. Sections can move within their own group only (the template, the header or the footer). Reordering is free.

History and undoCopy Anchor Link

History (top bar, H) lists every step, newest first, with its status (Queued, Working, Applied, Failed, Refused, Cancelled or Undone), what Nib did, the files it changed and the credits it used. Hovering a step outlines the area it changed. A queued step has Cancel, a running one Stop, a failed one Try again.

Preview (top bar, next to Done) opens your canvas copy on your real store in a new tab, as a shopper would see it.

Go to chat (top bar) opens the task's chat. A message you type there goes straight to the canvas and is sent as a change to the page you were on. To come back, click the task in the sidebar (a task with an open canvas opens straight into it) or press Open canvas at the top of the chat.

Undo (in History, in the top bar or ⌘Z) reverts the latest applied change, one step at a time. Undone steps stay in History, crossed out. If an earlier step also changed the same area, its marker comes back (Changed · Step 2 after undoing step 3), because that change is still there.

DoneCopy Anchor Link

Done opens a summary of your changes in the order they were applied, with the files they touched. After your first change, Kobold names the task after it (the title starts as "Canvas · your store"); change the title here if you like, add a note for Moss and your approvers, then click Run QA. Kobold saves the steps, starts Moss's tests on the pages you visited and opens the task. From there it's a normal task: you review, publish or send it for approval.

Publish without QACopy Anchor Link

If you don't need Moss to test a change, click Publish without QA in the summary instead. Kobold asks once ("Publish without testing?"), then saves the steps, closes the canvas and publishes the copy as your live theme right away. Moss doesn't check the changes first, but he still runs his quick smoke tests on your live store afterwards. The task shows "Published without QA" with your name.

Publishing works as it does for any task: if your live theme changed after the session started, Kobold stops and shows you the difference instead, and if Shopify doesn't accept the publish, nothing changes and you can try again. You can roll back as usual. Anyone who can open the canvas can publish this way, including developers, who otherwise can't publish.

Discard session (in the summary, or under ⋯) cancels the task and deletes the canvas copy theme from Shopify, with its steps and the hidden preview theme, so it frees their theme slots right away. Your live theme and every other theme stay as they are. You can't undo it.

Password-protected storesCopy Anchor Link

Canvas works on a store that's still behind Shopify's storefront password. Kobold enters the password for you, so the board shows your real pages instead of the password page, and it never shows the password itself.

• Save the storefront password first, under Store settings → Storefront access (see Password-protected stores). Without it, Open canvas shows a start screen with Add password.
• If the password changes while a canvas is open, the board shows Update password. Save the new one and come back. Your session and its steps are kept.

LimitsCopy Anchor Link

• One canvas per person per store, and three open canvases per store. Each one holds one of Shopify's 20 theme slots while it's open. When the store has room, it also holds a second slot for a hidden preview theme that makes block selection precise. Kobold deletes that preview theme as soon as you press Done or Discard, and Discard deletes the copy too, so finished or discarded canvases don't use up your theme slots.
• If your store is at Shopify's 20-theme limit, Kobold first deletes its own leftover themes that are no longer needed: preview themes from earlier canvases, copies of discarded canvases, and copies whose keep period has ended. Only if the store is still full does the start screen ask you to delete a theme in Shopify admin. Kobold never deletes your live theme, your original theme, or a copy a task still needs.
• Up to 16 pages on the board, and six of them live at once.
• A prompt can be up to 4,000 characters, with up to five files attached.
• Up to 30 prompts per person per hour. If a canvas spends more than 300 credits in an hour, Kobold asks you to wait before sending more.
• Only the most recent change can be undone, one step at a time, and only while nothing is queued or running. Once you've clicked Undo, you can send the next prompt right away: it waits until the undo is done.
• Sections move only within their own group (the template, the header or the footer).
• Checkout, customer accounts, the contact form and newsletter sign-ups are switched off on the board. They work as usual on your store.
• Canvas needs Kobold to write a copy theme, so it isn't available on stores set to CLI change packages.

When something stops the boardCopy Anchor Link

• Previews are unavailable right now: Kobold retries on its own; Retry now tries at once. Your session is saved.
• Password protected: the saved storefront password stopped working. Update password takes you to the store's settings and back.
• Lost its Shopify connection: Reconnect on Shopify. Undo, History and Done wait until the store is back.
• The copy was deleted or published in Shopify: the canvas works on a Kobold copy theme, so it stops if someone deletes or publishes that copy from Shopify admin. Discard the session and open a new canvas.
• A queued prompt didn't start: if Nib hasn't picked up a queued prompt after about 45 seconds, the board and the queued chip say Taking longer than usual, and the board restarts Nib's session on its own, so the prompt usually starts within seconds. Try again does the same right away if you'd rather not wait. A prompt that still hasn't started after 15 minutes is marked failed at no cost, so you can Try again from History.
• A step stays on Working, or Stop doesn't take: if Nib's session stops answering in the middle of a change, the board notices within about a minute while it's open and marks the step failed ("Something went wrong on our side. Nothing was changed on your store."), with anything it had written put back and no credits used; your next prompt starts normally. Stop on a step that doesn't respond ends it within about 30 seconds the same way.
• The canvas preview theme was published in Shopify: Kobold stops updating it and never changes your live theme. Publish another theme from Shopify admin. Your changes on the copy are safe, and the board keeps working from the copy.