How to Add Breadcrumbs in Shopify (Step-by-Step Guide Without Apps)

BySystemUnit

How to add breadcrumbs in Shopify

how to add breadcrumbs in Shopify
how to add breadcrumb in shopify



How to add breadcrumbs in Shopify is a question many store owners ask when they want to improve SEO and user experience. In e-commerce, breadcrumbs are one of the most important navigation features. Shopify is an excellent platform in many ways, but one drawback from a user’s perspective is that Shopify does not include breadcrumbs by default.

The good news? You don’t need to install any apps. By adding a few lines of code, you can easily implement Shopify breadcrumbs yourself. It’s not difficult—just follow the steps below.

guide on how to improve Shopify SEO basics.

How to add breadcrumbs in Shopify- One of the key feature you should have

Why Breadcrumbs Matter in Shopify

BrBreadcrumbs are more than just design—they directly impact Shopify SEO and user experience:

  • ✅ SEO Benefits: Google uses breadcrumb navigation to better understand your site structure and display it in search results.
  • ✅ Improved Navigation: Shoppers know exactly where they are and can easily return to collections or the homepage.
  • ✅ Lower Bounce Rate: Easier navigation encourages customers to browse more pages, increasing conversion chances.

Adding breadcrumbs in Shopify is one of the easiest SEO wins for your store.

Step 1: How to Add Breadcrumbs in Shopify – Step 1: Access Your Store Backend

Log in to your Shopify admin panel and go to Online Store → Themes. This is where you’ll manage and customize your theme.

Step 2: Why Breadcrumbs Matter in Shopify (and How to Add Breadcrumbs in Shopify for SEO)

If you haven’t already, install the Dawn theme (latest version recommended: 13.0.1).
Click Add to install, and then Publish it to make it active.

Step 3: Editing Your Theme Code

From your theme dashboard, click Edit Code. This opens the theme editor where you’ll create a new section for Shopify breadcrumbs.

Step 4: Adding the Breadcrumb Section

Inside the Sections folder, create a new file called breadcrumb.liquid.
Paste the breadcrumb code snippet (provided in your tutorial or by your developer) into this file and save it.

How to add breadcrumbs in Shopify

Step 5: Integrating Breadcrumbs Into Your Theme

Next, open theme.liquid and search for "header-group".
Right below this section, add the include code to display your Shopify breadcrumb navigation.

Step 6: Customizing Your Breadcrumbs

Go to Customize Theme, where you’ll now see a breadcrumb option. From here, you can:

  • Enable or disable breadcrumb icons
  • Adjust text colors and background styles
  • Choose which pages (collections, products, blogs) should display breadcrumbs

Step 7: Testing Your Breadcrumbs

How to add breadcrumbs in Shopify
Save your changes and preview a Shopify product page.
Make sure the breadcrumbs display correctly and that links navigate back to collections and the homepage.

Advanced SEO Tips for Breadcrumbs in Shopify

  1. Add Structured Data (JSON-LD): Google recommends using schema markup for breadcrumbs so they appear in search results.
  2. Keep Breadcrumbs Short: Use concise labels such as “Home → Dresses → Maxi Dress” instead of long product titles.
  3. Use Keywords Naturally: If possible, include category keywords in your breadcrumb names to reinforce relevance.
  4. Mobile Optimization: Ensure breadcrumbs are visible and clickable on mobile devices, where most Shopify shoppers browse.

FAQs About Shopify Breadcrumbs

Q1: Does Shopify have breadcrumbs by default?
No. Shopify themes, including Dawn, do not include breadcrumbs out of the box. You must add them manually or through an app.

Q2: Do I need an app to add breadcrumbs in Shopify?
No. You can add breadcrumbs with a small piece of code, as shown in this tutorial. This avoids extra costs and keeps your site lightweight.

Q3: Are breadcrumbs really important for SEO?
Yes. Breadcrumbs improve internal linking, site structure, and often appear in Google’s search results as breadcrumb trails, which improves visibility and click-through rates.

Q4: Can I show breadcrumbs only on certain pages?
Yes. With simple theme customization, you can display breadcrumbs only on product pages, collections, or blogs—where they make the most sense.

Conclusion

And that’s it! By following this step-by-step guide, you’ve learned how to add breadcrumbs in Shopify without installing third-party apps. This simple customization improves navigation, enhances user experience, and provides a valuable SEO boost for your store.

If you found this guide helpful, bookmark it and check out more tutorials on optimizing your Shopify store for SEO, conversions, and growth.Conclusion

If you haven’t already, install the Dawn theme (latest version recommended: 13.0.1).
Click Add to install, and then Publish it to make it active.

And that’s it! You’ve successfully added breadcrumbs in Shopify without installing any third-party apps. This small customization makes your store more user-friendly and gives your site a valuable SEO boost.

If you found this guide helpful, be sure to bookmark it and explore more tutorials on optimizing your Shopify store.


{%- 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;
         /*Will put liquid customization here*/
         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%);
         {%- else -%}

         {%- 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"
          class="bi bi-house-door-fill"
          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' -%}
        {%- for link in linklists['main-menu'].links -%}
          {%- if link.url == blog.url -%}
            <span class="breadcrumb-delimeter" aria-hidden="true"></span>
            <!-- Breadcrumb Delimeter -->
            {{ link.title | link_to: link.url }}
            {% break %}
          {%- endif -%}
        {%- endfor -%}
        <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_url_string = product_url_string | append: product.url -%}

        {%- assign object_urls = object_url_string | split: '|' -%}
        {%- capture linklist_titles_str -%}
        {%- for linklist in linklists -%}
          {{ linklist.title | handleize }}|{%- endfor -%}
      {%- endcapture -%}
        {%- assign str_size = linklist_titles_str | size | minus: 1 -%}
        {%- assign linklist_titles_str = linklist_titles_str | slice: 0, str_size -%}
        {%- assign linklist_titles = linklist_titles_str | split: '|' -%}

        {%- assign level = 1 -%}
        {%- for link in linklists['main-menu'].links -%}
          {%- assign link_handle = link.title | handle -%}
          {%- assign link_titles = link_titles | append: link.title | append: '|' -%}
          {%- assign link_urls = link_urls | append: link.url | append: '|' -%}
          {%- assign link_levels = link_levels | append: level | append: '|' -%}
          {%- assign link_parents = link_parents | append: 'main-menu' | append: '|' -%}
          {%- assign link_handles = link_handles | append: link_handle | append: '|' -%}

          {%- if linklist_titles contains link_handle -%}
            {%- for clink in linklists[link_handle].links -%}
              {%- if forloop.first == true -%}
                {%- assign level = level | plus: 1 -%}
              {%- endif -%}
              {% assign clink_handle = clink.title | handle %}
              {%- assign link_titles = link_titles | append: clink.title | append: '|' -%}
              {%- assign link_urls = link_urls | append: clink.url | append: '|' -%}
              {%- assign link_levels = link_levels | append: level | append: '|' -%}
              {%- assign link_parents = link_parents | append: link_handle | append: '|' -%}
              {%- assign handle = link.title | handleize -%}
              {%- assign link_handles = link_handles | append: clink_handle | append: '|' -%}

              {%- if linklist_titles contains clink_handle -%}
                {%- for gclink in linklists[clink_handle].links -%}
                  {%- if forloop.first == true -%}
                    {%- assign level = level | plus: 1 -%}
                  {%- endif -%}

                  {% assign gclink_handle = gclink.title | handle %}
                  {%- assign link_titles = link_titles | append: gclink.title | append: '|' -%}
                  {%- assign link_urls = link_urls | append: gclink.url | append: '|' -%}
                  {%- assign link_levels = link_levels | append: level | append: '|' -%}
                  {%- assign link_parents = link_parents | append: gclink_handle | append: '|' -%}
                  {%- assign link_handles = link_handles | append: gclink_handle | append: '|' -%}

                  {%- if forloop.last == true -%}
                    {%- assign level = level | minus: 1 -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
              {%- if forloop.last == true -%}
                {%- assign level = level | minus: 1 -%}
              {%- endif -%}
            {%- endfor -%}
          {%- endif -%}
        {%- endfor -%}

        {%- comment -%} CONVERT TO ARRAYS {%- endcomment -%}
        {%- assign str_size = link_levels | size | minus: 1 -%}
        {%- assign llevels = link_levels | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_titles | size | minus: 1 -%}
        {%- assign ltitles = link_titles | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_handles | size | minus: 1 -%}
        {%- assign lhandles = link_handles | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_parents | size | minus: 1 -%}
        {%- assign lparents = link_parents | slice: 0, str_size | split: '|' -%}

        {%- assign str_size = link_urls | size | minus: 1 -%}
        {%- assign lurls = link_urls | slice: 0, str_size | split: '|' -%}

        {%- assign depth = '3' -%}
        {%- assign bc3_parent_list_handle = '' %}

        {%- for url in lurls -%}
          {%- if object_urls contains url and llevels[forloop.index0] == depth -%}
            {%- unless url == product.url or url == collection.url -%}
              {%- capture bc3 -%}
              {{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
            {%- endunless -%}
            {%- assign bc3_parent_list_handle = lparents[forloop.index0] -%}
            {%- assign bc3_list_handle = lhandles[forloop.index0] -%}
            {% break %}
          {%- endif -%}
        {%- endfor -%}

        {%- assign depth = '2' -%}
        {%- assign bc2_parent_list_handle = '' %}

        {%- if bc3_parent_list_handle == '' -%}
          {%- for url in lurls -%}
            {%- if llevels[forloop.index0] == depth -%}
              {%- if object_urls contains url -%}
                {%- unless url == product.url or url == collection.url -%}
                  {%- capture bc2 -%}
                  {{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
                {% endunless %}
                {%- assign bc2_parent_list_handle = lparents[forloop.index0] -%}
                {%- break -%}
              {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
        {%- else -%}
          {%- for list_handle in lhandles -%}
            {%- if list_handle == bc3_parent_list_handle -%}
              {% assign bc2_list_handle = list_handle %}
              {%- assign bc2_parent_list_handle = lparents[forloop.index0] -%}
              {%- assign bc2_list_title = ltitles[forloop.index0] -%}
              {%- for bc2_sibling_link in linklists[bc2_parent_list_handle].links -%}
                {%- assign bc2_sibling_title_handleized = bc2_sibling_link.title | handle -%}
                {% if bc2_sibling_title_handleized == bc2_list_handle %}
                  {%- capture bc2 -%}
                  {{ bc2_sibling_link.title | link_to: bc2_sibling_link.url, bc2_sibling_link.title }}{%- endcapture -%}
                  {% break %}
                {%- endif -%}
              {%- endfor -%}
              {% break %}
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}

        {%- assign depth = depth | minus: 1 | append: '' -%}
        {%- assign bc1_parent_list_handle = '' %}

        {%- if bc2_parent_list_handle == '' -%}
          {% for url in lurls %}
            {%- if object_urls contains url and llevels[forloop.index0] == depth -%}
              {%- unless url == product.url or url == collection.url -%}
                {%- capture bc1 -%}
                {{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
              {% endunless %}
              {%- assign bc1_parent_list_handle = lparents[forloop.index0] -%}
              {%- break -%}
            {%- endif -%}
          {%- endfor -%}

        {%- else -%}
          {%- for list_handle in lhandles -%}
            {%- if bc2_parent_list_handle == list_handle -%}
              {% assign bc1_list_handle = list_handle %}
              {%- assign bc1_parent_list_handle = lparents[forloop.index0] -%}
              {%- assign bc1_title = ltitles[forloop.index0] -%}
              {%- for bc1_sibling_link in linklists[bc1_parent_list_handle].links -%}
                {%- assign bc1_sibling_title_handleized = bc1_sibling_link.title | handle -%}
                {% if bc1_sibling_title_handleized == bc1_list_handle %}
                  {%- capture bc1 -%}
                  {{ bc1_sibling_link.title | link_to: bc1_sibling_link.url, bc1_sibling_link.title }}{%- endcapture -%}
                  {% break %}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}

        {%- if bc1 -%}
          <span class="breadcrumb-delimeter" aria-hidden="true"></span>
          <!-- Breadcrumb Delimeter -->
          {{ bc1 }}
        {%- endif -%}
        {%- if bc2 -%}
          <span class="breadcrumb-delimeter" aria-hidden="true"></span>
          {{ bc2 }}
        {%- endif -%}
        {%- if bc3 -%}
          <span class="breadcrumb-delimeter" aria-hidden="true"></span>
          {{ bc3 }}
        {%- endif -%}

        <span class="breadcrumb-delimeter" aria-hidden="true"></span>
        <a href="{{ product.url }}">{{ product.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>
            <!-- Breadcrumb delimeter -->
            <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>
                {% for gclink in clink.links %}
                  {% if gclink.child_active or gclink.active %}
                    <span class="breadcrumb-delimeter" aria-hidden="true"></span>
                    <a href="{{ gclink.url }}">
                      {{ gclink.title | escape }}
                    </a>
                  {% endif %}
                {%- endfor -%}
              {% endif %}
            {%- endfor -%}
          {% endif %}
        {%- endfor -%}
    {%- endcase -%}
  {%- endunless -%}
</div>

<script defer>
  const breadCrumbLinks = document.querySelectorAll(".breadcrumbs a")
  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?sub_confirmation=1)"
    },
    {
      "type": "checkbox",
      "id": "breadcrumbs_home_icon_bool",
      "label": "Use the home icon next to the Home link in the breadcrumb",
      "default": true
    },
    {
      "type": "select",
      "id": "breadcrumb_delimeter",
      "label": "Breadcrumb Delimeter 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 page color link in breadcrumb",
        "default": false
      }, {
        "type": "color",
        "id": "breadcrumb_accent_color",
        "label": "Visited Page Link 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 Website",
    "default": true
  }
  ],
  "presets": [
    {
      "name": "Breadcrumb Navigation"
    }
  ]
}
{% endschema %}

Breadcrumbs are more than just design—they directly impact Shopify SEO and user experience. Google even recommends using breadcrumb navigation in their official SEO Starter Guide because it helps both users and crawlers understand site structure.

https://systemunit.com/b2b-apparel-sales-strategies/
7 Proven Strategies That Boosted B2B Apparel Sales by 340% in 2025
Other blog

Similar Posts