There is 2 Breadcrumbs showing on collection page. How i can remove one from specific collection?

Store Design

Topic summary

A user encountered duplicate breadcrumbs appearing on a specific Shopify collection page and wanted to remove one while keeping breadcrumbs on other collections.

Initial Solutions Offered:

  • Multiple contributors suggested CSS code to hide breadcrumbs by adding display:none rules to theme.css or base.css files
  • Early solutions removed breadcrumbs from all collection pages, not just the specific one

Resolution:

  • After the user clarified they wanted to target only the “deal-town-collection” (ID: 282600208435), a targeted CSS solution was provided
  • The final code used a specific selector: #HeaderCollectionSection-template--19028004307210__banner breadcrumb-component with display:none
  • The user initially reported this didn’t work, but after verification with screenshots, confirmed the issue was resolved

Key Takeaway: The solution required targeting the specific collection’s header section ID rather than applying a global breadcrumb hide rule.

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

There is 2 Breadcrumbs showing on collection page. How i can remove one from specific collection?

https://www.tridentproducts.co.uk/collections/deal-town-collection

shopify 21.jpg
shopify 21.jpg1092Ă—909 61.3 KB

1 Like
2

Hi @hamzaabbas

What breadcrumb do you want to remove? above Categories or below logo?

3

Hey @hamzaabbas

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1734076656772.png
Moeed_0-1734076656772.png1896Ă—915 134 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

Hi @hamzaabbas

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
breadcrumb-component.breadcrumb-container.style--line_clamp_1.scroll-trigger.animate--slide-in {
    display: none;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

5

Above Categories

6

@hamzaabbas

steve_michael2_0-1734085503664.png
steve_michael2_0-1734085503664.png810Ă—492 68.5 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

7

It removed the breadcrumb from all collections, i want to remove on specific collections.

8

It removed the breadcrumb from all collections, i want to remove on specific collections.

9

@hamzaabbas

So, tell me the name of that specific collection.

10

Here is the collection https://www.tridentproducts.co.uk/collections/deal-town-collection

id is 534802006282

11

@hamzaabbas Try this code

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
#HeaderCollectionSection-template--19028004307210__banner breadcrumb-component.breadcrumb-container.style--line_clamp_1.scroll-trigger.animate--slide-in {
    display: none;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

12

It’s not working.

13

steve_michael2_0-1734088659317.png
steve_michael2_0-1734088659317.png736Ă—489 52.4 KB

Bro, it’s working now. Check the screenshot and mark the solution as resolved.