Breadcrumbs

A structured navigation trail for deep catalog pages.

Merchant-addable
Yes
Settings
7
Block types
File
sections/breadcrumbs.liquid

Used by default on: Collection

Screenshots pending

Captures for Breadcrumbs at desktop and mobile widths are generated from a live store by npm run shots. They appear here automatically once that has run.

When to use it

Collection and product pages in catalogs more than two levels deep.

Setting it up

  1. Add the section near the top of the template.
  2. The trail builds automatically from the current page context.

Where the content comes from

Generated from Shopify navigation context. No editorial content.

Section settings

Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.

Uses the current page's Shopify data to show its location in the storefront.

Desktop font sizeDropdown
ID
desktop_size
Default
Small
  • Extra smallxs
  • Smalls
  • Mediumm
  • Largel
Mobile font sizeDropdown
ID
mobile_size
Default
Small
  • Extra smallxs
  • Smalls
  • Mediumm
  • Largel
Separator styleDropdown
ID
separator
Default
Slash /
  • Slash /slash
  • Dash —dash
  • Dot •dot
AlignmentDropdown
ID
alignment
Default
Left
  • Leftleft
  • Centercenter
  • Rightright
Top paddingSlider
ID
padding_top
Default
24
Range
0px to 100px, in steps of 4px
Bottom paddingSlider
ID
padding_bottom
Default
24
Range
0px to 100px, in steps of 4px
Color schemeColor scheme
ID
color_scheme
Default
scheme-7