Hi,
Good solution, but they don’t show the path through Collection.
Is it possible to show the breadcrumbs with this structure: Home/Collection/Product instead of Home/Product?
Thx!
Topic summary
Goal: add breadcrumb navigation (clickable path links) to Shopify’s Dawn theme, ideally showing Home > Collection > Product and aligning with the site’s content container.
Implementation provided:
- Create a ‘breadcrumbs’ Liquid snippet and render it in a Custom Liquid section on relevant templates.
- Code handles pages, products, collections (with/without tags), blogs, and articles. On product pages it shows the collection if a collection context exists.
- Suggestion: remove the hardcoded “All Products” link line to avoid an extra breadcrumb item.
Styling/alignment:
- Initial fix: set .breadcrumbs margin-left and add a mobile media query. This didn’t align with the site container on large screens.
- Alternative resolution: duplicate the Custom Liquid section and set that section’s width to 80%, then use it for breadcrumbs to align with the main content container.
Outstanding issues:
- Users want a true full path (e.g., Home > Shop > See all Collections > Specific Collection > Product). Current approach only shows Home plus Collection or Product; it doesn’t retain intermediate navigation steps. No confirmed solution in-thread.
Resources:
- A YouTube tutorial link was shared; effectiveness not confirmed.
Status: partially resolved (basic breadcrumbs + alignment workaround). Full-path navigation remains open.