Re: How to add breadcrumbs navigation in Venture theme
Hi @akshay202
Hope you're having a great day!
To include breadcrumb navigation:
See more details here.
If you have any further questions, please do reach out either here on the forum, or via private message/email.
Hi @akshay202
It's possible.
Follow the next steps to insert breadcrumb navigation to your store:
Step 1:
Step 2: Generate a brand-new snippet for the breadcrumbs code:
In the snippets' directory create a new file called breadcrumbs.liquid.
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' %}
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:
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:
To enable/disable globally your breadcrumb, follow the steps specified below:
When you first open the theme editor, the sections for the home page are shown like specified below, hit Theme Settings:
From the Theme Settings' page, Hit Navigation like below:
From the Navigation page, enable/disable Breadcrumb and hit Save like below:
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.
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!
Hey @Morek
Thanks for your explanation. After using your code I had some changes on my home page:
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
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024