Everything you need to set up and customize the Breadcrumbs block — from choosing a divider style and controlling typography to deciding how the current page appears in the navigation trail.
Breadcrumbs are a small navigation trail that shows visitors where they are on your website. They typically appear near the top of a page and display a clickable path like Home › Collections › Summer Sale, making it easy for shoppers to backtrack to a parent page without using the browser's back button.
In the Boardwalk theme, the Breadcrumbs block automatically generates this navigation trail based on the page hierarchy in your store. It works on product pages, collection pages, blog posts, and other standard Shopify pages. You can customize the divider character between each step, control whether the current page is visible or clickable, and adjust the typography and spacing to match your store's design.
Follow these steps to add breadcrumbs navigation to any page of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Use the page
selector dropdown at the top center of the editor to
navigate to the page where you want to display
breadcrumbs (for example, a product page or collection
page).
In the Theme Editor sidebar, find the section where you want breadcrumbs to appear (usually near the top of the page). Click Add block and choose Breadcrumbs from the list. The block will appear with a navigation trail generated from the current page's position in your store.
Click the Breadcrumbs block in the sidebar. Use the Divider dropdown to pick the character that separates each step in the trail. You can choose from a slash (/), pipe (|), bullet (•), or chevron (›).
Decide whether to show the current page as the last item in the breadcrumb trail by toggling Show current page. If you turn this on, you can also enable Link current page to make that last item a clickable link instead of plain text.
Under the Typography heading in the block settings, select a text style and font size that fits your store's design. Then use the Padding settings to control the spacing above and below the breadcrumbs.
Click Save in the Theme Editor. Preview your page to verify the breadcrumbs trail is displaying correctly and the links navigate to the expected pages.
These settings are available when you click on the Breadcrumbs block in the Theme Editor sidebar.
The character displayed between each step in the
breadcrumb trail. Options: Slash /,
Pipe |, Bullet •, or
Chevron ›.
When turned on, the name of the page the visitor is currently viewing appears as the last item in the breadcrumb trail. When turned off, the trail ends at the parent page.
Makes the current page name a clickable link instead of plain text. This setting only appears when Show current page is turned on.
Sets the font family used for the breadcrumb text.
Options: Heading, Body,
Caption, or Menu. Each option
uses the corresponding font defined in your theme's
typography settings.
Controls the size of the breadcrumb text. The available range depends on the text style you choose. Heading ranges from 12px to 40px, Body from 10px to 30px, Caption from 8px to 30px, and Menu from 10px to 30px.
Controls the amount of space above the breadcrumbs. Range: 0px to 40px (in 4px increments). On mobile screens, this value is automatically reduced to 75% of the desktop value.
Controls the amount of space below the breadcrumbs. Range: 0px to 40px (in 4px increments). On mobile screens, this value is automatically reduced to 75% of the desktop value.
The Breadcrumbs block comes with features that work automatically — no apps or custom code needed.
The breadcrumb trail is generated automatically based on where the current page sits in your store's structure. For example, a product inside a collection will show Home › Collection Name › Product Name. You don't need to configure each link manually.
Breadcrumbs work on product pages, collection pages, blog posts, and other standard Shopify pages. The trail adapts to each page type, always reflecting the correct path from the homepage.
Choose from four different separator characters — slash, pipe, bullet, or chevron — to match the visual style of your store.
Pick from your theme's four font families — Heading, Body, Caption, or Menu — and set a custom font size within the available range for each family. This lets you match breadcrumbs to the surrounding content styling.
Decide whether the page the visitor is on appears at the end of the trail. When shown, you can choose to display it as plain text or as a clickable link — giving you full control over the navigation experience.
The top and bottom padding you set for desktop is automatically scaled down to 75% on mobile screens. This keeps the breadcrumbs well-proportioned across all device sizes without needing separate mobile settings.