Breadcrumbs missing from shop

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!

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

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:

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

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?

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

@ArianaMartinDesign You want to add category nav links to top of product page/category page?

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

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?

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):

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

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.

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

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 🙂

On 11/18/2021 at 11:43 AM, 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;
}

 

Hi @tuanphan

URL: www.thompsonlane.com.au

I have come across this thread and am hoping to get a little further assistance with this code if possible.

I have added your above code which now displays the categories on all category pages, it has however changed the style of how the categories are displayed.

Style BEFORE code:

Style AFTER code:

Is there a way to have the categories show on all category pages, but in the original style with background?

Thank you,

Cas

On 2/21/2024 at 7:48 AM, Cas91 said:

Hi @tuanphan

URL: www.thompsonlane.com.au

I have come across this thread and am hoping to get a little further assistance with this code if possible.

I have added your above code which now displays the categories on all category pages, it has however changed the style of how the categories are displayed.

Style BEFORE code:

 

Style AFTER code:

 

Is there a way to have the categories show on all category pages, but in the original style with background?

Thank you,

Cas

 

You can remove the code, I will test it again

On 2/24/2024 at 11:45 AM, tuanphan said:

You can remove the code, I will test it again

I have removed that now. Thank you.

On 2/24/2024 at 11:45 AM, tuanphan said:

You can remove the code, I will test it again

On 2/26/2024 at 1:48 PM, Cas91 said:

I have removed that now. Thank you.

 Hi @tuanphan, just wanted to check back and see if you might be able to help with this further? Thanks very much, Cas

On 3/26/2024 at 10:13 AM, Cas91 said:

 

 Hi @tuanphan, just wanted to check back and see if you might be able to help with this further? Thanks very much, Cas

You can use this new CSS 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;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    background-color: #e1d5c9;
}
.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;
}

div.nested-category-tree-wrapper a.category-link {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}