Vintage Themes

Modern themes | Vintage themes

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. Some coding experience is required.

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

If you’re unfamiliar with coding, I strongly recommend avoiding legacy or vintage 1.0 themes and sticking with the default 2.0 themes, which allows you to use the Shopify Theme Editor. 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.

Open up your current theme in the Shopify Theme Editor interface.
Select the appropriate liquid file for your theme, sometimes called collection.liquid, for editing.
Change out the existing breadcrumb for this category-aware breadcrumb code embed:
```
  &#123;% include 'uncomplicated.categories.catbread' %}
```

Show sub-category icons on your collection pages:

  &#123;% 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’ below.

Embed types

This is the full list of different embed types available to vintage or legacy themes. Please be aware that not all themes support all embed types:

Category-based breadcrumb:

&#123;% include 'uncomplicated.categories.catbread' %}

‘Jump to’ selectbox:

&#123;% include 'uncomplicated.categories.catselect' %}

Full category-list, with current, parent and peer category tagging:

&#123;% include 'uncomplicated.categories.catlist' %}

Sub-category icons:

&#123;% include 'uncomplicated.categories.caticons' %}

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

&#123;% include 'uncomplicated.categories.catlist', show_class:'show-pathback' %} (This is the default)
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-pathdirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-all' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activedown' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activedowndirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activeupdown' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-activeupdowndirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-peersactiveup' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedown' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-peersactivedowndirect' %}
&#123;% include 'uncomplicated.categories.catlist', show_class:'show-down' %}

Remove empty categories (those with no products and no sub-categories):

&#123;% include 'uncomplicated.categories.catlist', show_class:'show-pathback show-hide-catpc-zero' %}

Hide product counts that appear after each category, e.g. (42):

&#123;% 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. These examples are the same as the default, but can be customised to your needs.

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:

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up' %}

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:

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-8up show-medium-5up show-small-1up' %}

Optional extras for category-icons

Remove empty categories (those with no products)

&#123;% 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

&#123;% 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)

&#123;% include 'uncomplicated.categories.caticons', show_class:'show-downdirect show-large-4up show-medium-3up show-small-2up show-nopc' %}

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.

You can override your theme’s styles by placing CSS into one of your theme’s .scss or .css files. Please do not change the uncomplicated…css files as they are dynamically regenerated.

For example, if you want to adjust the spacing between the separators (‘>’), you might add this CSS to your theme:

span.breadcrumb__sep {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

Temporarily disable or uninstall

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.

Alternatively you can ‘comment out’ the code using liquid comments.

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.
```
  &#123;% include 'uncomplicated.categories.catbread', truncate_limit: 40 %}
```
To disable truncation altogether and show the full product title, set truncate_limit to -1. For example:
```
  &#123;% include 'uncomplicated.categories.catbread', truncate_limit: -1 %}
```

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:

&#123;% 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

The ‘All products’ breadcrumb shows up on non-collection breadcrumbs for some products. The best way to remove it, is ensure that all your products are in collections that are in your category hierarchy.

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 the ‘Showing breadcrumbs on product pages’ on the main Help page).

The advice here applies only to older 1.0 themes, and even then only those that use short-form URLs (not recommended).

For each product, 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

  &#123;% include 'uncomplicated.categories.catbread', prod_multicat_sel:"last" %}

‘generic’: create a generic breadcrumb of the form Home > All Products > Product name

  &#123;% include 'uncomplicated.categories.catbread', prod_multicat_sel:"generic", text_catall:"All my products", link_catall:"/collections/all" %}

Again 2.0 themes are a better option, because automated translation using Shopify’s “Translate and Adapt” is built-in.

For older themes, 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:

&#123;% 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:

&#123;% include 'uncomplicated.categories.catbread', show_finalbread_as_textonly: true %}

Installing in older (1.0) themes

More video to help you get set up

Embed types

Alternative ways of showing the category-list

Optional extras for category-list