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 a name and a type; for a plain Page it also asks for a slug.

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

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

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

Every other type skips the slug, because you do not choose its address: the dialog shows the real one instead, such as /products/{slug} or /checkout.

Page type, and why it is not just a label

There are twelve types, in five groups:

Group	Type	Storefront address
General	Page	the slug you set
	Search	/search
	Account page	/account
Store	Product	/products/{product}
	Category	/collections/{category}
	Course	/courses/{course}
	Checkout	/checkout
	Order complete	/checkout/complete
Blog	Blog	/blog-categories/{category}
	Post	/blog/{post}
Error	Error page	shown when a page is not found
Maintenance	Maintenance	shown while the site is in 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 rest 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 last two have no address at all: Error page is the body of a 404, and Maintenance is what shoppers see while the maintenance switch is on. In the list, the page holding that role carries a "Shown …" badge; a template in use carries Default template.

The type is chosen at creation and cannot be changed. Pick the right one up front.

Deleting a template page is a bigger deal than it looks

The delete dialog spells out two cases:

"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 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, served at /. The create dialog says exactly that while the site is still empty.

A page's menu

Each page in the list has its own menu: SEO, Custom code, Rename, Duplicate, 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: it is the renderer that produces the HTML when you publish, and a test comparing both renderers byte for byte keeps them identical.

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".

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.