How do i add a different menu to my website having a hard time

cupcosmos
Visitor
1 0 0

My website is cupcosmos.com I created a second page called Shirt Cosmo and would like to know how to make my second menu stick to it. My second menu is called Shirt Collection? I'm not tech savvy with code so if someone could write it and let me know where to put it that would be great. 

 

Thanks in advance 

Replies 2 (2)

KabirDev
Shopify Partner
243 58 63

To make your "Shirt Collection" menu stick to your "Shirt Cosmo" page on your Shopify site, you'll need to edit the Liquid template for that specific page in your theme's code. This typically involves accessing the Shopify admin, going to Online Store > Themes > Actions > Edit code, and then modifying the Liquid file for your "Shirt Cosmo" page. If you're not comfortable with coding, it's advisable to consult with a Shopify expert or use a Shopify app designed for custom menu creation, which can provide a user-friendly interface for this task.

If my answer helps, please give it a Like and Accept as Solution.
- You can join in our Facebook group for Shopify help.
- Contact me directly at shahriar@kabirdev.com

PaulNewton
Shopify Partner
6274 572 1311

Hi@cupcosmos Implementation , or even workarounds, varies wildly among themes. 

If you want a literal second menu system with settins, etc and you need this customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

 

 

The crudest way if you know how and know CSS for single item navigation rows is to just add the "second" menu as a links/submenu of the main navigation, then hide all the nav elements except the "second" menus links on the page through CSS and liquid.

 

Roughly, untested:

{% if page.handle == "shirts" %}
<style>
header nav.header__inline-menu .list-menu li:nth-child(1)
,header nav.header__inline-menu .list-menu li:nth-child(2)
,header nav.header__inline-menu .list-menu li:nth-child(3)
,header nav.header__inline-menu .list-menu li:nth-child(4)
,header nav.header__inline-menu .list-menu li:nth-child(5)
,header nav.header__inline-menu .list-menu li:nth-child(6) {
 display:none;
}
</style>
{% endif %}

 Though this means on every page NOT that page you need to hide these extra links with corresponding CSS.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org