Breadcrumbs Uncomplicated inherits every visual choice from your theme - link colour, text colour, font, hover behaviour, spacing. The job of the app is to add the breadcrumb trail itself, not to impose a look on top of your existing design. If the rendered breadcrumb doesn’t look the way you expect, it’s almost always because your theme didn’t set that style on links or text, and the app is faithfully inheriting the gap. Every override below is a one-click setting in the theme block; the CSS escape hatch at the end covers the rest.
Inheriting theme colours (the default)
By default the breadcrumb inherits your theme’s link, text and hover colours - the block emits no colour CSS unless you ask it to. On most themes that’s exactly the right thing: the trail picks up the same accent colour as your other navigation, and visited / hover states match the rest of the site.
If the inherited colours don’t suit (because your theme uses scoped colour schemes that the embed sits outside of, or because the theme uses transparent text colours that look wrong above an image), tick Override theme colours and the app exposes three colour pickers: Link text colour, Separator colour and Product title colour. Turn the override off and the inheritance returns.
Spacing - above, below, and between
The vertical space around the breadcrumb is whatever margin your theme’s parent section provides. If you need a different rhythm:
- Set spacing above - a range slider, -60 to +60 px in 5 px steps, applied as
margin-topon the breadcrumb nav. - Set spacing below - same range and step, applied as
margin-bottom. - Set spacing between breadcrumbs - a Small/Medium/Large select (0.3em / 0.6em / 1.0em) controlling the gap around each separator.
There is no left-padding setting - horizontal alignment is inherited from whatever section wraps the block. If a theme indents app blocks differently, see the Wrapper class advanced setting.
Aligning with the product image
On some themes the breadcrumb sits above a full-width product image, but the breadcrumb itself is constrained to the narrower content column, so it looks misaligned. That’s a theme decision: the breadcrumb inherits the width of whatever section it’s placed in.
There’s no “full-bleed” toggle in the block. The fix is to move the breadcrumb block into the same section as your image gallery (so it picks up the same page-width), or to add a Custom Liquid block with a <style> override that pulls the nav out to full width.
Custom separators
Default is › (right single angle quotation mark, ›), chosen because it’s visually quiet on every theme. The Breadcrumb separator setting offers four choices: arrow (›), forward slash (/), backslash (\) and vertical bar (|). A true custom character or SVG isn’t a built-in option - for that you need the CSS escape hatch (target .breadcrumb__sep and replace its content), covered below.
Uppercase and underline
The breadcrumb takes its capitalisation and underlining from your theme by default. When you want different behaviour:
- Capitalization - Theme default, All uppercase, All lowercase, Capitalize each word, or Capitalize first word.
- Link underlining - Theme default, Add underline, Remove underline, or Underline only on hover.
There’s no bold setting in the block - for bold you’ll want the CSS snippet below.
When you do need CSS
For the less-common needs - bold weight, a specific theme override, hover states, animated separators - the app gives every breadcrumb element a stable class name. The nav has id #uncomplicated-breadcrumbs and class .category-breadcrumbs; each non-leaf link is a.breadcrumb__branch; the optional text-only final item is span.breadcrumb__leaf; each separator is span.breadcrumb__sep.
The most-requested tweak is hiding the breadcrumb on small screens, where vertical space is at a premium:
@media (max-width: 900px) {
#uncomplicated-breadcrumbs { display: none; }
}
The cleanest place to put that snippet is in a Custom Liquid block in the Shopify Theme Editor, wrapped in <style> tags. This screencast walks through inserting one:
What not to do
Don’t paste CSS directly into your theme’s code to override the breadcrumb. Put it in a Custom Liquid block (as above), a custom CSS asset, or the theme editor’s Custom CSS field, so theme updates don’t blow it away.
Summary
The defaults are deliberate: the app inherits everything from your theme so the breadcrumb feels native without configuration. Every setting on this page is an opt-in escape hatch for the cases where the theme’s defaults aren’t what you want.