How to add breadcrumbs? Shopify Dawn theme

[Zahraali]

Looking for Code ( NO APP OR HIRING )

I have tried multiple options but no success with the breadcrumbs. Request you all to help.

some of code is working but not showing the link list for example

Home/ product name

Not

Home / collection / product name

[PaulNewton]

https://shopify.github.io/liquid-code-examples/example/breadcrumb-navigation

Add it as a custom liquid section.

not showing the link list for example

Link lists are not used with standard breadcrumbs.

some of code is working but not showing the link list for example

What code? code you put in ? the default code? What exactly is it doing? Is there a public viewable example ?

etc https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408

If you need a custom breadcrumb logic using non standard features that’s an advanced customization you should just hire help for.

Goodluck.

[Seal]

The code for this breadcrumb shows only the page you are on and prior to that, the homepage, not the pages you have clicked through to get to where you are.
How can I add all the steps to the breadcrumb please?

Also it is left aligned tight to the edge of the page - how can I add a margin please?
@paul

[PaulNewton]

@Seal

Using a users navigation history for breadcrumbs is an advanced customization supplanted by the existence of a of the back button in a users browser.

The main exception is showing collections when a products URL is within that collection i.e. collections/shirts/product/red-shirt

For at least showing products within a collection I’d suggest first contacting shopify support and seeing if that’s covered in the courtesy design time they provide to shopify plans(60 minutes) .

Then if not try a custom-liquid block, or theme customization, with the following partners sample code

https://shopify.github.io/liquid-code-examples/example/breadcrumb-navigation

[Quondy]

Hello @PaulNewton

I have used the code you published. It works really well. The only thing is that the breadcrumbs come out with numbers, listing the pages visited, one down the other. How to change from numbers to have the breadcrumbs on the same line divided by lines?

[PaulNewton]

@Quondy the code is not mine it’s just boilerplate provided for shopify partners.

Regardless the answer is similar to seal’s question further custom is advanced.

Further when you have such issues provide inspectable urls to increase the changes someone donate free time to your problem.

Goodluck

[Quondy]

Hi @PaulNewton Thank you so much for getting back to me.

Well noted thank you. And again thanks for sharing the code with us all.

Have a nice day

Martina

[raphaelle]

Hi there,

Thank you for providing the solution and the code. I have entered the code in my liquid theme, but unfortunately, it only goes back to HOME and doesn’t go back to the COLLECTIONS. I do have the part in the code as follows:

{%- when ‘collection’ and collection.handle -%}
{%- if current_tags -%}

{{ collection.title | link_to: collection.url }}

{% capture tag_url %}{{collection.url }}/{{current_tags | join: "+"}}{% endcapture %} {{current_tags | join: " + "}}

{% else %}

{{collection.title}}

{% endif %}

But it doesn’t work. Am I missing something?

The breadcrumbs work perfectly for blog, and pages but somehow doesn’t work for the collections.

Thank you for the help.

[Techie-Dev]

For those who have landed on this post and are still looking for a solution, here’s how to add breadcrumbs to your Shopify Dawn theme’s Product pages. I only wanted to add them on the Product Pages but this code can also be used for other pages with slight modifications. Please refer to the URL at the end.

1. First, Edit the code and create a new snippet called “breadcrumbs”. Add the following code to the snippet:

{% if template == 'product' %}
  {% assign current_collection = product.collections.first %}
  {% if current_collection %}
    
  {% endif %}
{% endif %}

2. Next, edit the Default Product Page in the Shopify Theme Customizer (not through the code). In the “Custom Liquid” section, use “{% render ‘breadcrumbs’ %}” to render the snippet below the header.
3. Finally, Edit the code again and write CSS rules for styling in the “base.css” file by using “.breadcrumb” class as a reference.

Below is an example of how it could look:

Reference:

How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial U

[sakinur-rahman]

I have provided here the perfect and bug free solution. It’s fully SEO optimized. You check it below.

How to add Breadcrumbs to The Shopify Dawn Theme or Any Shopify Themes

[arraynex]

You can try to following code, by which you will get the breadcrumb like this: Home/ product name

1. Home
2. {{ product.title }}

Recently, I created a breadcrumb section. It can be used, just by copy and paste. This support on Dawn theme & most of themes.

This liquid code automatically generate schema code which is validated on Google Rich Results & schema.org. Which gives a very good impact on SEO.

Here, I attached the video of the product bellow you can check the features of this.

Disclaimer: Since I already spent couple of day for this development, So I keep a minimal price for this.

How To Add Breadcrumbs in Shopify Dawn Theme | Shopify Breadcrumbs

[Denziox44]

This process works for me and also can be used on a third level breadcrumbs

https://www.codeniden.com/how-to-add-breadcrumbs-on-shopify/