Breadcrumbs
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
Here the Correct Form
Hi @MudassirMehmood ,
In the code has included it. You can go to customize to change.
This is schema settings.
You can change here
The case that you would like to change default menu you can follow steps below:
1. Go to Online Store -> Navigation -> Breadcrumbs menu
2. Check handle of this menu
3. In code that I suggested previous post. Replace "main-menu" with this hanle.
Hi,
Sorry. default only accept main-menu and footer
https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#link_list
Hi @MudassirMehmood ,
In the code has included it. You can go to customize to change.
This is schema settings.
You can change here
The case that you would like to change default menu you can follow steps below:
1. Go to Online Store -> Navigation -> Breadcrumbs menu
2. Check handle of this menu
3. In code that I suggested previous post. Replace "main-menu" with this hanle.
It cannot be saved. It Creates an Error. As you can see
Hi,
Sorry. default only accept main-menu and footer
https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#link_list
Community Blog Articles
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024
In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024