Jump to content

Need Categories links to show on Single Product Page. Help!

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://keyo2022.squarespace.com/

Howdy, 

Can't figure out how to display all my categories on single product pages.
Nothing is showing at the moment but would love to add all categories as I currently have on each category page.
See below JPG as reference.
Im currently using the CSS below to show the categories links on each category page.

Note: I saw there is a paid plugin with breadcrumbs, but would like to avoid that option with some code editing to show the above.

Thanks!
 

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: black
    
}
.nested-category-tree-wrapper>ul li {
    margin-left: 3vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;

}

 

Note.jpg.de35dc54db92b930e233b196756c6941.jpg

Link to comment
  • Solution
4 hours ago, Keyo said:

Can't figure out how to display all my categories on single product pages.

You cannot add categories to Product Detail Pages (PDPs) with CSS. Squarespace deliberately hide categories on PDPs because you want the customer to explore the product details and purchase the product they are viewing, instead of being overwhelmed by a list of other options to explore.

It would be possible to add them with JavaScript but I don't advise doing so because it is not best practice and could even reduce conversion rates. That's why product breadcrumbs are a good idea because they allow customers to look at other products in the same category - for example different styles of the same fashion item - without being distracted by many other product types.

By the way, I tried to view your site to see if you have an edge case that would benefit from categories but it is password-protected and so cannot be viewed. Please see How to Post a Forum Question for guidance on how to provide details that help us to answer questions.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hey Paul, firstly thanks for taking the time to reply. 

Password is: vanessa 

I see what you mean with the reason behind why SS hides the categories. Still tho, i feel like when a user ends up seeing one product and realises it's not the right item for them, they are stuck and cant go back to explore others or explore other categories.... Is that paid plugin the only option to at least show the breadcrumbs? I don't mind adding some code and take the risk.

If enabling on section settings navigation / show breadcrumbs it only shows:
All / Item you are on.  It doesn't allow much exploring. 

Im stuck here

 

Edited by Keyo
Link to comment
52 minutes ago, Keyo said:

I see what you mean with the reason behind why SS hides the categories. Still tho, i feel like when a user ends up seeing one product and realises it's not the right item for them, they are stuck and can't go back to explore others or explore other categories

When users view the PDP and aren't interested in the product, they will typically swipe right (or click 'back') to return to their previous position on the Product List Page (PLP) - where they'll see the categories again. At least that's what we see in user testing.

The Breadcrumbs Extension is a addon that I designed because Squarespace 7.1 is missing a way to browse products in an 'organic' fashion. For example, if someone has just viewed one 'shirt dress' on a fashion website, they are likely to want to view other shirt dresses. The extension allows them to do this. As you say, the built-in "breadcrumbs" on Squarespace 7.1 aren't really breadcrumbs at all, they just offer a link back to the top level of the store 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

I too want my shop category menu (which is also centred) to remain on the product pages. I've just come from Shopify and this is standard on most templates. What doesn't make sense is if you change the category menu to the sidebar version it DOES remain on every product page, and highlights the category you're in. Surely it can't be difficult to sort this out - It should be the same simple option to keep a centralised category menu available on the product pages, we shouldn't have to buy a plug-in. 

Although it looked great at first, I'm half wondering whether I should have swapped from Shopify as I'm finding so many non-sensical and buggy problems with squarespace 7.1 that you need code workarounds for..

Link to comment
On 8/16/2022 at 2:46 PM, AngelaB said:

I too want my shop category menu (which is also centred) to remain on the product pages. What doesn't make sense is if you change the category menu to the sidebar version it DOES remain on every product page, and highlights the category you're in.

I'm guessing that by "product page" you are referring to filtered subcategory pages because, as I mentioned above, category navigation will not appear on Product Detail Pages (PDPs), regardless of which option you choose. 

The product categories should be shown on Product List Pages (PLPs) if you enable them in the section settings (by clicking Edit Section). Here is an example of them appearing as you drill through the subcategories:

image.thumb.gif.bccb3c1960cdc631ce246dc41cd834d1.gif

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Working on it with some help from Tuan, looks like its possible to enable via code injection indeed. Just need to tweak css to make it look the same and mobile friendly. Still on it, and will let y'all know what I ended up doing.

In terms of the argument Paul states, i totally get the logic behind the customer experience and navigation to make conversions, however its just nice to have options as the shop owner to have this option so as to love even more SS, allowing us to go either way. At the end of the day, we are to blame if we ain't selling 🙂

 

 

Edited by Keyo
Link to comment

Ok, issue resolved!
Many thanks to @tuanphan for the help. This thread follow up is based on this original forum thread.

Basically we had to inject code into the header to allow custom links to show in the single product page.
Then with CSS customise the look and feel. Below the code from my site.

Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
$('<ul class="t-nav"><li><a href="/keyo-shop/surfcraft">Surfcraft</a></li><li><a href="/keyo-shop/in-stock">In Stock</a></li><li><a href="/keyo-shop/canvas">Canvas</a></li></li><li><a href="/keyo-shop/apparel">Apparel</a></li><li><a href="/keyo-shop/accessories">Accessories</a></ul>').insertBefore('body.view-item .products.collection-content-wrapper');
});
</script>
<style>
ul.t-nav {
    list-style: none;
    padding-left: 27px;
    margin-right: 27px;
    display: flex;
    justify-content: center;
}
ul.t-nav li a {
    margin-left: 27px;
    margin-right: 27px;
}
</style>

CSS

}
.t-nav {
    font-size: 15px;
    margin-top: 56px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: baseline;
}
@media screen and (max-width:767px) {
ul.t-nav a {
    font-size: 13px;
    margin-left: 10px !important;
    margin-right: 10px !important;
}
ul.t-nav {
    padding-left: 0px !important;
    padding-right: 0px;
    margin-top: 20px;
}}

 

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.