Jump to content

Keep shop category menu in product page

Go to solution Solved by tuanphan,

Recommended Posts

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 :

Howthislook.thumb.jpeg.cce54b48384f4b9b16354f367007b035.jpeg

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

HowIwouldlike.thumb.jpeg.5c0ad9c1d160ee49c00ab18e1b505ee8.jpeg

 

Edited by Camescoop
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 2 months later...
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>

image.thumb.png.957f459e3a49f0a36a5ea1f7490ed39f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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 !

Screenshot 2024-01-05 at 11.28.33.jpg

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Screenshot 2024-01-05 at 11.43.30.jpg

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.