Breadcrumb trail

Drag Elements → Basic → Breadcrumb onto a page, then open the Breadcrumb group in the right-hand panel. The element palette describes it like this:

Home ▸ Category ▸ this page. On a published page the steps are built from the page itself; on the canvas you edit them by hand.

That second sentence is the most useful thing on this page, so it goes first.

The canvas shows a sample, not the real trail

The real trail is built from the address the shopper opened. The canvas has no such address — you are editing a template that serves thousands of products, not any one product. So on the canvas the breadcrumb draws whatever you typed into Steps, and the published page replaces it with the real thing.

This is not a bug and is not waiting to be fixed. If the canvas picked some product to stand in, you would style the trail until it looked right for that one, then be surprised by every other product.

To see the real trail, use View site and open a product.

How the real trail is built

Kind of page	Trail
Product	Home → its parent categories → the product's name
Category	Home → parent categories → the category's name
Article	Home → its blog category → the article's title
Blog category	Home → parent categories → the category's name
Course	Home → the course's name
Ordinary page	Home → the page's name

The last step is always the page the shopper is standing on, and it is never a link — a page linking to itself is something a screen reader has to read out for nothing.

A product in several categories takes the deepest one. A shirt filed under both Sale and Boys › T-shirts shows Home › Boys › T-shirts › Cotton shirt. The deeper category is the more specific one, and choosing this way asks nothing of you per product. If a trail comes out wrong, the place to fix it is the category tree, not the breadcrumb element.

No "Blog" or "Courses" step is invented in the middle. Every shop names and addresses those pages differently, so a step made up here would be one that leads nowhere when clicked. If you want one, use manual mode below.

When you want to decide yourself

In the Trail field switch from Automatic to Manual. The Steps list below then becomes what gets published, exactly as you typed it.

Each step has two boxes: a Label and a link. Leaving the link empty means that step is not a link — that is how you say "this is the page you are on" by hand. Drag the handle on the left to reorder, use ⋮ to delete.

This mode suits landing pages and campaign pages — pages that sit outside the shop's structure and so have no trail to derive.

The three remaining fields

Home label is the word for the first step. It lives here rather than being written into the system because it is the one word in an automatic trail that comes from no data of yours — and because it has to be translatable (see the last section).

Last step, switched off, drops the current page's name from the trail. Many layouts already print that name in large type just below, and saying it twice adds nothing.

Max steps shortens a long trail: it keeps the first step and the last few, and replaces the middle with a …. Set it to 0, or leave it empty, for no shortening.

This one is set per screen size — you usually want four steps on a desktop and two on a phone. One thing worth knowing: shortening hides steps rather than removing them. They are still in the page, just not shown at that size — so Google still reads the whole trail, and a shopper turning their phone sideways sees the rest without a reload.

What it does for Google

A published page carries BreadcrumbList structured data describing the trail it is showing. This is the main reason to place a breadcrumb at all: a search result reads yourshop.com › Boys › T-shirts instead of a long address.

That data is generated from the very trail being drawn, so it cannot drift from what a shopper sees — which is exactly what Google asks of it.

More than one language

In a shop selling in several languages, product and category names inside an automatic trail arrive in the language being read. You do nothing beyond translating them as usual.

The other two kinds of words are translated elsewhere:

• Home label and any manual steps sit with every other string on the page: Manage → Apps → Multilingual → Translate content.
• An ordinary page's name sits under Store labels on that same screen. That group is keyed by the text, so you type the English for "Liên hệ" once and everywhere using that exact wording reads it.