Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Breadcrumbs

Solved

Breadcrumbs

MudassirMehmood
Excursionist
28 1 2


Dear Shopify Community,

I hope this message finds you well.

I am currently working on adding multilevel breadcrumbs to my Shopify store using the Ella theme. However, I've encountered two specific issues related to the implementation. Below are the details of the errors I'm facing:

Color Scheme Selection:

Error Message: "Unable to display color schemes. Schemes must be defined in settings_data and settings_schema."
It seems that the color scheme options are not being recognized due to a missing definition.
Padding Translation:

Error Message: "Missing translation: t:sections.all.padding.section_padding_heading is not present in any of the ["en"] schema locale files."
This indicates that there is a missing translation entry that needs to be addressed for proper functionality.


Could you please provide guidance on how to resolve these errors? Any assistance would be greatly appreciated.

Thank you for your help.

Best regards,
Mudassir Mehmood


Here the my Breadcrumbs.liquid


{% comment %}
Breadcrumbs Section by The Prompted
March 2024
<https://www.youtube.com/@theprompted>
{% endcomment %}

{%- if section.settings.breadcrumbs_enabled -%}
{%- unless template == 'index' or template == 'cart' or template == '404' -%}

{% assign breadcrumbs_menu = linklists[section.settings.breadcrumbs_menu_definition].links %}
{% assign max_depth = 0 %}
{% if section.settings.prefer_shortest_path %}
{% assign previous_max_depth = 9 %}
{% else %}
{% assign previous_max_depth = 0 %}
{% endif %}
{% assign current_template_type = template | split: '.' | first %}
{% assign current_template = nil %}
{% assign current_template_parents = nil %}
{% assign link_found = false %}
{% assign link_depth1 = nil %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}

{% comment %}Determine page identifier based on page type{% endcomment %}
{% case current_template_type %}
{% when 'product' %}
{% assign current_template = product %}
{% assign current_template_parents = product.collections %}
{% when 'collection' %}
{% assign current_template = collection %}
{% when 'page' %}
{% assign current_template = page %}
{% when 'blog' %}
{% assign current_template = blog %}
{% when 'article' %}
{% assign current_template = article %}
{% assign article_handle_parts = article.handle | split: '/' %}
{% assign blog_handle_extracted = article_handle_parts[0] %}
{% assign template_type_other = true %}
{% else %}
{% comment %}
For all Other template types:
- policies (no actual template)
- search
- list-collections
Use built-in variables request.path and page_title
{% endcomment %}
{% assign template_type_other = true %}
{% endcase %}

{% for link in breadcrumbs_menu %}
{% assign current_depth = 1 %}
{% if link.object %}
{% if link.object.handle and current_template.handle and link.object.handle == current_template.handle %}
{% if link_found == false %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = nil %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% elsif current_template_parents %}
{% for parent in current_template_parents %}
{% if link.object.handle and parent.handle and link.object.handle == parent.handle %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% break %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% elsif template_type_other %}
{% if current_template_type == 'article' %}
{% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% else %}
{% if link.object.title == page_title %}
{% if link_found == false %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = nil %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if link.links %}
{% for childlink in link.links %}
{% assign current_depth = 2 %}
{% if childlink.object %}
{% if childlink.object.handle and current_template.handle and childlink.object.handle == current_template.handle %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% elsif current_template_parents %}
{% for parent in current_template_parents %}
{% if childlink.object.handle and parent.handle and childlink.object.handle == parent.handle %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% break %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% elsif template_type_other %}
{% if current_template_type == 'article' %}
{% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% else %}
{% if link.object.title == page_title %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if childlink.links %}
{% for grandchildlink in childlink.links %}
{% if section.settings.prefer_shortest_path and link_found %}{% break %}{% endif %}
{% assign current_depth = 3 %}
{% if grandchildlink.object.handle and current_template.handle and grandchildlink.object.handle == current_template.handle %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% elsif current_template_parents %}
{% for parent in current_template_parents %}
{% if grandchildlink.object.handle and parent.handle and grandchildlink.object.handle == parent.handle %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% break %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% elsif template_type_other %}
{% if current_template_type == 'article' %}
{% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% else %}
{% if link.object.title == page_title %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}

<div class="page-width gradient color-{{ section.settings.color_scheme }}">
<nav aria-label="Breadcrumb" class="breadcrumbs ">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ request.locale.root_url }}">Home</a></li>

{% if link_depth1 %}
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ link_depth1.url }}">{{ link_depth1.title }}</a></li>
{% endif %}

{% if link_depth2 %}
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ link_depth2.url }}">{{ link_depth2.title }}</a></li>
{% endif %}

{% if link_depth3 %}
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ link_depth3.url }}">{{ link_depth3.title }}</a></li>
{% endif %}

{% if template_type_other %}
<li class="breadcrumbs__item" aria-current="page">{{ page_title }}</li>
{% else %}
<li class="breadcrumbs__item" aria-current="page">{{ current_template.title }}</li>
{% endif %}
</ol>
</nav>
{% if section.settings.enable_divider %}
<div id="breadcrumbs-divider"></div>
{% endif %}
</div>

{% endunless %}
{%- endif -%}

{% schema %}

{
"name": "Breadcrumbs",
"tag": "section",
"class": "section",
"settings": [

{
"type": "checkbox",
"id": "breadcrumbs_enabled",
"label": "Enable Breadcrumbs",
"default": true
},


{
"type": "link_list",
"id": "breadcrumbs_menu_definition",
"default": "main-menu",
"label": "Breadcrumbs Menu Definition"
},

{
"type": "checkbox",
"id": "prefer_shortest_path",
"label": "Use Shortest Path",
"default": false
},
{
"type": "select",
"id": "separator_shape",
"label": "Breadcrumb Separator Shape",
"options": [
{
"value": "triangle",
"label": "Triangle ( > )"
},
{
"value": "slash",
"label": "Slash ( / )"
}
],
"default": "triangle"
},
{
"type": "range",
"id": "font_size",
"label": "Font Size",
"min": 10,
"max": 20,
"step": 1,
"default": 14,
"unit": "px"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},

{
"type": "checkbox",
"id": "enable_divider",
"label": "Enable Divider",
"default": false
},
{
"type": "color",
"id": "divider_color",
"label": "Divider Color",
"default": "#ccc"
},

{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 12
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 12
}
],
"presets": [
{
"name": "breadcrumbs"
}
]
}

{% endschema %}

<style>

.breadcrumbs {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}

.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
font-size: {{ section.settings.font_size }}px;
}

.breadcrumbs__item {
display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
content: '';
display: inline-block;
margin: 0 .20em;
position: relative;
vertical-align: middle;
{% if section.settings.separator_shape == 'triangle' %}
border-style: solid;
border-width: .10em .10em 0 0;
height: .30em;
width: .30em;
transform: rotate(45deg);
top: -0.1em;
{% elsif section.settings.separator_shape == 'slash' %}
content: '/';
margin-left: .5em;
{% endif %}
}

.breadcrumbs__link {
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
text-decoration: none;
text-underline-offset: 0.3rem;
color: rgb(var(--color-text));
/*font-size: 1.4rem;*/
font-family: inherit;
}

.breadcrumbs__link:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
color: rgb(var(--color-foreground));
}

#breadcrumbs-divider {
display: block;
height: 1px;
background-color: {{ section.settings.divider_color }};
}

</style>

 

 

Here the Error

Screenshot 2024-10-12 150635.png

Here the Correct Form


Accepted Solutions (3)

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi @MudassirMehmood ,

May I suggest code below:

{% comment %}
  Breadcrumbs Section by The Prompted
  March 2024
  <https://www.youtube.com/@theprompted>
{% endcomment %}

{%- if section.settings.breadcrumbs_enabled -%}
  {%- unless template == 'index' or template == 'cart' or template == '404' -%}
    {% assign breadcrumbs_menu = linklists[section.settings.breadcrumbs_menu_definition].links %}
    {% assign max_depth = 0 %}
    {% if section.settings.prefer_shortest_path %}
      {% assign previous_max_depth = 9 %}
    {% else %}
      {% assign previous_max_depth = 0 %}
    {% endif %}
    {% assign current_template_type = template | split: '.' | first %}
    {% assign current_template = null %}
    {% assign current_template_parents = null %}
    {% assign link_found = false %}
    {% assign link_depth1 = null %}
    {% assign link_depth2 = null %}
    {% assign link_depth3 = null %}

    {% comment %}Determine page identifier based on page type{% endcomment %}
    {% case current_template_type %}
      {% when 'product' %}
        {% assign current_template = product %}
        {% assign current_template_parents = product.collections %}
      {% when 'collection' %}
        {% assign current_template = collection %}
      {% when 'page' %}
        {% assign current_template = page %}
      {% when 'blog' %}
        {% assign current_template = blog %}
      {% when 'article' %}
        {% assign current_template = article %}
        {% assign article_handle_parts = article.handle | split: '/' %}
        {% assign blog_handle_extracted = article_handle_parts[0] %}
        {% assign template_type_other = true %}
      {% else %}
        {% comment %}
          For all Other template types:
          - policies (no actual template)
          - search
          - list-collections
          Use built-in variables request.path and page_title
        {% endcomment %}
        {% assign template_type_other = true %}
    {% endcase %}

    {% for link in breadcrumbs_menu %}
      {% assign current_depth = 1 %}
      {% if link.object %}
        {% if link.object.handle and current_template.handle and link.object.handle == current_template.handle %}
          {% if link_found == false %}
            {% assign max_depth = current_depth %}
            {% assign previous_max_depth = max_depth %}
            {% assign link_found = true %}
          {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
            {% assign link_depth1 = null %}
            {% assign link_depth2 = null %}
            {% assign link_depth3 = null %}
            {% assign max_depth = current_depth %}
            {% assign previous_max_depth = max_depth %}
          {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
            {% assign max_depth = current_depth %}
            {% assign previous_max_depth = max_depth %}
          {% endif %}
        {% elsif current_template_parents %}
          {% for parent in current_template_parents %}
            {% if link.object.handle and parent.handle and link.object.handle == parent.handle %}
              {% assign current_depth = current_depth | plus: 1 %}
              {% if link_found == false %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
                {% break %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% break %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% break %}
              {% endif %}
            {% endif %}
          {% endfor %}
        {% elsif template_type_other %}
          {% if current_template_type == 'article' %}
            {% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
              {% assign current_depth = current_depth | plus: 1 %}
              {% if link_found == false %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% endif %}
            {% endif %}
          {% else %}
            {% if link.object.title == page_title %}
              {% if link_found == false %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = null %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% endif %}
            {% endif %}
          {% endif %}
        {% endif %}
      {% endif %}
      {% if link.links %}
        {% for childlink in link.links %}
          {% assign current_depth = 2 %}
          {% if childlink.object %}
            {% if childlink.object.handle
              and current_template.handle
              and childlink.object.handle == current_template.handle
            %}
              {% if link_found == false %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% endif %}
            {% elsif current_template_parents %}
              {% for parent in current_template_parents %}
                {% if childlink.object.handle and parent.handle and childlink.object.handle == parent.handle %}
                  {% assign current_depth = current_depth | plus: 1 %}
                  {% if link_found == false %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% assign link_found = true %}
                    {% break %}
                  {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign link_depth3 = null %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% break %}
                  {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% break %}
                  {% endif %}
                {% endif %}
              {% endfor %}
            {% elsif template_type_other %}
              {% if current_template_type == 'article' %}
                {% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
                  {% assign current_depth = current_depth | plus: 1 %}
                  {% if link_found == false %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% assign link_found = true %}
                  {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign link_depth3 = null %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% endif %}
                {% endif %}
              {% else %}
                {% if link.object.title == page_title %}
                  {% if link_found == false %}
                    {% assign link_depth1 = link %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% assign link_found = true %}
                  {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = null %}
                    {% assign link_depth3 = null %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% endif %}
                {% endif %}
              {% endif %}
            {% endif %}
          {% endif %}
          {% if childlink.links %}
            {% for grandchildlink in childlink.links %}
              {% if section.settings.prefer_shortest_path and link_found %}{% break %}{% endif %}
              {% assign current_depth = 3 %}
              {% if grandchildlink.object.handle
                and current_template.handle
                and grandchildlink.object.handle == current_template.handle
              %}
                {% if link_found == false %}
                  {% assign link_depth1 = link %}
                  {% assign link_depth2 = childlink %}
                  {% assign max_depth = current_depth %}
                  {% assign previous_max_depth = max_depth %}
                  {% assign link_found = true %}
                {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                  {% assign link_depth1 = link %}
                  {% assign link_depth2 = childlink %}
                  {% assign link_depth3 = null %}
                  {% assign max_depth = current_depth %}
                  {% assign previous_max_depth = max_depth %}
                {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                  {% assign link_depth1 = link %}
                  {% assign link_depth2 = childlink %}
                  {% assign max_depth = current_depth %}
                  {% assign previous_max_depth = max_depth %}
                {% endif %}
              {% elsif current_template_parents %}
                {% for parent in current_template_parents %}
                  {% if grandchildlink.object.handle
                    and parent.handle
                    and grandchildlink.object.handle == parent.handle
                  %}
                    {% assign current_depth = current_depth | plus: 1 %}
                    {% if link_found == false %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% assign link_found = true %}
                      {% break %}
                    {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% break %}
                    {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% break %}
                    {% endif %}
                  {% endif %}
                {% endfor %}
              {% elsif template_type_other %}
                {% if current_template_type == 'article' %}
                  {% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
                    {% assign current_depth = current_depth | plus: 1 %}
                    {% if link_found == false %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% assign link_found = true %}
                    {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% endif %}
                  {% endif %}
                {% else %}
                  {% if link.object.title == page_title %}
                    {% if link_found == false %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% assign link_found = true %}
                    {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = null %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% endif %}
                  {% endif %}
                {% endif %}
              {% endif %}
            {% endfor %}
          {% endif %}
        {% endfor %}
      {% endif %}
    {% endfor %}

    <div class="page-width gradient">
      <nav aria-label="Breadcrumb" class="breadcrumbs ">
        <ol class="breadcrumbs__list">
          <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ request.locale.root_url }}">Home</a></li>

          {% if link_depth1 %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ link_depth1.url }}">{{ link_depth1.title }}</a>
            </li>
          {% endif %}

          {% if link_depth2 %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ link_depth2.url }}">{{ link_depth2.title }}</a>
            </li>
          {% endif %}

          {% if link_depth3 %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ link_depth3.url }}">{{ link_depth3.title }}</a>
            </li>
          {% endif %}

          {% if template_type_other %}
            <li class="breadcrumbs__item" aria-current="page">{{ page_title }}</li>
          {% else %}
            <li class="breadcrumbs__item" aria-current="page">{{ current_template.title }}</li>
          {% endif %}
        </ol>
      </nav>
      {% if section.settings.enable_divider %}
        <div id="breadcrumbs-divider"></div>
      {% endif %}
    </div>
  {% endunless %}
{%- endif -%}

{% schema %}
{
"name": "Breadcrumbs",
"tag": "section",
"class": "section",
"settings": [

{
	"type": "checkbox",
	"id": "breadcrumbs_enabled",
	"label": "Enable Breadcrumbs",
	"default": true
},
{
	"type": "link_list",
	"id": "breadcrumbs_menu_definition",
	"default": "main-menu",
	"label": "Breadcrumbs Menu Definition"
},
{
	"type": "checkbox",
	"id": "prefer_shortest_path",
	"label": "Use Shortest Path",
	"default": false
},
{
"type": "select",
"id": "separator_shape",
"label": "Breadcrumb Separator Shape",
"options": [
	{
		"value": "triangle",
		"label": "Triangle ( > )"
	},
	{
		"value": "slash",
		"label": "Slash ( / )"
	}
	],
		"default": "triangle"
	},
	{
		"type": "range",
		"id": "font_size",
		"label": "Font Size",
		"min": 10,
		"max": 20,
		"step": 1,
		"default": 14,
		"unit": "px"
	},
	{
		"type": "checkbox",
		"id": "enable_divider",
		"label": "Enable Divider",
		"default": false
	},
	{
		"type": "color",
		"id": "divider_color",
		"label": "Divider Color",
		"default": "#ccc"
	},

	{
		"type": "header",
		"content": "t:sections.all.padding.section_padding_heading"
	},
	{
		"type": "range",
		"id": "padding_top",
		"min": 0,
		"max": 50,
		"step": 2,
		"unit": "px",
		"label": "Padding Top",
		"default": 12
	},
	{
		"type": "range",
		"id": "padding_bottom",
		"min": 0,
		"max": 50,
		"step": 2,
		"unit": "px",
		"label": "Padding Bottom",
		"default": 12
	}
],

	"presets": [
		{
			"name": "breadcrumbs"
		}
	]
}
{% endschema %}

<style>
  .breadcrumbs {
  	padding-top: {{ section.settings.padding_top }}px;
  	padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  .breadcrumbs__list {
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	font-size: {{ section.settings.font_size }}px;
  }

  .breadcrumbs__item {
  	display: inline-block;
  }

  .breadcrumbs__item:not(:last-child):after {
  content: '';
  display: inline-block;
  margin: 0 .20em;
  position: relative;
  vertical-align: middle;
  {% if section.settings.separator_shape == 'triangle' %}
  	border-style: solid;
  	border-width: .10em .10em 0 0;
  	height: .30em;
  	width: .30em;
  	transform: rotate(45deg);
  	top: -0.1em;
  {% elsif section.settings.separator_shape == 'slash' %}
  	content: '/';
  	margin-left: .5em;
  {% endif %}
  }

  .breadcrumbs__link {
  	cursor: pointer;
  	display: inline-block;
  	border: none;
  	box-shadow: none;
  	text-decoration: none;
  	text-underline-offset: 0.3rem;
  	color: rgb(var(--color-text));
  	/*font-size: 1.4rem;*/
  	font-family: inherit;
  }

  .breadcrumbs__link:hover {
  	text-decoration: underline;
  	text-underline-offset: 0.3rem;
  	color: rgb(var(--color-foreground));
  }

  #breadcrumbs-divider {
  	display: block;
  	height: 1px;
  	background-color: {{ section.settings.divider_color }};
  }
</style>
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi @MudassirMehmood ,

 

In the code has included it. You can go to customize to change.

This is schema settings.

EBOOST_4-1729083650877.png

You can change here

EBOOST_5-1729083703696.png

 

 

The case that you would like to change default menu you can follow steps below:

 

1. Go to Online Store -> Navigation -> Breadcrumbs menu

EBOOST_1-1729083389226.png

 

2. Check handle of this menu

EBOOST_2-1729083407639.png

3. In code that I suggested previous post. Replace "main-menu" with this hanle.

EBOOST_3-1729083500836.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi,

Sorry.  default only accept main-menu and footer

https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#link_list

EBOOST_0-1729090882903.png

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 6 (6)

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi @MudassirMehmood ,

May I suggest code below:

{% comment %}
  Breadcrumbs Section by The Prompted
  March 2024
  <https://www.youtube.com/@theprompted>
{% endcomment %}

{%- if section.settings.breadcrumbs_enabled -%}
  {%- unless template == 'index' or template == 'cart' or template == '404' -%}
    {% assign breadcrumbs_menu = linklists[section.settings.breadcrumbs_menu_definition].links %}
    {% assign max_depth = 0 %}
    {% if section.settings.prefer_shortest_path %}
      {% assign previous_max_depth = 9 %}
    {% else %}
      {% assign previous_max_depth = 0 %}
    {% endif %}
    {% assign current_template_type = template | split: '.' | first %}
    {% assign current_template = null %}
    {% assign current_template_parents = null %}
    {% assign link_found = false %}
    {% assign link_depth1 = null %}
    {% assign link_depth2 = null %}
    {% assign link_depth3 = null %}

    {% comment %}Determine page identifier based on page type{% endcomment %}
    {% case current_template_type %}
      {% when 'product' %}
        {% assign current_template = product %}
        {% assign current_template_parents = product.collections %}
      {% when 'collection' %}
        {% assign current_template = collection %}
      {% when 'page' %}
        {% assign current_template = page %}
      {% when 'blog' %}
        {% assign current_template = blog %}
      {% when 'article' %}
        {% assign current_template = article %}
        {% assign article_handle_parts = article.handle | split: '/' %}
        {% assign blog_handle_extracted = article_handle_parts[0] %}
        {% assign template_type_other = true %}
      {% else %}
        {% comment %}
          For all Other template types:
          - policies (no actual template)
          - search
          - list-collections
          Use built-in variables request.path and page_title
        {% endcomment %}
        {% assign template_type_other = true %}
    {% endcase %}

    {% for link in breadcrumbs_menu %}
      {% assign current_depth = 1 %}
      {% if link.object %}
        {% if link.object.handle and current_template.handle and link.object.handle == current_template.handle %}
          {% if link_found == false %}
            {% assign max_depth = current_depth %}
            {% assign previous_max_depth = max_depth %}
            {% assign link_found = true %}
          {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
            {% assign link_depth1 = null %}
            {% assign link_depth2 = null %}
            {% assign link_depth3 = null %}
            {% assign max_depth = current_depth %}
            {% assign previous_max_depth = max_depth %}
          {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
            {% assign max_depth = current_depth %}
            {% assign previous_max_depth = max_depth %}
          {% endif %}
        {% elsif current_template_parents %}
          {% for parent in current_template_parents %}
            {% if link.object.handle and parent.handle and link.object.handle == parent.handle %}
              {% assign current_depth = current_depth | plus: 1 %}
              {% if link_found == false %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
                {% break %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% break %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% break %}
              {% endif %}
            {% endif %}
          {% endfor %}
        {% elsif template_type_other %}
          {% if current_template_type == 'article' %}
            {% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
              {% assign current_depth = current_depth | plus: 1 %}
              {% if link_found == false %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% endif %}
            {% endif %}
          {% else %}
            {% if link.object.title == page_title %}
              {% if link_found == false %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = null %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% endif %}
            {% endif %}
          {% endif %}
        {% endif %}
      {% endif %}
      {% if link.links %}
        {% for childlink in link.links %}
          {% assign current_depth = 2 %}
          {% if childlink.object %}
            {% if childlink.object.handle
              and current_template.handle
              and childlink.object.handle == current_template.handle
            %}
              {% if link_found == false %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
                {% assign link_found = true %}
              {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign link_depth2 = null %}
                {% assign link_depth3 = null %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                {% assign link_depth1 = link %}
                {% assign max_depth = current_depth %}
                {% assign previous_max_depth = max_depth %}
              {% endif %}
            {% elsif current_template_parents %}
              {% for parent in current_template_parents %}
                {% if childlink.object.handle and parent.handle and childlink.object.handle == parent.handle %}
                  {% assign current_depth = current_depth | plus: 1 %}
                  {% if link_found == false %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% assign link_found = true %}
                    {% break %}
                  {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign link_depth3 = null %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% break %}
                  {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% break %}
                  {% endif %}
                {% endif %}
              {% endfor %}
            {% elsif template_type_other %}
              {% if current_template_type == 'article' %}
                {% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
                  {% assign current_depth = current_depth | plus: 1 %}
                  {% if link_found == false %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% assign link_found = true %}
                  {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign link_depth3 = null %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = childlink %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% endif %}
                {% endif %}
              {% else %}
                {% if link.object.title == page_title %}
                  {% if link_found == false %}
                    {% assign link_depth1 = link %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                    {% assign link_found = true %}
                  {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign link_depth2 = null %}
                    {% assign link_depth3 = null %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                    {% assign link_depth1 = link %}
                    {% assign max_depth = current_depth %}
                    {% assign previous_max_depth = max_depth %}
                  {% endif %}
                {% endif %}
              {% endif %}
            {% endif %}
          {% endif %}
          {% if childlink.links %}
            {% for grandchildlink in childlink.links %}
              {% if section.settings.prefer_shortest_path and link_found %}{% break %}{% endif %}
              {% assign current_depth = 3 %}
              {% if grandchildlink.object.handle
                and current_template.handle
                and grandchildlink.object.handle == current_template.handle
              %}
                {% if link_found == false %}
                  {% assign link_depth1 = link %}
                  {% assign link_depth2 = childlink %}
                  {% assign max_depth = current_depth %}
                  {% assign previous_max_depth = max_depth %}
                  {% assign link_found = true %}
                {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                  {% assign link_depth1 = link %}
                  {% assign link_depth2 = childlink %}
                  {% assign link_depth3 = null %}
                  {% assign max_depth = current_depth %}
                  {% assign previous_max_depth = max_depth %}
                {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                  {% assign link_depth1 = link %}
                  {% assign link_depth2 = childlink %}
                  {% assign max_depth = current_depth %}
                  {% assign previous_max_depth = max_depth %}
                {% endif %}
              {% elsif current_template_parents %}
                {% for parent in current_template_parents %}
                  {% if grandchildlink.object.handle
                    and parent.handle
                    and grandchildlink.object.handle == parent.handle
                  %}
                    {% assign current_depth = current_depth | plus: 1 %}
                    {% if link_found == false %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% assign link_found = true %}
                      {% break %}
                    {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% break %}
                    {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% break %}
                    {% endif %}
                  {% endif %}
                {% endfor %}
              {% elsif template_type_other %}
                {% if current_template_type == 'article' %}
                  {% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
                    {% assign current_depth = current_depth | plus: 1 %}
                    {% if link_found == false %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% assign link_found = true %}
                    {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = grandchildlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% endif %}
                  {% endif %}
                {% else %}
                  {% if link.object.title == page_title %}
                    {% if link_found == false %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                      {% assign link_found = true %}
                    {% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign link_depth3 = null %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
                      {% assign link_depth1 = link %}
                      {% assign link_depth2 = childlink %}
                      {% assign max_depth = current_depth %}
                      {% assign previous_max_depth = max_depth %}
                    {% endif %}
                  {% endif %}
                {% endif %}
              {% endif %}
            {% endfor %}
          {% endif %}
        {% endfor %}
      {% endif %}
    {% endfor %}

    <div class="page-width gradient">
      <nav aria-label="Breadcrumb" class="breadcrumbs ">
        <ol class="breadcrumbs__list">
          <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ request.locale.root_url }}">Home</a></li>

          {% if link_depth1 %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ link_depth1.url }}">{{ link_depth1.title }}</a>
            </li>
          {% endif %}

          {% if link_depth2 %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ link_depth2.url }}">{{ link_depth2.title }}</a>
            </li>
          {% endif %}

          {% if link_depth3 %}
            <li class="breadcrumbs__item">
              <a class="breadcrumbs__link" href="{{ link_depth3.url }}">{{ link_depth3.title }}</a>
            </li>
          {% endif %}

          {% if template_type_other %}
            <li class="breadcrumbs__item" aria-current="page">{{ page_title }}</li>
          {% else %}
            <li class="breadcrumbs__item" aria-current="page">{{ current_template.title }}</li>
          {% endif %}
        </ol>
      </nav>
      {% if section.settings.enable_divider %}
        <div id="breadcrumbs-divider"></div>
      {% endif %}
    </div>
  {% endunless %}
{%- endif -%}

{% schema %}
{
"name": "Breadcrumbs",
"tag": "section",
"class": "section",
"settings": [

{
	"type": "checkbox",
	"id": "breadcrumbs_enabled",
	"label": "Enable Breadcrumbs",
	"default": true
},
{
	"type": "link_list",
	"id": "breadcrumbs_menu_definition",
	"default": "main-menu",
	"label": "Breadcrumbs Menu Definition"
},
{
	"type": "checkbox",
	"id": "prefer_shortest_path",
	"label": "Use Shortest Path",
	"default": false
},
{
"type": "select",
"id": "separator_shape",
"label": "Breadcrumb Separator Shape",
"options": [
	{
		"value": "triangle",
		"label": "Triangle ( > )"
	},
	{
		"value": "slash",
		"label": "Slash ( / )"
	}
	],
		"default": "triangle"
	},
	{
		"type": "range",
		"id": "font_size",
		"label": "Font Size",
		"min": 10,
		"max": 20,
		"step": 1,
		"default": 14,
		"unit": "px"
	},
	{
		"type": "checkbox",
		"id": "enable_divider",
		"label": "Enable Divider",
		"default": false
	},
	{
		"type": "color",
		"id": "divider_color",
		"label": "Divider Color",
		"default": "#ccc"
	},

	{
		"type": "header",
		"content": "t:sections.all.padding.section_padding_heading"
	},
	{
		"type": "range",
		"id": "padding_top",
		"min": 0,
		"max": 50,
		"step": 2,
		"unit": "px",
		"label": "Padding Top",
		"default": 12
	},
	{
		"type": "range",
		"id": "padding_bottom",
		"min": 0,
		"max": 50,
		"step": 2,
		"unit": "px",
		"label": "Padding Bottom",
		"default": 12
	}
],

	"presets": [
		{
			"name": "breadcrumbs"
		}
	]
}
{% endschema %}

<style>
  .breadcrumbs {
  	padding-top: {{ section.settings.padding_top }}px;
  	padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  .breadcrumbs__list {
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	font-size: {{ section.settings.font_size }}px;
  }

  .breadcrumbs__item {
  	display: inline-block;
  }

  .breadcrumbs__item:not(:last-child):after {
  content: '';
  display: inline-block;
  margin: 0 .20em;
  position: relative;
  vertical-align: middle;
  {% if section.settings.separator_shape == 'triangle' %}
  	border-style: solid;
  	border-width: .10em .10em 0 0;
  	height: .30em;
  	width: .30em;
  	transform: rotate(45deg);
  	top: -0.1em;
  {% elsif section.settings.separator_shape == 'slash' %}
  	content: '/';
  	margin-left: .5em;
  {% endif %}
  }

  .breadcrumbs__link {
  	cursor: pointer;
  	display: inline-block;
  	border: none;
  	box-shadow: none;
  	text-decoration: none;
  	text-underline-offset: 0.3rem;
  	color: rgb(var(--color-text));
  	/*font-size: 1.4rem;*/
  	font-family: inherit;
  }

  .breadcrumbs__link:hover {
  	text-decoration: underline;
  	text-underline-offset: 0.3rem;
  	color: rgb(var(--color-foreground));
  }

  #breadcrumbs-divider {
  	display: block;
  	height: 1px;
  	background-color: {{ section.settings.divider_color }};
  }
</style>
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
MudassirMehmood
Excursionist
28 1 2
See this is the issue with it


MudassirMehmood
Excursionist
28 1 2

Dear Eboost,

I hope this message finds you well.

I am currently facing an issue with changing the menu in the customization settings of my Shopify theme. The default menu is set to the main menu; however, I have created a dedicated menu specifically for breadcrumbs, titled "Breadcrumbs."

Could you please assist me in enabling the option to change the breadcrumbs menu? If this is not feasible, I kindly request that the default menu be set to the "Breadcrumbs" menu.

Thank you for your assistance with this matter. I appreciate your help.

Best regards,
Mudassir Mehmood

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi @MudassirMehmood ,

 

In the code has included it. You can go to customize to change.

This is schema settings.

EBOOST_4-1729083650877.png

You can change here

EBOOST_5-1729083703696.png

 

 

The case that you would like to change default menu you can follow steps below:

 

1. Go to Online Store -> Navigation -> Breadcrumbs menu

EBOOST_1-1729083389226.png

 

2. Check handle of this menu

EBOOST_2-1729083407639.png

3. In code that I suggested previous post. Replace "main-menu" with this hanle.

EBOOST_3-1729083500836.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
MudassirMehmood
Excursionist
28 1 2

It cannot be saved. It Creates an Error. As you can see

 

Screenshot 2024-10-16 182009.pngScreenshot 2024-10-16 181450.png

Screenshot 2024-10-16 182506.png

EBOOST
Shopify Partner
1247 324 373

This is an accepted solution.

Hi,

Sorry.  default only accept main-menu and footer

https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#link_list

EBOOST_0-1729090882903.png

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips