Collection template

If the current collection is part of your category tree, the Breadcrumbs block automatically displays its full path, showing all parent categories leading up to it. This gives shoppers instant context about where they are in your catalog and lets them move up the hierarchy with ease.

Note: if the collection is not part of your category tree, the breadcrumbs will simply show the current collection and the Home link.

Before this block can display anything, you’ll need to create your category tree. See instructions here.

Add the "Breadcrumbs" block

• In the Theme editor, navigate to the Collection template (Note: if you have multiple templates, you'll need to follow these steps for each template – or copy and paste the block)

• Make sure you're previewing a collection that exists in your category tree

• Go to Add a new section > Apps; you'll see the Breadcrumbs block listed:

  

• You should already see your breadcrumbs appear! If you're happy with the design, hit Save – otherwise check out the customization settings below.

Settings

Some of these settings are only available on the Pro Plan.

• Content and behavior:

  • Show prefix label (Optional): Add an optional prefix label in front of the breadcrumbs, e.g. "You are in". When enabled, a text field appears below to set the text.

  

  Prefix label (optional)

  • Show home link: Enabled by default.

    • Home link style: Choose between Text (specify the text in the field below) or Icon

    • Home link text: E.g. "Home"

  • Link current page: Choose whether the current collection should be linked. Disabled by default.

  • Enable structured data: Adds structured data for breadcrumbs. Enable only if your store’s breadcrumb structure is appropriate for SEO, and be aware that invalid or mismatched markup may be ignored or flagged by search engines.

• Appearance:

  • Override colors: By default, the text and separator inherit the current color scheme's text color. Enable this option to override those colors.

  • Separator: Choose between Chevron (>), Slash (/), Bar (|) or a Custom character.

    • When Custom character is selected, a text field appears where you can type in the character. Tip: You can find some fun separators on https://copychar.cc/, though bear in mind NN/g recommends the chevron!

  • Font size: Leave blank to default to the theme's font size. When using this setting, enter a value with a unit (e.g. 1.25rem).

• Layout and spacing:

  • Content width: The app can't ascertain your theme's page width, so you can set the specific value here. Popular theme widths:

    • Primavera: 1400px (default)

    • Dawn: 1200px

  • Space between items: This is the gap between each breadcrumb. Generally, the larger the font scale, the larger you might want to set the space.

  • Vertical padding: The space at the top and bottom of the breadcrumbs. Many themes' app sections already have a padding setting, so you might want to keep this setting at 0px and default to your theme's spacing.