How can I create another side bar menu?

Solved
Excursionist
62 0 3

Screenshot 2019-11-08 at 13.19.13.png

website url: https://piecefulmind.myshopify.com/

I want to create another navigation menu on the left side just like the example above. Another way to do it would be creating new collections on the sidebar menu that already exists on the right side and moving the collection items all the way to the right side, I don't know the codes for both methods. Please help me!

0 Likes
Shopify Expert
2161 360 449

Hi @aaaf 

For that you have to make liquid code,  If you want same menu on left side then find it code in Section->header.liquid and make copy of those code and adjust just css for second code.

Or if you want to show different collection then you have to make custom code.

Let me know if you need any help.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
62 0 3

I want to add a custom collection menu, not the same collections as the one on the right side. 

I would like to know what codes I need to put to add another custom sidebar menu on the left!

@Jasoliya 

0 Likes
Highlighted
Shopify Expert
2161 360 449

Add one menu in navigation and then get it by code and show on left side:

{% for link in linklists.custom-coll.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}

Note: here custom-coll is handle of new menu, add your collection to this menu that you want to show on left side.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
62 0 3

Which sheet do I put that code in? 

and if I say I want to move NOTICE! collection, do you mean I need to do something like this? @Jasoliya 

{% for link in linklists.NOTICE!.links %}
  <a href="{{https://piecefulmind.myshopify.com/collections/notice }}">{{ NOTICE! }}</a>
{% endfor %}

 

0 Likes
Shopify Expert
2161 360 449

If you want to show collection list on left side then you have to do as i told you we have not other way.

Create one navigation menu from "Online store->Navigation->create new menu"(add all collection that you ant to show on left side)

Then make code in Section->header.liquid file like bellow:

{% for link in linklists.custom-coll.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}

By this you can get all collection from this menu and then style them.

custom-coll is handle of new menu that you created.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
62 0 3

I created a menu handle called left-menu. 

 I put this code in the header.liquid section, and I don't see the collections for left menu that I added. Do I need to put something in 

<a href="{{ link.url }}">{{ link.title }}</a> this part? @Jasoliya 

{% for link in linklists.left-menu.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}

 

0 Likes
Shopify Expert
2161 360 449
That code made menu on page now you have to design it with css like right menu
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
62 0 3

to design it do I use the code .left-menu on theme.scss sheet? 

the menu is not even visible right now, to make it visible will I need put codes like display: block?

 @Jasoliya 

0 Likes

Success.

Shopify Expert
2161 360 449
<ul class="list--nav">
{%
for link in linklists.left-menu.links %}
<li class="site-nav__item">
<a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
<li> {% endfor %}
</ul>

try this and then add css to those class. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes