Breadcrumbs

Store Design
,
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