Mobile Product Page Breadcrumbs: 6 Common Mistakes (& 10 Brilliant Ideas)

A lot of customers should be able to navigate towards your conversion goals with help from breadcrumbs. 

However, 36% of retailers fail to accommodate the full product catalog hierarchy into their breadcrumbs.

This then leads to your users feeling lost in your eCommerce store and being unable to find the products they’re looking for.

That’s why in this post, we’ll highlight 6 common mobile product page breadcrumbs mistakes users face and 10 best practices to lead users to more conversions.

6 Mobile Product Page Breadcrumb Mistakes

When it comes to breadcrumbs, there's a fine line between making them work for you and against you. Walk it well by understanding these six common mistakes.

1. Using breadcrumbs with multiple product categories 

When a product page falls under more than one parent category, it can confuse your prospective customer.

In our example below, Autograph Foliages categorizes this product under wall mats, floor mats, and foliage mats.

A typical user who is looking for floor mats might be hesitant about purchasing this product because what if it isn’t truly a floor mat?

Besides confusing the customer, this creates an avoidably long breadcrumb path.

In your breadcrumbs, make sure to stick to one major product category to avoid confusion.

Want more? Check out 12 ideas for building high-converting category pages

2. Diverting user attention from the main content 

Many websites don’t optimize their breadcrumbs for size. If your breadcrumbs are taking up more than half of your screen size, then they may not be crumbs after all. 

In our example below, Body Bliss makes the mistake of letting their breadcrumbs take up to a quarter of their mobile screens. You can barely see what the entire product looks like without swiping.

Since you’re designing for mobile, you should always maximize whatever space you have available for product-related content.

Are your product pages failing to deliver? Check out the complete product page guide and learn from examples, best practices, templates, plus other brilliant stuff.

3. Not meeting the tap target size 

When designing for mobile you have to optimize for the thumb.

So when websites don’t optimize for tap targets, it can get very frustrating to even use those breadcrumbs. Not only does it waste time, but it can lead to shopping abandonment.

In our example below, it’s so hard to tap on the exact trail you’d want without mistakenly hitting another option.

Ideally, your breadcrumbs should have a tap target of 1x1 cm.

4. Not aligning breadcrumbs to conversion goals

Your customer journey flow impacts conversion rate because it determines how fast store visitors get to the checkout page.

If it takes too many steps, there are higher chances of drop-off. This is why your breadcrumbs should align with the quickest way to checkout.

Unfortunately, many brands make the mistake of overcategorizing their breadcrumbs. 

In our example below, Tyler’s creates too many categories that’ll increase the user journey. And so the breadcrumbs don’t point to levels enough for conversions.

Having all these categories listed out makes it easy for any customer to fall into a rabbit hole and forget their intended purchase.

Consider using only categories that are milestones preferably 2-3 at most.

Hey, you’ll love this: The Ultimate Guide to Improving Mobile Conversions (19 Tactics to Get More Sales Today)

5. Wrapping breadcrumbs multiple times

On mobile, when long breadcrumbs automatically break, they create a new line. These breaks can extend to multiple lines depending on how long your breadcrumb is.

What it does is take up valuable space on your user’s screen. This will then push important information below the fold of their screen. 

In this example, you’ll see that there is no other product information aside from the image.

They don’t know the brand, and can not see the description, price or product name even on larger screens. So there’s no nudge to check out at first glance.

6. Using ellipses in breadcrumbs leads

While ellipses are a way to reduce long breadcrumbs, they usually take up more cognitive effort. 

This is because when you show the presence of more layers with this symbol “....” a user has to constantly click on it every time a layer is wrapped.

This will not only take up more time to review all linked trails but it’ll also require the user to take avoidable actions.

10 Mobile Product Page Breadcrumbs Best Practices

Breadcrumbs are an invaluable tool that dive deeper and let customers fully familiarise themselves with Mobile Product Pages. Here's how to make the most out of them.

1. Leave some negative space

While you might want to make the most out of the spaces you have on your mobile product page, it’s advisable to leave some white space around them.

Avoid squeezing in offers and deals around your breadcrumbs. They can get distracting and cause your customers to overlook these crumbs.

In our example below, TommieCopper advertises their free shipping offer while still leaving enough room for their breadcrumbs to be visible.

You’d see that there’s a lot of white space around it and even in between the slashes.

2. Highlight interactive breadcrumbs with visual cues 

It’s quite difficult to hover on mobile, so you need to add visual cues that’ll tell your customers that your breadcrumbs can be tapped.

You can choose to use lines, arrows and other directional cues. 

In this example below, Black Diamond Equipment uses a black hyperlink to show that the Home and Footwear section leads to somewhere else.

Since we’re on the climbing shoe section, there’s no cue to tap on that section.

3. Use filters instead (when possible)

It’s tempting to always want to stick with outlining categories in your breadcrumb trail.

However, there are other ways you can show your available categories on mobile product pages.

One effective method is by introducing filters. This way, your customers can browse through all available items in each category. 

See how HushPuppies achieves this below;

The goal here is to ensure you avoid overcategorization with breadcrumbs. It’s also a great way to increase conversions because you’ll be aligning your breadcrumbs to conversion steps only.

Catch your fancy? Check out 10 smart ideas to improve eCommerce filters (and 7 lessons from Amazon)

4. Avoid redundant breadcrumbs

Let’s face it - your homepage can be accessed through many icons on the product page. So do you need it as a trail on your breadcrumb?

The answer is NO.

Take out all the redundant breadcrumbs to not only save space but also make your crumbs conversion-focused. 

Below, Molton Brown does an excellent job of adding a homepage icon instead of listing it as part of their breadcrumbs.

5. Ignore the “half-rule” for mobile 

So many people think that breadcrumbs should extend only to half of the entire horizontal length of a page at all times. Unfortunately, this rule may not always apply to your design.

So while it’s a way of making them more visible, this doesn’t mean you should collapse your breadcrumbs once they pass half the length of the page, especially when designing for mobile.

In our example above, you’d see how this breadcrumb is visible, clean and still extends past the “half-rule”.

6. Collapse breadcrumbs if there are 4+ items

In our recommendation above, we talked about ignoring the half-rule. Well, the key to finding the balance is to ensure you collapse your breadcrumbs if there are more than four items in them. 

This is a great way to avoid the cognitive load that comes with scrolling and just making everything visible in one glance.

Here’s a great example from SaddlebackLeather;

As you’d see, they avoided the need to scroll or use confusing ellipsis. 

7. Use arrows to convey movement

Typically, slashes mean ‘Or’. And while they’ve become a go-to for designing breadcrumbs, we suggest you use arrows.

This is because they are directional symbols that tell your user what the next step is and what the progression of events has been.

 this, it’s easy on the eye and it gives your design a minimalistic yet very organized feel. 

See how SugarBoo and Co achieves this below;

8. Don’t replace the main navigation menu

Your breadcrumbs are a secondary way to navigate your website. So keep in mind that your navigation menu should still be the primary means to view products and explore your catalog. 

Your breadcrumb mustn't act as a replacement for your main menu.

So, always make your navigation icon visible across your entire mobile product pages and ensure that they work.

In our example above you’d see that although the breadcrumb isn’t located at the top of the screen, the navigation icon remains static.

This way a customer can easily access a new category whenever they need to.

Hey, have you seen this? 15 navigation changes (across the funnel) to improve conversions

9. Avoid linking the last layer of breadcrumbs

If the last layer of the breadcrumbs is the page a user is currently on, what does it then link to? You should avoid adding a link that does nothing to help your conversions.

It’s only going to cause rage clicks. A good way to differentiate between the layers with links is to either change the color or add an underline to the text. 

In our example, you’d see that the categories Home and Face are hyperlinked. You can identify this with the underline underneath them. The current page is left as it is.

10. Make breadcrumbs swipeable

Another way to ensure that your breadcrumbs don't take up valuable screen on mobile devices is to make them swipeable.

Since wrapping text can backfire for especially long trails, show your users that they can swipe across the available navigation links. 

The trick here is to ensure that your customer can identify that this breadcrumb is swipeable. Revelry does a great job by cutting the last letters in the breadcrumb. This will tell anyone on this site that there’s more at the end of this visible breadcrumb.

Always remember that your breadcrumbs are trails and so this makes them a secondary navigation section. Also, mobile screens tend to be a lot more limited. So consider maximizing every section of your space for important product details. 

Keep your mobile breadcrumb design simple and find ways to keep them short. Ensure they’re useful and tie in directly with your conversion goals.