How can I hide the 'Home' breadcrumb on my site?

Topic summary

A user wants to hide the ‘Home’ breadcrumb link across their Shopify site to prevent visitors from accessing the homepage.

Solutions Provided:

Two community members offered CSS-based solutions:

  • Option 1: Add custom CSS targeting the first breadcrumb item through Theme Customizer → Settings → Custom CSS
  • Option 2: Insert CSS code at the end of the theme.css file (located in the assets folder)

Both solutions use similar CSS selectors to hide the first breadcrumb element and its separator using display: none.

Status: The discussion appears resolved with working code snippets provided, though no confirmation from the original poster indicates whether either solution was implemented successfully.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.

Hi,

im looking to hide the HOME in all the breadcrumbs so they can’t access the homepage. My site is https://b32b39-5.myshopify.com/collections/all

Hey @MIKESTORK ,

Please add this to the Custom CSS in the Theme Customizer → Settings

nav.breadcrumb.breadcrumb--floating ol.breadcrumb__list.unstyled-list li:first-child,
nav.breadcrumb.breadcrumb--floating ol.breadcrumb__list.unstyled-list li:nth-child(2):before {
    display: none;
}

You should find it here.

1 Like

@MIKESTORK , Hope you are doing well.

Please add the below line of CSS code at the end of your theme.css file. You can find this file under the assets folder.

.breadcrumb__list li:first-child,
.breadcrumb__list li:nth-child(2)::before{
    display: none;
}