Pages and the canvas

Everything you build sits on a page. The site's page list is under Pages on the editor's left rail.

Create a page

Pages → New page. The dialog asks for three things:

Name — what you see in the list. "About us", say.

URL slug — the tail of the address, e.g. about-us. Lowercase letters, numbers and hyphens only. If another page already uses that slug, the dialog says so.

Type — this matters more than it looks, and the next section is why.

Page type, and why it is not just a label

There are ten types, in five groups:

Group	Types
General	Page
Store	Product · Category · Search · Checkout · Order complete
Blog	Blog · Post
Error	Error page
Maintenance	Maintenance

A Page is one you build and name: a homepage, an "About us", a campaign landing page. It has one address, and that address is its own.

The other nine are templates. You do not build a page per product — you build one Product page, and the storefront uses it to render every product, each at its own address. The same goes for categories, posts, search results, the checkout, and the thank-you page after an order.

The type is chosen at creation. Pick the right one up front.

Deleting a template page is a bigger deal than it looks

The delete dialog spells out two cases, and both are worth reading properly:

"This is the default {type} template. Deleting it promotes another {type} page in its place."

You have several pages of that type and you are deleting the one currently serving as default. Another takes over. The storefront keeps working.

"This is the site's only {type} template. Deleting it leaves nothing to render its storefront URLs, and they will stop working until you create another."

This is the dangerous one. Delete your only Product page and every product address on the storefront stops working — not one broken page, a whole family of addresses. The template is the only thing that renders them.

The homepage

A site's first page automatically becomes its homepage. Making another page the homepage demotes whichever one held it — this is the only action on one page that changes another.

A page's menu

Each page in the list has its own menu: Rename, Duplicate, SEO, Custom code, Delete.

SEO opens the title and description search engines read — see SEO.

Custom code is CSS/JS for this page only. Do not confuse it with the rail's Settings, which applies to the whole site.

The canvas

The canvas in the middle is the real page, not a mock-up: this is the renderer that produces the HTML when you publish. What you see is what a shopper gets — that is held in place by a test comparing both renderers byte for byte, and it is the single most important invariant in the product.

The practical consequence: if something looks right on the canvas, it will be right on the published page. If it differs, that is a bug worth reporting, not "the canvas is only an approximation".

You can also drag the canvas edges to try any width. The breakpoint bar above jumps to whichever size actually serves that width — see Styling for phones.

Next

Elements and the inspector — how to get something onto this empty page.