Solved

Removing breadcrumbs from a page

NeilD2301
Shopify Partner
39 0 16

Hi everyone I've added breadcrumbs to my Venture Theme dev site, but want to remove them from a particular page, and I'm having trouble tweaking the code:

 

https://protect-highways-england.myshopify.com/

 

password: mowttu

 

Here's my code:

 

{% unless template == 'index' or template == 'cart' or template == 'list-collections' or template == 'account' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
<a href="/" title="Home">Home</a>
{% if template contains 'page' %}
<span aria-hidden="true">&rsaquo;</span>
<span>{{ page.title }}</span>
{% elsif template contains 'product' %}
{% if collection.url %}
<span aria-hidden="true">&rsaquo;</span>
{{ collection.title | link_to: collection.url }}
{% endif %}
<span aria-hidden="true">&rsaquo;</span>
<span>{{ product.title }}</span>
{% elsif template contains 'collection' and collection.handle %}
<span aria-hidden="true">&rsaquo;</span>
{% if current_tags %}
{% capture url %}/collections/{{ collection.handle }}{% endcapture %}
{{ collection.title | link_to: url }}
<span aria-hidden="true">&rsaquo;</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ collection.title }}</span>
{% endif %}
{% elsif template == 'blog' %}
<span aria-hidden="true">&rsaquo;</span>
{% if current_tags %}
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">&rsaquo;</span>
<span>{{ current_tags | join: " + " }}</span>
{% else %}
<span>{{ blog.title }}</span>
{% endif %}
{% elsif template == 'article' %}
<span aria-hidden="true">&rsaquo;</span>
{{ blog.title | link_to: blog.url }}
<span aria-hidden="true">&rsaquo;</span>
<span>{{ article.title }}</span>
{% else %}
<span aria-hidden="true">&rsaquo;</span>
<span>{{ page_title }}</span>
{% endif %}
</nav>
{% endunless %}

 

This is the page I want to get rid of the breadcrumbs on:

Annotation 2019-11-06 101213.png

Accepted Solution (1)
OTM
Shopify Expert
696 170 252

This is an accepted solution.

Try this one:

.template-customers-login .breadcrumb {
  display: none!important;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!

View solution in original post

Replies 20 (20)

OTM
Shopify Expert
696 170 252

Hi, @NeilD2301 ,

This is Evita from On The Map.

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.breadcrumb {
    display: none!important;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
NeilD2301
Shopify Partner
39 0 16

Hi Evita,

 

That's great but it removes breadcrumb navigation from the whole site, which is not what I want. I only need it removed from the page attached in the screengrab above.

 

Best,

Neil

OTM
Shopify Expert
696 170 252

This is an accepted solution.

Try this one:

.template-customers-login .breadcrumb {
  display: none!important;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
NeilD2301
Shopify Partner
39 0 16

Perfect! Worked like a charm, thank you!

VariousQuestion
Tourist
16 0 2

Where is that code supposed to be added?

Petar_Minkov
Visitor
2 0 1

@OTM I try to use your provided solution and to remove the breadcrumbs from this page of our website: https://mascullino.com/pages/brysnarnica-mascullino.

I found the template page.barbershop.json and I tried to add the code snippets shared below but always get the following error:

Unable to update the file

  • Invalid JSON: unexpected character (after ) at line 174, column 2:

Can you please help me solve this issue?

.breadcrumb {
  display: none!important;
}

or this one:
.template-page.barbershop .breadcrumb {
display: none!important;  

Thanks,

Audreyincolour
Visitor
1 0 0

I signed in and went through that silly "not a robot" authentication just to say THANK YOU SO MUCH for that! I've been struggling to delete that for days. LOL

CarmelR
Tourist
5 0 0

I have followed these instructions but the breadcrumbs remain. I added the code to theme.scss.liquid - any other ideas?

oscprofessional
Shopify Partner
15830 2369 3072

@CarmelR ,

Please share your url with requirement. 

I will help to achieve your task.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
CarmelR
Tourist
5 0 0
oscprofessional
Shopify Partner
15830 2369 3072


@CarmelR ,

on which page the breadcrumb is appearing?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
CarmelR
Tourist
5 0 0
oscprofessional
Shopify Partner
15830 2369 3072

@CarmelR ,

ul.breadcrumbs.colored-links {
    display: none;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
CarmelR
Tourist
5 0 0

It worked! Thanks heaps, the other solutions didn't work for me. 

 

Best

Carmel

oscprofessional
Shopify Partner
15830 2369 3072

@CarmelR ,

Okay! let me know other issue>?

Or if my solution will help you then give a like and accept it .

Thanks 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
JaysonBrylle
Visitor
1 0 0

Hi @oscprofessional 

Can you also help me with our website (meaningwave.com).

There is an unknown breadcrumb. This is the link:
https://www.meaningwave.com/collections/vendors?constraint=madden-24-best-way-to-get-coins%2C%E3%80%...

Thank you!


oscprofessional
Shopify Partner
15830 2369 3072

Hello 



 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Jamma10
Visitor
1 0 0

Hi there

I too would like to know how to remove the breadcrumb navigation from a new page template I created.

I've scrolled through numerous threads but I can't seem to get any of the solutions to work for me, any help would be appreciated.

The page is called page.brandedpage.liquid (to confirm I want to keep breadcrumbs on the Categories and Product pages)

Thanks

hslnv54
Visitor
3 0 0

I am trying to remove all breadcrumb heading/subheadings from the Simple theme. I have removed the breadcrumb menu but can't find a way to get rid of the headings.

Thanks,

abbas-roholamin
Shopify Partner
1 0 0

To remove the breadcrumb in the login or register page you can try

 

 

{% unless 
  template contains 'login'
  or template contains 'register'
%}​