Breadcrumbs are the most ignored navigation element on your store. Most shops slap them at the top of the product page, use the default styling, and never think about them again. But breadcrumbs are the second most used navigation tool on a product page after the main menu. When they are done right, they keep customers browsing deeper into your catalogue. When they are done wrong, customers hit the back button and land on a search engine. That person is gone.
Here are five breadcrumb tweaks you can make in under 20 minutes that turn a forgettable text link into a navigation tool that actually guides customers through your store.
1. Add a Product Count Next to Each Category Level
When a customer is on a product page and sees a breadcrumb like “Home / Women / Dresses / Summer Dresses”, they have no reason to click any of those links. But if it reads “Home / Women (142) / Dresses (38) / Summer Dresses (12)”, each link suddenly has a reason to exist. The number tells the customer how much more there is to explore in that category.
This is a 5-minute change. Query the product count for each category in the breadcrumb trail and append it in a small, muted font. Use parentheses or a badge style. Keep it subtle. The number is a signal, not a headline.
The click-through rate on breadcrumb links will jump immediately. Customers who would have left after reading one product description will click up to the parent category to see what else is available.
2. Make the Current Product Name Clickable to Its Collection
Most breadcrumbs end with the current product name as plain text. That is a missed opportunity. Instead of showing “Summer Dresses / Blue Linen Dress”, make the product name a dropdown that shows other products in the same collection. One click takes the customer to a related product without leaving the breadcrumb trail.
This works especially well for stores with variations. If a customer is looking at a red version of a dress, the breadcrumb dropdown shows the blue, green, and black versions. They switch colours without navigating anywhere else.
3. Add Hover Previews for Parent Categories
When a customer hovers over a parent category in the breadcrumb, show a small dropdown with the top 4 products in that category. Not a full menu with filters and sub-categories. Just four product thumbnails with names and prices.
This gives the customer a visual preview of what they will find if they click. Text breadcrumbs rely on the customer already knowing what is in that category. Hover previews show them. The result is more clicks on breadcrumb links and more time spent browsing.
Keep the preview small. Four products in a horizontal row, 80×80 pixel thumbnails, product name below each. The dropdown appears on hover and disappears on mouse out. No clicks required.
4. Use Breadcrumb Position to Show Stock Status at Each Level
If you have multiple sizes or colours within a product, use the breadcrumb to show stock status. When a customer selects a size from the dropdown, the breadcrumb updates to show whether that size is in stock at the parent category level.
For example, if a customer selects size XS in a dress, the breadcrumb could show “Summer Dresses (12) / Blue Linen Dress – XS”. If XS is out of stock, the breadcrumb shows it in red. If it is the last one, it shows “1 left” in orange.
This turns the breadcrumb from a static navigation tool into a live inventory indicator. Customers do not have to scroll to the size selector to know if their size is available. It is right there at the top of the page.
5. Add a “Continue Browsing” Breadcrumb Trail After Add to Cart
When a customer adds a product to their cart, the page usually shows a success message with two options: “View Cart” or “Continue Shopping”. The “Continue Shopping” button typically takes them back to the home page or the last category they visited.
Instead of a generic button, show the breadcrumb trail that brought them to this product. “You were browsing: Home / Women / Dresses / Summer Dresses”. Each level is clickable. The customer can jump right back to where they were without starting over.
This is particularly powerful on mobile where the back button often takes customers out of the store entirely. A breadcrumb trail after add-to-cart gives them a one-tap path back into your catalogue.
Quick Implementation Notes
All five of these tweaks can be done with template edits and a bit of JavaScript. No new plugins needed. No backend changes. Most e-commerce platforms expose breadcrumb data in their template variables, so you can add product counts, hover previews, and stock indicators by modifying the breadcrumb template file.
Start with tweak 1 (product counts). It takes 5 minutes and has the biggest impact on click-through rate. Then add tweak 5 (continue browsing trail after add to cart). Then layer in the rest over a week.
Measure the impact by tracking breadcrumb click events in your analytics. You should see a 15 to 25% increase in internal navigation clicks within the first week.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
