Breadcrumbs

Store Design
,

Topic summary

Main topic: How to add or customize breadcrumb navigation in a Shopify theme.

What was proposed:

  • Steps shared to implement breadcrumbs: create a breadcrumbs snippet, add a new “Breadcrumb Navigation” settings section in settings_schema.json (toggle, background/text colors, font size, padding), and render the snippet in theme.liquid after the header.
  • A video tutorial link was also provided as an alternative resource.

Issue reported:

  • After implementing, breadcrumbs display as “Home > Collections > Products > [product name]” instead of the expected “Home > [collection name] > [product name]”.
  • The dynamic collection (category) name is missing, and generic “Collections” and “Products” segments appear unnecessarily.

Current status:

  • Original poster acknowledged the guidance.
  • Another member requested an easy fix for the incorrect breadcrumb path.
  • No confirmed solution or follow-up fix provided yet; the thread remains open with an unresolved implementation issue (correctly showing the collection/category name).
Summarized with AI on December 18. AI used: gpt-5.
1

I want to add or customize breadcrumbs, please guide me through it. Thank you all!

2

@Wanigajameson

  1. Go to Shopify dashboard → themes → Edit code

  2. Create new snippet breadcrumbs and paste below code.


{% unless template == 'index' or template == 'cart' or template == '404' %}
  {% assign t = template | split: '.' | first %}
  
{% endunless %}
  1. Go to Config → settings_schema.json and paste below code at the top.
{
    "name": "Breadcrumb Navigation",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_breadcrumb_nav",
        "label": "Show breadcrumb navigation",
        "default": true
      },
      {
        "type": "color",
        "id": "breadcrumb_bg_color",
        "label": "Breadcrumb Background Color",
        "default": "#f8f9fa"
      },
      {
        "type": "color",
        "id": "breadcrumb_text_color",
        "label": "Breadcrumb Text Color",
        "default": "#465076"
      },
      {
        "type": "range",
        "id": "font_size",
        "min": 8,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Font size",
        "default": 18
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Padding Top",
        "default": 15
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 15
      }
    ]
  },
  1. Go to theme.liquid and below the header code paste this code:
{%- if settings.show_breadcrumb_nav -%}
    {% render "breadcrumbs" %}
{%- endif -%}

And save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Best regards,

Sohan

1 Like
3

Hi @Wanigajameson , kindly checkout the below given videos:

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

1 Like
4

@Sohan2198 thank you so much!

5

Hello.

Thanks for offering up this solution.

I implemented it but it did not function in the correct manner.

Instead of Home > {{collection name}} > {{product name}}

It does this … Home > Collections > Products > {{product name}}

So basically two unnecessary breadcrumbs and the most important breadcrumb {{category name}} missing altogether.

Is there an easy fix for that please?

Many thanks,

Paul