ArianaMartinDesign Posted November 10, 2021 Share Posted November 10, 2021 Site URL: https://www.arianamartin.com/shop I have several categories within my Squarespace shop, but once you click into a category, the rest disappear and there are no breadcrumbs, so when browsing you have to click back to the main Shop page and start again. (I've selected 'show breadcrumbs' but I don't think it works with my version/template.) I've attached screenshots of the main shop page, and a category page. Is there code I can add to make sure that the categories can be accessed at all times when browsing my shop? Thanks! Beyondspace 1 Link to comment
Beyondspace Posted November 10, 2021 Share Posted November 10, 2021 1 hour ago, ArianaMartinDesign said: Site URL: https://www.arianamartin.com/shop I have several categories within my Squarespace shop, but once you click into a category, the rest disappear and there are no breadcrumbs, so when browsing you have to click back to the main Shop page and start again. (I've selected 'show breadcrumbs' but I don't think it works with my version/template.) I've attached screenshots of the main shop page, and a category page. Is there code I can add to make sure that the categories can be accessed at all times when browsing my shop? Thanks! You can find similiar topic here Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
paul2009 Posted November 10, 2021 Share Posted November 10, 2021 2 hours ago, ArianaMartinDesign said: I have several categories within my Squarespace shop, but once you click into a category...there are no breadcrumbs, so when browsing you have to click back to the main Shop page and start again. You can restore breadcrumbs on your product detail pages on Squarespace 7.1 with my Breadcrumbs extension. You can read more about it in this glowing recommendation: About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity 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. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
ArianaMartinDesign Posted November 11, 2021 Author Share Posted November 11, 2021 Thank you @bangank36. I added the code from that post and it has helped with breadcrumbs. However, I would still like to see the category navigation on all shop pages, including category pages and product pages. Is there a way to do this? Thank you Beyondspace 1 Link to comment
Beyondspace Posted November 11, 2021 Share Posted November 11, 2021 1 hour ago, ArianaMartinDesign said: Thank you @bangank36. I added the code from that post and it has helped with breadcrumbs. However, I would still like to see the category navigation on all shop pages, including category pages and product pages. Is there a way to do this? Thank you You mean all category items like in shop page? ArianaMartinDesign 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
ArianaMartinDesign Posted November 11, 2021 Author Share Posted November 11, 2021 45 minutes ago, bangank36 said: You mean all category items like in shop page? Yes 🙂 I'd like to be able to see all categories on every category/product page Link to comment
tuanphan Posted November 14, 2021 Share Posted November 14, 2021 @ArianaMartinDesign You want to add category nav links to top of product page/category page? ArianaMartinDesign 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ArianaMartinDesign Posted November 14, 2021 Author Share Posted November 14, 2021 55 minutes ago, tuanphan said: @ArianaMartinDesign You want to add category nav links to top of product page/category page? Yes exactly. I also emailed you about this and you sent me some code, thank you. I tried it and it worked on desktop but the category nav links were distorted on mobile, so I removed it. Is there a way to add category nav links, but keep the formatting/design the same as it is now? https://www.arianamartin.com/shop Link to comment
tuanphan Posted November 15, 2021 Share Posted November 15, 2021 18 hours ago, ArianaMartinDesign said: Yes exactly. I also emailed you about this and you sent me some code, thank you. I tried it and it worked on desktop but the category nav links were distorted on mobile, so I removed it. Is there a way to add category nav links, but keep the formatting/design the same as it is now? https://www.arianamartin.com/shop Can you take a screenshot on mobile when using the code? ArianaMartinDesign 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ArianaMartinDesign Posted November 15, 2021 Author Share Posted November 15, 2021 2 hours ago, tuanphan said: Can you take a screenshot on mobile when using the code? The 1st and 2nd screenshots are how it looks with your code on mobile and desktop. The 3rd and 4th screenshots are how I would like it to look (with category nav links at the top of every shop/category/product page): Link to comment
tuanphan Posted November 18, 2021 Share Posted November 18, 2021 On 11/15/2021 at 5:52 PM, ArianaMartinDesign said: The 1st and 2nd screenshots are how it looks with your code on mobile and desktop. The 3rd and 4th screenshots are how I would like it to look (with category nav links at the top of every shop/category/product page): Hi, Try this new code /* 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: center; flex-wrap: wrap !important; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } a.category-link.root { padding-top: 17px !important; } ArianaMartinDesign 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ArianaMartinDesign Posted November 18, 2021 Author Share Posted November 18, 2021 10 hours ago, tuanphan said: Hi, Try this new code /* 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: center; flex-wrap: wrap !important; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } a.category-link.root { padding-top: 17px !important; } Thank you so much! I really appreciate it. Nearly there. I have 2 formatting questions: 1. Is it possible to add spacing and line dividers to the main Shop page on desktop? (please see screenshots) 2. Is it possible to add line dividers to the category nav links on mobile? (please see screenshots) Thank you for your help. Link to comment
tuanphan Posted November 20, 2021 Share Posted November 20, 2021 On 11/14/2021 at 8:53 PM, ArianaMartinDesign said: Yes exactly. I also emailed you about this and you sent me some code, thank you. I tried it and it worked on desktop but the category nav links were distorted on mobile, so I removed it. Is there a way to add category nav links, but keep the formatting/design the same as it is now? https://www.arianamartin.com/shop Add to Design > Custom CSS li.category-item:not(:last-child) a:after { content: "|"; padding-left: 20px; } ArianaMartinDesign 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ArianaMartinDesign Posted November 21, 2021 Author Share Posted November 21, 2021 On 11/20/2021 at 3:26 AM, tuanphan said: Add to Design > Custom CSS li.category-item:not(:last-child) a:after { content: "|"; padding-left: 20px; } Thank you very much your help 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment