How do I add custom CSS?

Add your rules to Custom CSS, under Advanced in the Breadcrumbs by Shopgears block settings in the theme editor, then click Save. No theme code files need editing.

What it is

The breadcrumb block's built-in settings cover font size, spacing, colours and the Home label. For anything beyond those, the block has a Custom CSS setting in its Advanced group. CSS you add there is output with the breadcrumb block, so you can style the trail precisely, with changes such as a different font weight, an underline on hover, uppercase text or a custom background, without editing your theme's code files.

How to set it up

1. Open the theme editor. From the app, use Set up pages on Home, or go to Online Store › Themes › Customize in Shopify.

2. Open a template that has the breadcrumb block, such as a product page.

3. Click the Breadcrumbs by Shopgears block to open its settings.

4. Scroll to Advanced and find Custom CSS.

5. Enter your CSS rules. For example, to make links bold, you could add a rule that sets font-weight: 600; on the trail's links.

6. Check the preview, then click Save in the theme editor.

7. Add the same CSS to the block on other templates if you want it everywhere.

Start with small changes and check the result on both desktop and mobile. If a rule doesn't seem to apply, your theme's own styles may be more specific, so you may need a more specific selector.

Why it's useful

Every theme is different, and sometimes the last few details matter. Custom CSS gives designers and developers full control over the trail's appearance without forking the theme or touching Liquid files. Because the CSS is stored on the block, it travels with the theme, survives app updates, and disappears cleanly if you remove the block. It's ideal for matching an exact brand style guide once the built-in settings have got you most of the way there.