DAWN Breadcrumbs

Store Design

Topic summary

A user is implementing breadcrumb navigation on a Shopify Dawn theme and needs help with two issues:

Current Problem:

  • Breadcrumbs display incorrectly for products
  • Example: A safety trainer shoe shows generic collection path instead of the actual category hierarchy (Home → Workwear & Safety → Safety Footwear)

Requested Changes:

  1. Display accurate breadcrumb path: Home → main category → product
  2. Improve CSS styling for better visual appearance

Technical Details:

  • User provided existing breadcrumb code (appears corrupted/reversed in the post)
  • Code uses Liquid templating to check if template is ‘product’ and assigns current collection
  • Another user (DitalTek) began responding with alternative code but the response appears incomplete/corrupted

Status: Discussion remains open with partial solution provided. The code snippets in both posts contain formatting issues that make implementation unclear.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hey guys,

I am trying to add breadcrumbs to my dawn theme but I would like to change a few things. I would like to show possibly Home - main category - product.

https://www.supplieswarehouse.co.uk/products/himalayan-4314-bounce-black-composite-safety-trainer

Currently this is what this is what it shows

Amy200101_0-1734086386996.png

This item is actually Home - Workwear & Safety - Safety Footwear. Can I change my breadcrumbs to match this?.

Current code is {% if template == ‘product’ %}
{% assign current_collection = product.collections.first %}
{% if current_collection %}

Home › {{ current_collection.title }} › {{ product.title }} {% endif %} {% endif %}

Also how do I make this look better in css?.

Thanks

2

Hi,

You can try this code.

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