Categories Admin

Getting started

In order to get the most out of Categories Uncomplicated, 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.

Get support for Categories Uncomplicated

If you send an email to the address below, you'll first get an automated response asking for specific information about your store. Please reply to that with the requested details so I can respond directly to you.

Email: categories-uncomplicated@zupport.zendesk.com

I always respond. If you don't get a response, please check your SPAM filter carefully as a response is always sent to you. Your replying to that response is crucial to ensure that my next message to you does not get caught in your SPAM filter.

Installing in older (1.0) themes

For older themes only, this app provides a series of embeds, each a small piece of code that you need to include in your theme, to display the categories.

For older 1.0 themes, some coding experience is required. If you're unfamiliar with coding, I strongly recommend avoiding legacy 1.0 themes and sticking with the default 2.0 themes. These legacy themes are based on .liquid files and they are all arranged differently. This video shows how to code in the embed for the old default 1.0 theme, but your theme will not be organised identically.

You should back up your theme before making any changes to it.

Open up your current theme in the Shopify Admin interface. Select the appropriate liquid file for your theme, sometimes collection.liquid, for editing.

Change out the breadcrumb for a category-aware breadcrumb

{% include 'uncomplicated.categories.catbread' %}

Paste the single line of code below into the place in your document where you'd like to show a category list.

{% include 'uncomplicated.categories.catlist' %}

Optionally add the jump-to box into your header

{% include 'uncomplicated.categories.catselect' %}

Show sub-category icons at the top of your collection pages

{% include 'uncomplicated.categories.caticons' %}

You can change the way the category list works, specifically which sub-categories appear when you click a parent category. Please see the list of 'Alternative ways of showing the category list' in the Help section.

Installing in 2.0 themes

This app uses Shopify's Theme editor to give you control over how the category icons look and how they're formatted. We provide this screencast to make your journey through the process really easy.

For the standard 'Dawn' theme and all modern Shopify 2.0 themes like it, please follow the instructions to first install the sub-category icons then the category breadcrumbs using the Shopify Theme Editor videos.

Open up your current theme in the Shopify Theme Editor interface.

Select the 'Default collection' from the template selector. Use the theme editor to place the sub-category icons and category breadcrumbs block into your theme. Optionally repeat the process for the 'Default product'.

Category Breadcrumbs are also included in Categories Uncomplicated. This screencast gives you more information on installing breadcrumbs:

Embed types

Category-based breadcrumb:
{% include 'uncomplicated.categories.catbread' %}

'Jump to' selectbox:
{% include 'uncomplicated.categories.catselect' %}

Full category-list, with current, parent and peer category tagging:
{% include 'uncomplicated.categories.catlist' %}

Sub-category icons:
{% include 'uncomplicated.categories.caticons' %}

Temporarily disable

If you want to temporarily disable the menu, you can remove the embed from your theme's liquid. Simply cut the liquid code you inserted earlier.

Reduce title length on product pages

Sometimes the product title is very long, which can make the breadcrumb seem unwieldy. You can control how the product title gets truncated, i.e. when the characters are curtailed with an ellipsis (...), using an optional variable in the embed that you insert into your theme.

By default, the product title in the breadcrumb will get truncated (with `...`) after 28 characters.
To truncate after a different number of characters, set truncate_limit to another integer value, say 40 character.
To disable truncation altogether and show the full product title, set truncate_limit to -1. For example:

{% include 'uncomplicated.categories.catbread', truncate_limit: 40 %}

Search engine optimisation using JSON-LD

Special markup is included to help search engines understand the structure of your categories. This article from Google explains more about it.

In exceedingly rare circumstance, you might want another app to generate and manage this JSON-LD metadata.

You can disable the addition of JSON-LD using the disable_jsonld flag, for example:

{% include 'uncomplicated.categories.catbread', disable_jsonld:true %}

If you use multiple category embeds, such as the category list, please ensure that you add this disable_jsonld flag to all of them.

Removing 'All products' from non-collection breadcrumbs

It's always better to use collection-based URLs (see above), but you can still modify the breadcrumb using CSS.

If you'd like to hide the 'All products' entry, add this CSS snippet to a theme file (not uncomplicated...css):

a[title="All Products"], span#uncomplicated-category-breadcrumb-top-separator.breadcrumb__allproducts { display: none; }

Controlling guesses for non-collection breadcrumbs for 1.0 themes

Using modern (2.0) themes, guessing for non-collection breadcrumbs is controlled through the settings (see Showing breadcrumbs on product pages). The advice here applies only to older 1.0 themes, and even then only those that use short-form URLs (not recommended).

Shopify provides an unordered list of collections that this product appears in. This app has no control of the order of the list and by default it uses the first entry to base the breadcrumb on. By including a flag in the embed code, you can select to use:

'first': the first possible breadcrumb from that list (default)
'last': the last possible breadcrumb from that list
'generic': create a generic breadcrumb of the form Home > All Products > Product name

{% include 'uncomplicated.categories.catbread', prod_multicat_sel:"last" %}

{% include 'uncomplicated.categories.catbread', prod_multicat_sel:"generic", text_catall:"All Products", link_catall:"/collections/all" %}

Translating parts of the breadcrumb

Most of the breadcrumb is made up of product names that you control through the Shopify product catalogue, with two exceptions:

The breadcrumb root (defaults to 'Home'), which can be configured with:
- text_catroot - the text that's displayed at the root of the breadcrumb
- link_catroot - the link target when users click the root of the breadcrumb
The first and only breadcrumb (defaults to 'All products'), which can be configured with:
- text_catall - the text that's displayed when no collection is included in the URL
- link_catall - the link target when users click the first breadcrumb

For example, a highly customised breadcrumb embed might look like:

{% include 'uncomplicated.categories.catbread', text_catroot:"Root", link_catroot:"/collections/all", text_catall:"My products", link_catall:"/collections/all" %}

If you wish to hide any part of the breadcrumb, you can disable it using display:none in CSS.

Optionally you may like to make the final breadcrumb plain text, rather than a link to the current page unfiltered. To display the final breadcrumb without a link, append show_finalbread_as_textonly to your list of embed arguments:

{% include 'uncomplicated.categories.catbread', show_finalbread_as_textonly: true %}

Alternative ways of showing the category-list

Try these different embeds to control how your category list renders and behaves

{% include 'uncomplicated.categories.catlist', show_class:'show-pathback' %} (This is the default)

{% include 'uncomplicated.categories.catlist', show_class:'show-pathdirect' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-all' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-activedown' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-activedowndirect' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-activeupdown' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-activeupdowndirect' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-peersactiveup' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedown' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedowndirect' %}

{% include 'uncomplicated.categories.catlist', show_class:'show-down' %}

Optional extras for category-list

Remove empty categories (those with no products and no sub-categories)
{% include 'uncomplicated.categories.catlist', show_class:'show-pathback show-hide-catpc-zero' %}

Hide product counts that appear after each category, e.g. (42)
{% include 'uncomplicated.categories.catlist', show_class:'show-pathback show-nopc' %}

Alternative ways of showing the category-icons

You can control the number of columns of icons that are shown across the page (8, 5, 4, 3, 2 or 1). Equally, you can select to have different numbers of columns on different screen widths (large, medium or small) as your customers may be browsing your store on desktop, tablet or mobile devices. The application of these classes is best illustrated by example.

This will show the icons 4-up on large, wide screens (>1024px), 3-up on medium width screens (>640px) and 2-up on narrower screens:
{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up' %} (This is the default)

This will show the icons 8-up on large, wide screens (>1024px), 5-up on medium width screens (>640px) and 1-up on narrower screens:
{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-8up show-medium-5up show-small-1up' %} (This is the default)

Optional extras for category-icons

Remove empty categories (those with no products)
{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-onlyifpc' %}

Remove categories without custom collection images
{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-onlyifimage' %}

Hide product counts that appear after each category, e.g. (42)
{% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-nopc' %}

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.

Links are generated by your theme, so if you click on products 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:

{% include 'uncomplicated.categories.catbread', insert_shortlinkfix:true %}

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. 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:

Default Collection Handle (custom.default_collection_handle) is also still supported. Note that the collection handle is not the name, but the handle, e.g. technology-mobile-phones-smart-phones for this collection. This workaround is not highly recommended because it's manual and fiddly, but it is reliable. The steps are outlined in this screencast:

Frequently Asked Questions and Answers

Can I have the products appear in each leaf category and all the parent categories too?

The answer is yes, but the way Shopify is set up means that you have to tell it explicitly where you want each product to appear.

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.

Categories Uncomplicated