Keep shop category menu in product page

Hello !

Is there a way to keep the left side shop category navigation menu in the product page ?

I'm not speaking about bearcrumbs, but the all menu.

This would be very nice if my users could go from a product page to another category without going back to previous page.

Thanks !

Actually it look like this :

I would like to look like this (done in photoshop) :

I think add it to top of product page above or under breadcrumbs, it would be better. What do you think?

Thank you for your answer.

I could be ok with a full category menu on top too, but I can't find a way to keep the menu on the product page either !

🤷‍♂️

On 9/7/2023 at 4:36 PM, Camescoop said:

Thank you for your answer.

I could be ok with a full category menu on top too, but I can't find a way to keep the menu on the product page either !

🤷‍♂️

Yes. We need to use custom code to add this. If you share link to a product, we can check & give the code

On 9/9/2023 at 1:35 PM, tuanphan said:

Yes. We need to use custom code to add this. If you share link to a product, we can check & give the code

On 9/27/2023 at 9:09 PM, Camescoop said:

Hello @tuanphan,  thanks a lot to have a look, indeed it will help me a lot !

Here is the product page :

https://camescoop.squarespace.com/gear/p/leica-summicron

pw: CCCP

Sorry for delay. If you still need help, you can add this code to Website Tools (Under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('<ul class="t-nav"><li><a href="/gear">All</a></li><li><a href="/gear/cameras">Cameras</a></li><li><a href="/gear/lenses">Lenses</a></li></ul>').insertBefore('body.view-item .products.collection-content-wrapper');
	});
	</script>
	<style>
	ul.t-nav {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-nav li a {
    margin-left: 20px;
    margin-right: 20px;
}
</style>

Thank you a lot @tuanphan but I don't have access to code injection since I'm on a "personal" plan.
I will discuss with my the utility of paying 6$ more per month just for this feature but I don't think it worth it.

2 hours ago, Camescoop said:

Thank you a lot @tuanphan but I don't have access to code injection since I'm on a "personal" plan.
I will discuss with my the utility of paying 6$ more per month just for this feature but I don't think it worth it.

With Personal Plan, You can edit Site Footer > Add a Markdown Block > Then paste the code

https://support.squarespace.com/hc/en-us/articles/205813788-Markdown-blocks

On 12/28/2023 at 3:02 PM, tuanphan said:

With Personal Plan, You can edit Site Footer > Add a Markdown Block > Then paste the code

https://support.squarespace.com/hc/en-us/articles/205813788-Markdown-blocks

Thank you, I just did it but nothing happen.

Try this new code (just a test code, if it works, I will give final code)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://code.beaverhero.com/file?filename=1704182747349.js"></script>
	<style>
	ul.t-nav {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
ul.t-nav li a {
    margin-left: 20px;
    margin-right: 20px;
}
</style>

Excellent ! Thanks !
Indeed it works, I do have now "all / Camera / lenses" on the top menu and the link did work.

Could you explain me how I do to manage the content of this menu ? Because now I have more categories pages, and I have sub-categories.

My main goal is to reduce the number of click for the customer, so when he click on a item in a sub-category page, he can either go back to the sub-categorie page or to another category with one click...

So if I go to lens/Super35 and I click on the Leica Item, I would love to have access on this product page to the the full drop-down menu.
I hope it make sense to you.

Thanks a lot for your work.

Wahou excellent ! Thanks !
The only issue I have now is that the menu is also in the footer in the main page, but not in the product pages, strange !

And the Phone display is messy, should I tweak the css ?

The best for me would to have the possibility to hide it on mobile devices.
Thanks a lot.

On 1/5/2024 at 5:29 PM, Camescoop said:

Wahou excellent ! Thanks !
The only issue I have now is that the menu is also in the footer in the main page, but not in the product pages, strange !

Add this code to Website Tools > Custom CSS

ul.tp-ul {
    display: none !important;
}
body[class*="type-products"].view-item ul.tp-ul {
    display: flex !important;
}

On 1/5/2024 at 5:45 PM, Camescoop said:

And the Phone display is messy, should I tweak the css ?

The best for me would to have the possibility to hide it on mobile devices.
Thanks a lot.

What should it look like on mobile? Or you want to hide it, add this code under I Just sent above

@media screen and (max-width:767px) {
body[class*="type-products"].view-item ul.tp-ul {
	display: none !important;
}
}

What a rock star of the code you are !

🚀
Thank you !