Compatibility: All Shopify themes, work best with Shopify 2.0 FREE themes
Several clients have been seeking an effective breadcrumb navigation system that works seamlessly with the CSS styles of Shopify 2.0's FREE themes.
Although a complimentary Shopify breadcrumb code exists, its compatibility with individual themes may vary. Furthermore, there are known challenges with the 'current_tags' feature.
To address this, we have developed a code snippet that can detect the previous URL. If a user navigates from a collection page to a product page, the breadcrumb will display the collection title. In other cases, the assigned collection metafield will be used to display relevant information.
You can check the demo store here. Password: made4uo
What is Breadcrumb Navigation?
Breadcrumb navigation is a secondary navigation element that appears on many websites, including Shopify stores. It typically displays a user's current location within the website's hierarchy, often in the form of a horizontal list of text links separated by arrows (e.g., Home > Clothing > Shirts).
Why Use Breadcrumb Navigation?
There are several compelling reasons to incorporate breadcrumb navigation on your Shopify store:
- Improved User Experience: Breadcrumbs act as a visual map, helping users understand their current location within your store's structure. This can be particularly helpful for stores with a large product catalog or complex category hierarchies. By providing users with a sense of their location and offering quick navigation options, you can enhance their overall browsing experience.
- Enhanced SEO (Search Engine Optimization): Breadcrumbs can potentially improve your store's SEO by providing search engines with additional context about your website's structure and page hierarchy. This can potentially lead to better search engine rankings and increased organic traffic.
Additional Considerations:
- Code Editing Expertise: The complexity depends on the chosen implementation method (code modification vs. pre-built theme functionality).
- Mobile Optimization: Ensure the breadcrumb navigation displays and functions correctly on mobile devices for optimal user experience across all platforms.
What you are buying:
- A Shopify breadcrumb section
- Choose different arrows
- Breadcrumb will appear on product, collection, article, and page
- Collection title with link will show at the middle when you open a product from the collection page and replaces the assigned collection metafield
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To create the metafield:
1. In your Admin Page, click Settings on your left hand bottom corner
2. Go to Metafield / Custom Data then Products. Follow the fields below then SAVE.
3. Next, you need to go to your Products. In your Admin page, click Product on the left hand side. Choose the product, then scroll all the way down. You should see the assigned_collection metafield. Choose the collection you want to assign then click SAVE.
Steps on how to add Dynamic Shopify Breadcrumbs
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code.
Step #2. Create a new section file
In Section folder, create a new section, name it "shopify-breadcrumbs" then replace the default code with the code below. Make sure to click SAVE.
Step #3. Open theme.liquid
Go to the Layout folder, and open the theme.liquid. Find the {% section 'header' %}, then add the code below after it and SAVE.
Step #4. Customize theme
Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.
Conclusion
Streamline Navigation! Implement "Breadcrumb Navigation" for your Shopify theme.
Simple & User-Friendly:
- Location Awareness: Breadcrumbs show customers their current location within your store's structure.
- Easy Backtracking: Customers can navigate back to previous sections with a single click.
Boost Your Store:
- Consider Theme Features: Newer themes might already have breadcrumbs built-in.
- Purchased Code Option: For themes without breadcrumbs, explore code snippets for seamless integration.
- Mobile-Friendly Design: Ensure breadcrumbs display and function flawlessly on all devices.
Empower Your Customers!
- Enhanced Navigation: Breadcrumbs provide a clear pathway for customers to explore your store.
- Improved User Experience: Customers can browse confidently with a sense of location.
Unlock the benefits of breadcrumb navigation for your Shopify theme!
Copied!
2 comments
@ILONKA I believe this is fixed. I would suggest to contact us using “Chat with us” to assist you timely
Hello,
I just implemented “breadcrumbs”, it works perfectly on product pages or collections. but not so good on blog pages. It shows only “Home” and the blog post, but not in which blog you are (I have two blogs). For example it should be “Home > Puppy Blog > Stay Alone”, instead the display is only “Home > Stay Alone” . Do you have a solution for this? Thank you very much, Ilonka
PS: I have also implemented Infinite Scroll, it works very well, thanks for that.