I need to add a breadcrumb menu at the top of all product pages, for some reason this is not inherent to this theme ‘Sense’, frustrating! CSS or liquid preferred, not interested in using an app to do this.
URL: hannahviaart.com
Topic summary
Goal: Add a breadcrumb navigation to Sense theme product pages without using an app (prefer CSS/Liquid).
Guidance provided: A Shopify Liquid example link was shared, with instructions to paste the snippet in theme.liquid near the element main id=“MainContent” to render breadcrumbs sitewide. Screenshots were referenced to show placement and result.
Result/issues reported:
- Breadcrumb renders, but left padding is too tight and needs more spacing.
- It appears on collection pages; desired only on product pages.
- The trail links back to the homepage rather than the originating collection; wants it to return to the collection visited.
- Separate difficulty locating where exactly to place the code (couldn’t find the relevant product information section).
Next step suggested: Due to multiple custom requirements, the helper recommended hiring a Shopify developer to implement tailored code.
Status: Unresolved/ongoing. Outstanding needs include CSS padding adjustments, conditional rendering on product pages only, and logic to preserve and link back to the user’s collection context. Exact code placement within the theme remains unclear.
Notes: External code example link is central; screenshots were used to demonstrate implementation and output.
Hello @blakelyhiner ,
I understand you are looking to add Breadcrumb navigation in your shopify store.
Please take a look at the below mentioned link and follow the steps -:
[Note -: For adding the code mentioned in link, you have to open theme.liquid file and search for ’ main id=“MainContent” ’ and paste the code https://prnt.sc/R06uyXlE3jR3 , this will apply breadcrumb navigation in all the pages like this https://prnt.sc/373mX7qaoOAm ]
I hope it helps.
Thank you.
Thank you, this worked but there are a couple of issues.
-
The padding on the left side is too slim, needs to have more padding from the edge of the site.
-
It shows on the collection home page where I only want it to show on the product pages.
-
It takes you back to homepage instead of collection you came from, any way to make it so it goes to collection instead of homepage?
Thanks, but I’m having a tough time finding where to place the code in the liquid file. Not able to locate the product information line.
Hello @blakelyhiner ,
I understand your requirements and for this you have to make several changes in your custom code & it will take time.
I suggest you to hire a Shopify Developer for implementing the correct code as per your desired requirements.
Thank you.