How to add breadcrumbs navigation in Venture theme

[Morek]

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 %}

{% endunless %}

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.