Breadcrumbs with more levels

Shopify collections don't have parents, so breadcrumbs normally show only one collection, for example Home / Rain Jackets. If your store groups collections inside other collections, Radian can show the whole path instead, for example Home / Outerwear / Rain Jackets, on collection pages and on product pages.

You tell Radian which collection sits above which by adding a Parent collection field to your collections. This takes about five minutes to set up, and you don't need an app or any code.

How it works

Each collection can point to one parent collection. Radian follows these links upwards and shows every collection it passes, from the top down:

• Up to 5 levels above the current collection are shown. Deeper trees stop at the fifth parent.
• Loops are ignored. If two collections point to each other by mistake, the trail stops when a collection would appear twice.
• Product pages show the trail of the collection the product was opened from. Product cards in Radian link to the product itself, so in most cases the product page uses the first of the product's collections that has a parent collection set (in the order Shopify lists them). If none of its collections has a parent, the product's first collection is shown, as before.
• Collections without a parent use your main menu instead: if the collection is a sub-item of another link in the menu with the handle main-menu, those menu items are shown above it (up to 2 levels). Menu headings without a link (#), Home and the Collections page are skipped.

Before you start

• In the theme editor, open Theme settings > Layout and make sure Show breadcrumbs is on.
• Breadcrumbs also need to be on where they appear: Show breadcrumb in the Collection banner section of your collection template, and Show breadcrumb in the Product section of your product template. Both are on by default.
• Write down which collections belong under which. Each collection can have only one parent.

How to set it up

Step 1: Create the Parent collection field

This adds a new field to every collection in your admin. You only do this once.

1. In your Shopify admin, go to Settings > Metafields and metaobjects.
2. Click Collections, then Add definition.
3. In Name, enter Parent collection.
4. Check that Namespace and key shows custom.parent_collection. Shopify fills it in from the name. If it shows something else, change it to custom.parent_collection, or write down what it shows for Step 3.
5. Click Select type and choose Collection. Keep One collection selected, not List of collections.
6. Click Save.

Step 2: Choose a parent for each sub-collection

1. Go to Products > Collections and open a collection that sits inside another one, for example Rain Jackets.
2. Scroll down to Metafields and click Parent collection.
3. Choose the collection directly above it, for example Outerwear, and click Save.
4. Repeat for every sub-collection. Leave Parent collection empty on your top-level collections.

Set only the collection directly above. You don't need to add the grandparents: Radian finds them by following each parent's own Parent collection.

Setting many collections at once

If you have a lot of sub-collections, use the bulk editor instead of opening them one by one:

1. Go to Products > Collections.
2. Select the checkboxes next to the collections you want to set. To select every collection on the page, use the checkbox at the top of the list.
3. Click Bulk edit. A table opens with one row per collection.
4. Click Columns and, under Metafields, select Parent collection. A Parent collection column is added to the table.
5. Click the Parent collection cell of each row and choose its parent. Leave the cell empty for top-level collections.
6. Click Save.

Tips:

• Work one branch at a time, for example select all the collections that belong under Outerwear, so it's easy to see which parent each row needs.
• If Parent collection isn't listed under Columns, the field hasn't been created yet: go back to Step 1.
• Shopify notes that bulk editing metafields in Microsoft Edge can fail because of the browser's URL length limit. If you get an error, try Chrome, Firefox or Safari.
• For hundreds of collections, a spreadsheet import app such as Matrixify can fill in the field from a file.

Step 3: Turn it on in the theme

1. Go to Online Store > Themes and click Customize on your Radian theme.
2. Click the gear icon to open Theme settings, then open Layout.
3. Under Show breadcrumbs, in Parent collection metafield, enter custom.parent_collection (or the namespace and key you wrote down in Step 1).
4. Click Save.

Leaving Parent collection metafield empty turns the feature off: breadcrumbs work as they did before, without parent collections from the field or from the main menu.

Step 4: Check your store

1. Open a sub-collection page, for example Rain Jackets. The breadcrumbs show Home / Clothing / Outerwear / Rain Jackets.
2. Open a product from that collection. The breadcrumbs show the same path followed by the product name.
3. Click each link in the trail to check that it opens the right collection.

Using a field you already have

If your store already has a collection field that points to a parent collection, for example one created by an app or during a migration, you can use it instead of creating a new one. Enter its namespace and key in Parent collection metafield, in the form namespace.key. The field must be of the type Collection (one collection). Lists of collections and text fields with a handle don't work.

Troubleshooting

• Nothing changed. Check that Parent collection metafield is filled in and saved, and that it matches the field's namespace and key exactly, for example custom.parent_collection, without spaces.
• Breadcrumbs don't show at all. Turn on Show breadcrumbs in Theme settings > Layout and Show breadcrumb in the Collection banner or Product section.
• A level is missing. The collection above the missing level has no Parent collection, or its parent isn't published to the Online Store. Open it and set its parent.
• A product shows a different path than expected. The product is in several sub-collections. Product pages use the first of the product's collections that has a parent. To control which one is shown, keep each product in only one sub-collection of each tree.
• "Collections" appears after Home. That's the link to your collections list. Turn off Show collections page in breadcrumbs in Theme settings > Layout to hide it.

Settings reference

Related

• Breadcrumbs
• Layout and page width