Help

Modern themes | Vintage themes

Getting started

In order to get the most out of Category Breadcrumbs, you first need to set up your store with Products, Collections and Navigation. This screencast walks you through the process, including how to set up the menu items that form your categories.

Installing Category Breadcrumbs

This app uses Shopify’s Theme editor to give you control over how the breadcrumb looks and where it’s positioned. We provide this screencast to make your journey through the process straight-forward:

1. Open up your current theme in the Shopify Theme Editor interface.
2. Select the ‘Default collection’ from the template selector.
3. Use the theme editor to place the category breadcrumbs block (embed) into your theme.
4. Optionally repeat the process for the ‘Default product’.

Showing breadcrumbs on product pages

You can also show category breadcrumbs on your product pages. Because each product could belong to multiple collections, we need a way of identifying which collection you want the product to appear in and therefore which breadcrumb to display. This best way to do this is using long-form URLs:

• Links of the form /collection/collection_name/product/product_name, like this one will show the correct breadcrumb.
• Links without collection, or short-form URLs like this one, don’t indicate which collection you’re in so force Shopify to guess. There’s an unsubstantiated rumour that short-form URLs are better for SEO, because they avoid duplicate content, but that’s better done using long-form URLs with rel=”canonical” as Shopify recommends in this Best Practices post.

Coming from collection pages

Links in collections are generated by your theme, so if you click on a product in a collection and browse to a product page with a short-form URL, that problem is created by your theme. The best place to fix it is the theme, but you can use this short-form link fix in your embed as a poorer alternative. It tries as best it can to detect short-form links on collection pages and automatically rewrite them. This screencast explains:

The short-form link fix is available as a tick-box option for 2.0 themes in the Shopify Theme Editor, under Category Breadcrumb settings on the Default Collection page.

Coming from other pages, like Shopify search

Even with this fix, it’s still possible get to short-form URLs and on those pages you need to display a breadcrumb. By default, Shopify makes available an unordered list of collections as metafields, which this app uses to try to guess the right breadcrumb. Remember, if using short-form URLs, a product can only have one breadcrumb. Most of the time, the default breadcrumb for a product is the one that belongs to the Most specific collection (the default), though you can tell it to guess differently using the Category Breadcrumbs settings on the Default Product page. Now this is a guess, it won’t be the right collection every time, but it’s a workaround if you have a theme that does not produce long-form URLs.

Finally if you want to choose a different default parent collection for specific products, say where the guess isn’t the one you want, and your theme produces short-form URLs, you can set a custom Product metafield for Default Collection Reference (called custom.default_collection_reference) on each Product that references a single Collection:

How to customise the look of your breadcrumb

The look of the breadcrumb is entirely controlled by your theme. The colours or styles may vary in different parts of the template, and across different templates, but they are all controlled by the current theme.

The easiest way to change those styles is using the Category Breadcrumb settings in the Shopify Theme Editor. However if you want more control, you can override your theme’s styles and the Category Breadcrumb settings using a Custom Liquid block. This screencast explains the process step-by-step:

For example, if you wanted the font to be bold, black and not underlined, you might use this custom code:

<style>
    nav.category-breadcrumbs a {
        font-weight: bold;
        color: black;
        text-decoration: none;
    }
</style>

Creating navigation more than 3 levels deep

Shopify navigation supports two ways of nesting menu items below menu items:

• The Shopify Navigation admin interface allows you to create a hierarchy of menu items, but only 3 levels deep.
• Traditionally, menus were nested by creating a menu item with a name that matched another menu. This sort of legacy nesting is still supported.

While the modern Shopify Navigation admin interface only supports 3 levels of navigation, you can still create more than 3 levels of navigation using legacy nesting. It’s crucial to avoid duplicates category names or category URLs, especially if using legacy nesting, because Shopify cannot tell the difference between two menu items with the same name or URL. This video gives a full explanation:

Placing products in leaf categories and parents categories

You can have products appear in both leaf categories (most specific) and their parent categories, but the way Shopify is set up means that you have to tell it explicitly where you want each product to appear. That means adding a product to a leaf collection and its parent collections. This is best achieved using tags, such that:

• You only have to tag a product once
• Each collection defines its contents based on an ever broader set of tags

Each link in the category tree can only go to one place. Each one shows a collection. What products you put in that collection is within your control, so by arranging your products into multiple collections you can have them appear all through the category tree.

If you have a category tree that looks like this, from our demo store:

• Technology
  • Computers
    • Desktops

You could place the Lenovo Desktop PC in just one collection, as here.

Alternatively you could place it in the Desktops collection and the Computers collection and the Technology collection. That’s not the way I’ve implemented it in my demo store, but it is possible.

Using tagging, you could tag the Lenovo Desktop PC as “Desktop PC”, then create collections that use that tag:

• Technology, collection tags = [“Desktop PC”, “Laptop PC”, “Tablet”, “Server”, “Smartphone”, “Smart watch”, “Printers”…]
  • Computers, collection tags = [“Desktop PC”, “Laptop PC”, “Tablet”, “Server”]
    • Desktops, collection tags = [“Desktop PC”]

This is completely fine, but you can make it more streamlined by tagging products with their parents directly. For the Lenovo Desktop PC, you could tag it with “Desktops” and “Computers” and “Technology”. That means the collection tags are simpler to configure:

• Technology, collection tags = [“Technology”]
  • Computers, collection tags = [“Computers”]
    • Desktops, collection tags = [“Desktop PC”]