Re: How to add breadcrumbs navigation in Venture theme

How to add breadcrumbs navigation in Venture theme

akshay202
Excursionist
13 0 2

I want to add breadcrumbs navigation to my store, i tried searching for an answer in the older posts but couldn't find one.

It would be great if someone could help me out.

 

Replies 18 (18)

Morek
Shopify Partner
835 73 179

Hi @akshay202 

Hope you're having a great day!

I've read your problem and before providing a solution, would like to analyze your website. Then, I will provide a solution to you up here - on the forum.

Could you share your website URL? And if your website is password protected then also provide a password?

If you have any further questions, please do reach out either here on the forum, or via private message/email.

If you're looking for a Shopify developer or just want to connect, don't hesitate to reach out!
Portfolio: https://mmorek.com/
LinkedIn: https://www.linkedin.com/in/mmorek
WhatsApp: Whatsapp me!
akshay202
Excursionist
13 0 2
Morek
Shopify Partner
835 73 179

Hi @akshay202 

What are the pages on which you would like to have the breadcrumb?

If you have any further questions, please do reach out either here on the forum, or via private message/email.

If you're looking for a Shopify developer or just want to connect, don't hesitate to reach out!
Portfolio: https://mmorek.com/
LinkedIn: https://www.linkedin.com/in/mmorek
WhatsApp: Whatsapp me!
akshay202
Excursionist
13 0 2

I want the breadcrumb like home>collections>product.

I have made different collections for  all the products.

Whenever a customer opens any  product i want a breadcrumb navigation on that page even if he has searched the product through search bar.

Is it possible to get it this way?

As each product somehow belongs to a collection.

 

Morek
Shopify Partner
835 73 179

Hi @akshay202 

Hope you're having a great day!

To include breadcrumb navigation:

scrnli_29_05_2021_14-24-03.png

See more details here.

If you have any further questions, please do reach out either here on the forum, or via private message/email.

If you're looking for a Shopify developer or just want to connect, don't hesitate to reach out!
Portfolio: https://mmorek.com/
LinkedIn: https://www.linkedin.com/in/mmorek
WhatsApp: Whatsapp me!
akshay202
Excursionist
13 0 2

Hi @Morek ,

Is it possible to add breadcrumb navigation to Venture theme as currently I am using that theme for my store.

Morek
Shopify Partner
835 73 179

Hi @akshay202 

It's possible.

Follow the next steps to insert breadcrumb navigation to your store:

Step 1:

scrnli_22_05_2021_15-34-42.png

Step 2: Generate a brand-new snippet for the breadcrumbs code:

In the snippets' directory create a new file called breadcrumbs.liquid.

add-snippet.gif

 

Step 3: Copy the Liquid code given below and paste it into the code editor for the breadcrumbs.liquid snippet

 

{% unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' %}

{% assign t = template | split: '.' | first %}

<div class="page-width">
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol>
    <li>
      <a href="/" title="Home">Home</a>
    </li>

  {% case t %}
  {% when 'page' %}

    <li>
      <a href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
    </li>

  {% when 'product' %}

    {% if collection.url %}
      <li>
        {{ collection.title | link_to: collection.url }}
      </li>
    {% endif %}

    <li>
      <a href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
    </li>

  {% when 'collection' and collection.handle %}

    {% if current_tags %}
      <li>{{ collection.title | link_to: collection.url }}</li>
      <li>
        {% capture tag_url %}{{ collection.url }}/{{ current_tags | join: "+"}}{% endcapture %}
        <a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
      </li>
    {% else %}
      <li>
        <a href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
      </li>
    {% endif %}

  {% when 'blog' %}

    {% if current_tags %}
      <li>{{ blog.title | link_to: blog.url }}</li>
      <li>
        {% capture tag_url %}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{% endcapture %}
        <a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
      </li>
    {% else %}
      <li>
        <a href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
      </li>
    {% endif %}

  {% when 'article' %}

    <li>{{ blog.title | link_to: blog.url }}</li>
    <li>
      <a href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
    </li>

  {% else %}

    <li aria-current="page">
      <a href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
    </li>

  {% endcase %}

  </ol>
</nav>
{% endunless %}
</div>

 

Hit Save to get your changes confirmed and applied to breadcrumbs.liquid.

 

Step 4: Add the snippet into layout.liquid

 

{% include 'breadcrumbs' %}

 

Tap theme.liquid to open it in the code editor. Include the snippet for all the pages of our site. The best place to output the breadcrumb snippet is above {{ content_for_layout }} in the theme.liquid file, just inside your main content wrapper. To output our breadcrumbs snippet add the above code where you wish them to appear and hit Save:

Example:

{% include 'breadcrumbs' %}

scrnli_31_05_2021_19-21-03.png

 

Step 5: Adding CSS

Add the following CSS to the bottom of theme.css.liquid or theme.css, and hit Save, to style the breadcrumbs we’ve made:

 

/* Breadcrumbs' styles */
.breadcrumbs {
  font-size: .85em;
  margin: 0 0 2em;
}

.breadcrumbs ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: inline-block;
}

.breadcrumbs a {
  text-decoration: underline;
}

.breadcrumbs li:not(:last-child):after {  
  content: "›\00a0";
  display: inline-block;
  padding-left: .75ch;
  speak: none;
  vertical-align: middle;
}

.breadcrumbs [aria-current="page"] {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
}

.breadcrumbs [aria-current="page"]:hover,
.breadcrumbs [aria-current="page"]:focus {
  text-decoration: underline;
}

 

 

Example:

scrnli_31_05_2021_19-32-26.png

 

Step 6: Making your breadcrumb dynamic with theme settings (Optional)

Giving to yourself the option to disable or enable breadcrumbs globally on your website. Instead of adding {% include 'breadcrumbs' %} as specified in step 4, add the below snippet

:

{% if settings.show_breadcrumb_nav %}
  {% include 'breadcrumbs' %}
{% endif %}

 

Then inside your settings_schema.json file, located in the config directory of your theme, add the following setting for Navigation and turning on and off breadcrumbs.

  {
    "name": "Navigation",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_breadcrumb_nav",
        "label": "Show breadcrumb navigation"
      }
    ]
  },

 

Example:

scrnli_31_05_2021_20-00-44.png

To enable/disable globally your breadcrumb, follow the steps specified below:

scrnli_31_05_2021_14-18-18.png

When you first open the theme editor, the sections for the home page are shown like specified below, hit Theme Settings:

scrnli_31_05_2021_19-50-01.png

From the Theme Settings' page, Hit Navigation like below:

scrnli_31_05_2021_19-52-50.png

From the Navigation page, enable/disable Breadcrumb and hit Save like below:

scrnli_31_05_2021_19-54-23.png

Get building some breadcrumbs into your Venture theme today!

If you have any further questions, please do reach out either here on the forum, or via a private message/email.

If you're looking for a Shopify developer or just want to connect, don't hesitate to reach out!
Portfolio: https://mmorek.com/
LinkedIn: https://www.linkedin.com/in/mmorek
WhatsApp: Whatsapp me!
akshay202
Excursionist
13 0 2

Hey @Morek ,

Thank you for the help.

With the first 5 steps I am successfully able to display breadcrumb navigation on my page,

But the navigation is displayed as Home->product ,

Instead of Home->collection->product.

Is there any way to solve this issue?

 

And if I want to go ahead with step 6 of your given solution then what should I name the snippet of step 6?

 

 

blrhode
Visitor
1 0 0

This was very useful, thank you!  However, it's only showing "Home - "Product", its not showing the Collection in between.  Is there a way to fix this?  Thanks!

Screen Shot 2021-07-27 at 9.41.12 AM.png

Lucas1986
Visitor
3 0 0

Thanks for the thread. I followed all instructions and I can now enable/disable breadcrumbs on my Venture theme. However... just like the other guys mentioned, the breadcrumbs are only showing Home > (product). Seems like it's skipping the collections in between, which is kind of crucial for customers to quickly link back to collections etc, without going through the menu again. I appreciate your thread, but could you please get back to us, as to how to rectify this. Many Thanks

Lucas1986
Visitor
3 0 0

Okay, so after digging around on the internet, I've managed to find a fix. The reason the breadcrumb navigation doesn't display the collection is due to the setup of the 'product cards'. 

If you go into Online Store > Themes > Actions > Edit Code and then open up /snippets/product-card.liquid there is code at the top for building the links to products that should be {{ product.url }} by default. You'll want to replace that with {{ product.url | within: collection }}.

AND HEY PRESTO!! IT'S FIXED!

There may be differing opinions on whether the product urls that contain the collection information are the "proper" way to set up the urls but that's another conversation. Keep in mind though that people still won't always navigate to a product through the context of a collection (via search as an example) and so there will still be ways to get a product url without the collection information.

SofiaApostolo
Visitor
1 0 0

Hey @Morek 

Thanks for your explanation. After using your code I had some changes on my home page:

Screen Shot 2021-10-11 at 12.35.49.png

So that white space between the navigation and the banner and also between the banner and the categories shouldn't exist. Any way you can help with that?

Many thanks in advance, hope to hear from you.

Sofia

chrisngrod1
Shopify Partner
20 0 9

@SofiaApostolo here we are a year later.  I was looking through this trying to figure out if I want to update Venture in general or add a whole new theme.

 

Decided to do some tweaks.

What worked for me was:

.main-content {
  display: block;
  margin-top: 0px;
  padding-bottom: $gutter-site * 2;

  @include media-query($medium-up) {
    margin-top: 0px;
    padding-bottom: $gutter-site * 4;
  }

  .template-index & {
    padding-bottom: 0;
  }
}

 

Basically forced the margin-top here to 0px. Two locations.

 

It made the breadcrumbs butt up against the notification bar at the top, so I added  <p> after <ol> and </p> before </ol> in the breadcrumbs.liquid.

digitalmix
Tourist
10 0 2

Hey Chris, do you mind explaining where you added this code to close the gap between the slider and notification bar?

chrisngrod1
Shopify Partner
20 0 9

Looks like I put it in:

 

theme.scss.liquid

 

Let me know if that works for you.

digitalmix
Tourist
10 0 2

It worked very well however I require another paragraph <p> but not sure how I'm going to make it work code wise 😕 Do you happen to know any chance? I tried adding another line of <p> but it did not work. Maybe I made the structure wrong

chrisngrod1
Shopify Partner
20 0 9

Here is my entire breadcrumbs.liquid

 

{% unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' %}

{% assign t = template | split: '.' | first %}

<div class="page-width">
  
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol><p>
    <li>
      <a href="/" title="Home">Home</a>
    </li>

  {% case t %}
  {% when 'page' %}

    <li>
      <a href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
    </li>

  {% when 'product' %}

    {% if collection.url %}
      <li>
        {{ collection.title | link_to: collection.url }}
      </li>
    {% endif %}

    <li>
      <a href="{{ product.url | within: collection }}" aria-current="page">{{ product.title }}</a>
    </li>

  {% when 'collection' and collection.handle %}

    {% if current_tags %}
      <li>{{ collection.title | link_to: collection.url }}</li>
      <li>
        {% capture tag_url %}{{ collection.url }}/{{ current_tags | join: "+"}}{% endcapture %}
        <a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
      </li>
    {% else %}
      <li>
        <a href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
      </li>
    {% endif %}

  {% when 'blog' %}

    {% if current_tags %}
      <li>{{ blog.title | link_to: blog.url }}</li>
      <li>
        {% capture tag_url %}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{% endcapture %}
        <a href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
      </li>
    {% else %}
      <li>
        <a href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
      </li>
    {% endif %}

  {% when 'article' %}

    <li>{{ blog.title | link_to: blog.url }}</li>
    <li>
      <a href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
    </li>

  {% else %}

    <li aria-current="page">
      <a href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
    </li>

  {% endcase %}

  </p></ol>
</nav>
{% endunless %}
</div>

Nanou5678
Visitor
1 0 0

Bonjour,

Il faut d'abord créer un dossier dans snippets et le nommer breadcrumbs.liquid y coller le code que j'ai écris plus bas.
Ensuite dans le dossier layout - theme.liquid trouver ces lignes :
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
Puis insérer : {% include 'breadcrumbs' %} juste au dessus de {{ content_for_layout }}

J'ai le thème Dawn et voici mon liquid personnalisé pour mon fil d'Ariane :

{% comment %}
Fil d'Ariane personnalisé pour Shopify
{% endcomment %}

<nav aria-label="breadcrumb" class="breadcrumb">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="{{ shop.url }}">Accueil</a>
</li>
{% if template == 'index' %}
<!-- Page d'accueil n'a pas besoin de fil d'Ariane supplémentaire -->
{% elsif template == 'collection' %}
<li class="breadcrumb-item active">Collections</li>
<li class="breadcrumb-item active">{{ collection.title }}</li>
{% elsif template == 'product' %}
<li class="breadcrumb-item">
<a href="/collections">Collections</a>
</li>
{% assign current_collection = collection %}
{% if current_collection == blank %}
{% assign current_collection = product.collections.first %}
{% endif %}
{% if current_collection %}
<li class="breadcrumb-item">
<a href="{{ current_collection.url }}">{{ current_collection.title }}</a>
</li>
{% endif %}
<li class="breadcrumb-item active">{{ product.title }}</li>
{% elsif template == 'page' %}
<li class="breadcrumb-item active">{{ page.title }}</li>
{% elsif template == 'article' %}
<li class="breadcrumb-item">
<a href="{{ blog.url }}">{{ blog.title }}</a>
</li>
<li class="breadcrumb-item active">{{ article.title }}</li>
{% endif %}
</ol>
</nav>

<style>
.breadcrumb {
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
background-color: #dbdbdb;
padding: 4px;
}
.breadcrumb-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.breadcrumb-item {
margin-right: 4px;
}
.breadcrumb-item a {
text-decoration: none;
color: #000000;
}
.breadcrumb-item::after {
content: "/";
margin-left: 4px;
color: #000000;
}
.breadcrumb-item:last-child::after {
content: "";
margin-left: 0;
}
.breadcrumb-item.active {
color: #000000;
}
</style>

Pour le personnaliser à votre image de marque vous n'avez qu'a remplacer les # par vos coloris et les modifier les marges au besoin.

N'oubliez pas TOUTES MODIFICATIONS DE CODE CSS OU HTML OU LIQUID PEUX AVOIR DES CONSEQUENCES DESASTREUSES ALORS SAUVEGARDER BIEN VOTRE THÈME AVANT !