.Bktem256_23EEnI.webp)
.rrgOIsSz_Z2n0to0.webp)
![Best FREE Shopify Themes [2026] - Which One To Choose](/_astro/Best%20FREE%20Shopify%20Themes%20_2026_%20-%20Which%20One%20To%20Choose.B6JLp3On_2v2CIe.webp)
![How To Add Breadcrumbs In Shopify-Free Without APP-[2026]](/_astro/how-to-add-breadcrumbs-in-shopify-free-without-app-2024.DPYjN4Wr_1Xi3U9.webp)
Welcome back to WebSensePro for another exciting tutorial. Today, I’m going to walk you through the process of adding breadcrumbs to your Shopify store without relying on any third-party apps. Yes, you heard it right! You can achieve this seamlessly by simply following the steps outlined in this tutorial.
Step 1: Accessing Your Shopify Store Backend
First things first, let’s head over to the backend of your Shopify store. Close any unnecessary tabs and navigate to “Online Store.”
Step 2: Installing the Dawn Theme
If you haven’t already installed the Dawn theme, now’s the time to do it. I recommend using the latest version, which at the time of this tutorial is 13.0.1. Click on the “Add” button and let the theme install.
Step 3: Editing Your Theme Code
Once the Dawn theme is installed, click on the “Publish” button and then select “Edit Code” from the dropdown menu.
Step 4: Adding the Breadcrumb Section
In the code editor, navigate to the “Sections” folder and create a new file named “breadcrumb.liquid.” Replace any existing code in this file with the code provided in the description.
Step 5: Integrating Breadcrumbs into Your Theme
Next, locate the “theme.liquid” file and search for “header-group.” Below this section, insert the code snippet to include the breadcrumb section.
Step 6: Customizing Your Breadcrumbs
Save your changes and head over to the “Customize Theme” section. Here, you’ll find the newly added breadcrumb navigation. Customize it according to your preferences, such as enabling/disabling icons, changing colors, or specifying on which pages the breadcrumbs should appear.
Step 7: Final Touches and Testing
After customizing your breadcrumbs, don’t forget to save your settings. Now, navigate to your product page to ensure that the breadcrumbs are displaying correctly.
**Conclusion
**And there you have it! By following these simple steps, you’ve successfully added stylish breadcrumbs to your Shopify store without the need for any external apps. Feel free to subscribe to our channel for more helpful tutorials and updates.
{%- style -%}
{% if template == 'product' and section.settings.enable_product_page %}
.breadcrumbs{ display: block; }
{% else %}
.breadcrumbs{ display: none; }
{% endif %}
{% if section.settings.enable_complete_site %}
.breadcrumbs{ display: block; }
{% endif %}
{% if template == 'collection' and section.settings.enable_collection_page %}
.breadcrumbs{ display: block; }
{% endif %}
:root { --svg_fill: {{ section.settings.breadcrumb_text_color }}; }
.home-icon-container { display: inline-block; margin-right: 4px; vertical-align: sub; }
.breadcrumbs { padding: 1rem 5rem; color: {{ section.settings.breadcrumb_text_color }}; background-color: {{ section.settings.breadcrumb_bg_color }}; }
.breadcrumbs li { display: inline-block; }
.breadcrumbs a { text-decoration: none; font-size: 15px; color: inherit; }
{%- if section.settings.breadcrumb_accent_color_bool -%}
.breadcrumbs a:last-of-type { color: {{ section.settings.breadcrumb_accent_color }} !important; }
{%- endif -%}
.breadcrumb-delimeter:not(:last-child):after {
{%- case section.settings.breadcrumb_delimeter -%}
{%- when "angle_right" -%} content: "›"; font-size: 18px;
{%- when "slash" -%} content: "/"; font-size: 16px;
{%- when "arrow_right" -%} content: "➤"; font-size: 15px;
{%- when "squiggle_arrow" -%} content: "\27FF"; font-size: 25px;
{%- when "right_long" -%} content: "\279E"; font-size: 18px; transform: translateY(5%);
{%- when "double_right" -%} content: "\00BB"; font-size: 20px;
{%- when "diamond_arrow_head" -%} content: "⤞"; font-size: 25px; transform: translateY(5%);
{%- when "heavy_angle_right" -%} content: "\276F"; font-size: 18px; transform: translateY(5%);
{%- endcase -%}
display: inline-block; margin-left: 0.75rem; margin-right: 0.50rem; speak: none;
}
.breadcrumbs [aria-current="page"] { color: inherit; font-weight: normal; text-decoration: none; }
{%- endstyle -%}
<div class="page-width breadcrumbs" aria-label="breadcrumbs">
{%- unless template == 'index' or template == 'cart' -%}
{%- if section.settings.breadcrumbs_home_icon_bool -%}
<div class="home-icon-container">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
</svg>
</div>
{%- endif -%}
<a href="/" title="Home">Home</a>
{%- case template.name -%}
{%- when 'article' -%}
{%- assign article_bc1 = nil -%}{%- assign article_bc2 = nil -%}{%- assign article_bc3 = nil -%}
{%- for link in linklists['main-menu'].links -%}
{%- if link.url == blog.url -%}{%- assign article_bc1 = link -%}
{%- elsif link.links.size > 0 -%}
{%- for clink in link.links -%}
{%- if clink.url == blog.url -%}{%- assign article_bc1 = link -%}{%- assign article_bc2 = clink -%}
{%- elsif clink.links.size > 0 -%}
{%- for gclink in clink.links -%}
{%- if gclink.url == blog.url -%}{%- assign article_bc1 = link -%}{%- assign article_bc2 = clink -%}{%- assign article_bc3 = gclink -%}{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- if article_bc1 -%}<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ article_bc1.url }}">{{ article_bc1.title }}</a>{%- endif -%}
{%- if article_bc2 -%}<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ article_bc2.url }}">{{ article_bc2.title }}</a>{%- endif -%}
{%- if article_bc3 -%}<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ article_bc3.url }}">{{ article_bc3.title }}</a>{%- endif -%}
{%- unless article_bc1 -%}<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ blog.url }}">{{ blog.title }}</a>{%- endunless -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
{%- when 'product' -%}
{%- capture product_url_string -%}{%- for collection in product.collections -%}{{ collection.url }}|{%- endfor -%}{%- endcapture -%}
{%- assign object_urls = product_url_string | append: product.url | split: '|' -%}
{%- assign bc1_t = nil -%}{%- assign bc2_t = nil -%}{%- assign bc3_t = nil -%}
{%- for link in linklists['main-menu'].links -%}
{%- if object_urls contains link.url -%}{%- assign bc1_t = link.title -%}{%- assign bc1_u = link.url -%}{%- endif -%}
{%- for clink in link.links -%}
{%- if object_urls contains clink.url -%}{%- assign bc1_t = link.title -%}{%- assign bc1_u = link.url -%}{%- assign bc2_t = clink.title -%}{%- assign bc2_u = clink.url -%}{%- endif -%}
{%- for gclink in clink.links -%}
{%- if object_urls contains gclink.url -%}{%- assign bc1_t = link.title -%}{%- assign bc1_u = link.url -%}{%- assign bc2_t = clink.title -%}{%- assign bc2_u = clink.url -%}{%- assign bc3_t = gclink.title -%}{%- assign bc3_u = gclink.url -%}{% break %}{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- endfor -%}
{%- if bc1_t -%}<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ bc1_u }}">{{ bc1_t }}</a>{%- endif -%}
{%- if bc2_t -%}<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ bc2_u }}">{{ bc2_t }}</a>{%- endif -%}
{%- if bc3_t -%}<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ bc3_u }}">{{ bc3_t }}</a>{%- endif -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href="{{ product.url }}">{{ product.title }}</a>
{%- when 'collection' -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href="{{ collection.url }}">{{ collection.title }}</a>
{%- else -%}
{%- for link in linklists['main-menu'].links -%}
{%- if link.child_active or link.active -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ link.url }}">{{ link.title | escape }}</a>
{%- for clink in link.links -%}
{%- if clink.child_active or clink.active -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span><a href="{{ clink.url }}">{{ clink.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endcase -%}
{%- endunless -%}
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "{{ shop.url }}" }
{%- if template.name == 'product' -%}
{%- assign p = 2 -%}
{%- if bc1_t -%}, {"@type": "ListItem", "position": {{p}}, "name": "{{bc1_t}}", "item": "{{shop.url}}{{bc1_u}}"}{% assign p = p | plus: 1 %}{%- endif -%}
{%- if bc2_t -%}, {"@type": "ListItem", "position": {{p}}, "name": "{{bc2_t}}", "item": "{{shop.url}}{{bc2_u}}"}{% assign p = p | plus: 1 %}{%- endif -%}
{%- if bc3_t -%}, {"@type": "ListItem", "position": {{p}}, "name": "{{bc3_t}}", "item": "{{shop.url}}{{bc3_u}}"}{% assign p = p | plus: 1 %}{%- endif -%}
, {"@type": "ListItem", "position": {{p}}, "name": "{{ product.title }}", "item": "{{ shop.url }}{{ product.url }}"}
{%- elsif template.name == 'article' -%}
{%- assign p = 2 -%}
{%- if article_bc1 -%}, {"@type": "ListItem", "position": {{p}}, "name": "{{article_bc1.title}}", "item": "{{shop.url}}{{article_bc1.url}}"}{% assign p = p | plus: 1 %}{%- endif -%}
{%- if article_bc2 -%}, {"@type": "ListItem", "position": {{p}}, "name": "{{article_bc2.title}}", "item": "{{shop.url}}{{article_bc2.url}}"}{% assign p = p | plus: 1 %}{%- endif -%}
{%- if article_bc3 -%}, {"@type": "ListItem", "position": {{p}}, "name": "{{article_bc3.title}}", "item": "{{shop.url}}{{article_bc3.url}}"}{% assign p = p | plus: 1 %}{%- endif -%}
{%- unless article_bc1 -%}, {"@type": "ListItem", "position": {{p}}, "name": "{{blog.title}}", "item": "{{shop.url}}{{blog.url}}"}{% assign p = p | plus: 1 %}{%- endunless -%}
, {"@type": "ListItem", "position": {{p}}, "name": "{{ article.title }}", "item": "{{ shop.url }}{{ article.url }}"}
{%- elsif template.name == 'collection' -%}
, {"@type": "ListItem", "position": 2, "name": "{{ collection.title }}", "item": "{{ shop.url }}{{ collection.url }}"}
{%- endif -%}
]
}
</script>
<script defer>
const breadCrumbLinks = document.querySelectorAll(".breadcrumbs a");
if(breadCrumbLinks.length > 0){
const lastLink = breadCrumbLinks[breadCrumbLinks.length - 1];
lastLink.href = "javascript:void(0)";
}
</script>
{% schema %}
{
"name": "Breadcrumb Navigation",
"settings": [
{ "type": "header", "content": "Subscribe to our [channel](https://www.youtube.com/@websensepro)" },
{ "type": "checkbox", "id": "breadcrumbs_home_icon_bool", "label": "Use home icon", "default": true },
{
"type": "select",
"id": "breadcrumb_delimeter",
"label": "Delimiter Icon",
"options": [
{ "value": "angle_right", "label": "Angle Right" },
{ "value": "slash", "label": "Slash" },
{ "value": "arrow_right", "label": "Arrow Right" },
{ "value": "squiggle_arrow", "label": "Squiggle Arrow" },
{ "value": "right_long", "label": "Right Long" },
{ "value": "double_right", "label": "Double Right" },
{ "value": "diamond_arrow_head", "label": "Diamond Arrow Head" },
{ "value": "heavy_angle_right", "label": "Heavy Angle Right" }
],
"default": "angle_right"
},
{ "type": "color", "id": "breadcrumb_bg_color", "label": "Background Color", "default": "#fff" },
{ "type": "color", "id": "breadcrumb_text_color", "label": "Breadcrumb Color", "default": "#465076" },
{ "type": "checkbox", "id": "breadcrumb_accent_color_bool", "label": "Enable visited color", "default": false },
{ "type": "color", "id": "breadcrumb_accent_color", "label": "Visited Color", "default": "#4770db" },
{ "type":"checkbox", "id":"enable_product_page", "label":"Enable in Product Page" },
{ "type":"checkbox", "id":"enable_collection_page", "label":"Enable in Collection Page" },
{ "type":"checkbox", "id":"enable_complete_site", "label":"Enable on Complete Site", "default": true }
],
"presets": [ { "name": "Breadcrumb Navigation" } ]
}
{% endschema %}4.9/5 · 1021 votes
![Image related to how to add breadcrumbs in shopify-free without app-[2026]](/_astro/how-to-add-breadcrumbs-in-shopify-free-without-app-2024.DPYjN4Wr_Z1sJtNm.webp)
