Keyo Posted August 16, 2022 Posted August 16, 2022 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; }
Solution paul2009 Posted August 16, 2022 Solution Posted August 16, 2022 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Keyo Posted August 16, 2022 Author Posted August 16, 2022 (edited) 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 August 16, 2022 by Keyo
paul2009 Posted August 16, 2022 Posted August 16, 2022 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 tuanphan 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
AngelaB Posted August 16, 2022 Posted August 16, 2022 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..
paul2009 Posted August 16, 2022 Posted August 16, 2022 (edited) 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: Edited August 17, 2022 by paul2009 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Keyo Posted August 17, 2022 Author Posted August 17, 2022 (edited) 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 August 17, 2022 by Keyo 1TC 1
Keyo Posted August 17, 2022 Author Posted August 17, 2022 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; }}
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment