How to have more than one list in the Vend Ecommerce Sidebar

Intro

The Vend Ecommerce system has a single list sidebar as default. To get more lists in requires editing the code. Here’s how we did it…

Background

We had a client come to us wanting help setting up an eCommerce site for an existing offline (real world? / bricks and mortar?) shop.

Options considered included a WordPress site with Woocommerce and, alternatively, Shopify. But the client was using the Vend POS system in the shop (and extremely happy with it) and as part of that package Vend offers a free hosted website with integration to the POS system. So…that was an easy decision. Who doesn’t like “free” and “integrated”?

Learning Curve

Vend Ecommerce was new to us so we had a steep learning curve and one of the first issues that came up was the sidebar.

Take Two Lists into the Sidebar?

In Ecommerce / Design / Theme / (click on the theme name) there is an option called “Collections Sidebar” but this just allows the choice of whether or not to show a collection in the sidebar and which (single) collection to show. Not good enough. We wanted to show 2 collections (namely Category and Brand). So how to do?

The Shopify Connection

The Ecommerce venture appears to be fairly new for Vend so there’s not much on the internet about it. But we did establish that it is built on the Shopify Timber framework. So most problems we had were solved by searching the Shopify online support. But not this one. In Shopify, if you wanted to include an existing collection called “category” in the sidebar you would edit collection_sidebar.liquid and put in:

{% for link in linklists.category.links %}

but this doesn’t work in Vend. After much head scratching we worked out the solution was to use the word “navigation” instead of “linklists“. i.e.:

{% for link in navigation.category.links %}

Why the Vend version should be different we cannot say. Everything else we worked on was the same as Shopify.

Job done

We couldn’t find this solution on the internet so we’re posting it here. Hopefully this helps someone.

The Final Code:

Edit collection-sidebar.liquid to make:

<h3>{{ 'CATEGORY' | t }}</h3>
 <ul>
 {% for link in navigation.category.links %}
 <li><a href="{{ link.url }}">{{ link.title}}</a></li>
 {% endfor %} 
 </ul>

<h3>{{ 'BRAND' | t }}</h3>
 <ul>
 {% for link in navigation.brands.links %}
 <li><a href="{{ link.url }}">{{ link.title}}</a></li>
 {% endfor %} 
 </ul>

Visit the site to see the result.