Add breadcrumb menu without app Sense theme

Add breadcrumb menu without app Sense theme

blakelyhiner
Shopify Partner
22 1 4

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

Replies 5 (5)

rifat_Shop
Shopify Partner
100 11 13

Hello, @blakelyhiner 
As i understand you are looking to add breadcrumb menu like this ?

devhook_0-1713270324478.png

 

<ul class="bread-crumb-in-block"> <li><a href="{{ request.origin }}">{{ 'products.product.bred_text' | t }}</a></li> {% if collection.url %} <li> {{ collection.title | link_to: collection.url }} </li> {% endif %} <li> <a href="{{ product.url }}" aria-current="page">{{ product.title }}</a> </li>

Identify the Theme File: You'll need to locate the specific theme file responsible for product pages. This file is usually named product.liquid. Access Theme Code: Go to your Shopify admin panel, navigate to "Online Store" and then "Themes". Select "Actions" and choose "Edit code" for your theme. Locate Breadcrumb Placement: Decide where you want the breadcrumbs to appear on your product page. Common locations include the above the product information.
Create a Snippet (Optional): For better code organization, you can create a new snippet in the "Snippets" folder of your theme code editor. This snippet will hold the breadcrumb logic. Add Breadcrumb Code: Within the snippet (or directly in product.liquid), add Liquid code that dynamically generates the breadcrumb trail based on the product's collection hierarchy. Here's a basic example:

Maybe its work for you, i not not have code access so i can not help you properly  
You can give me staff account in this email likhonsds@gmail.com.  so i can help you
Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
blakelyhiner
Shopify Partner
22 1 4

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. 

Anshul_arora
Navigator
453 129 104

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 -:

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

[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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
blakelyhiner
Shopify Partner
22 1 4

Thank you, this worked but there are a couple of issues.

 

1. The padding on the left side is too slim, needs to have more padding from the edge of the site.

2. It shows on the collection home page where I only want it to show on the product pages.

3. 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?

Screenshot 2024-04-16 at 7.42.12 AM.png

Anshul_arora
Navigator
453 129 104

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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here