How can I display breadcrumb navigation only on product and collection pages?

Store Design
, , , ,
1

Hi! So I have this great breadcrumb navigation right now on my website; the problem is that it’s everywhere. Most of my website is only one or two levels deep aside from my products and collections, so there are definitely pages and sections where it’s unnecessary. I hope only to have it displayed for my products and nothing else. The breadcrumb snippet is on my theme.liquid file, which includes every page and section of my website. Is there any way I can just have it displayed on my products and collections? Thankss

2

Hello there

Yes, it’s possible to display the breadcrumb navigation only on your product and collection pages in your Shopify store. You’ll need to modify the code in your theme to add a conditional statement that checks whether the current page is a product or collection page, and only displays the breadcrumb navigation in those cases.

Here’s an example of how you could modify the code to achieve this:

  1. Open your theme files in the Shopify admin and go to Layout > theme.liquid.

  2. Locate the code that outputs the breadcrumb navigation. This code may look something like this:

{% if template contains 'product' or template contains 'collection' %}
  {% include 'breadcrumb' %}
{% endif %}
  1. Replace the above code with the following code:
{% if template contains 'product' %}
  {% include 'breadcrumb' %}
{% elsif template contains 'collection' %}
  {% include 'breadcrumb' %}
{% endif %}

This code checks whether the current template is a product template or a collection template, and includes the breadcrumb navigation if it is. It uses an elsif statement to check for the collection template.

3

Thank you so much! It worked perfectly! :slightly_smiling_face: