Shopify themes, liquid, logos, and UX
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
Hello, @blakelyhiner
As i understand you are looking to add breadcrumb menu like this ?
<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
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 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.
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?
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025