Displaying Category on Product Page

Site URL: https://www.dearfamilies.com/all-services/dear-mom

Hello,

Is it possible to have the categories show on a side bar in the product page?

In this category page, the other categories show on the side: https://www.dearfamilies.com/all-services/dear-mom

I would like the categories to show on my product pages as well: https://www.dearfamilies.com/all-services/p/dear-mom-8-week

Thank you!

@tuanphan

The Bedford template does this. See for example https://www.phelpsrefinishing.com/fuji-spray-guns

My site is on version 7.1 so there are no templates. I am not sure how to recreate what is shown in the example.

Hi. You can use Sidebar plugin to achieve this.

Thanks!

14 hours ago, tuanphan said:

Hi. You can use Sidebar plugin to achieve this.

I was able to get the breadcrumbs navigation to show up on the product page. However, it shows up like this:

All Services --> Soothing-Preview

I would like it to display the category instead:

Dear Everyone --> Soothing-Preview

I don't want All Services to show up.

Is there a way to do this?

3 hours ago, vna said:

I was able to get the breadcrumbs navigation to show up on the product page. However, it shows up like this:

All Services --> Soothing-Preview

I would like it to display the category instead:

Dear Everyone --> Soothing-Preview

I don't want All Services to show up.

Is there a way to do this?

Can you share link to product page?

20 minutes ago, tuanphan said:

Can you share link to product page?

https://www.dearfamilies.com/all-services/p/dear-everyone-soothing

Thank you for your help!

5 hours ago, vna said:

https://www.dearfamilies.com/all-services/p/dear-everyone-soothing

 

Thank you for your help!

Hi. Change this on all products, or above product only?

2 hours ago, tuanphan said:

Hi. Change this on all products, or above product only?

Hello! What CSS can we use to change the All text?

10 hours ago, tuanphan said:

Hi. Change this on all products, or above product only?

Change on all products. So for all products I want it to show Category --> Product.

Each product is only in one category. And I don't want it to show All Services for any of the products.

Thanks!

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

21 hours ago, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

 

Thank you for this. This is not quite what I need. Here is what I would like to do:

https://www.dearfamilies.com/all-services/p/dear-everyone-soothing

^ In this product page, I would like it to say Dear Everyone --> Soothing - Preview

https://www.dearfamilies.com/all-services/p/dear-everyone-attachment-bonding

^ In this product page, I would like it to say Dear Everyone --> Attachment & Bonding

https://www.dearfamilies.com/all-services/p/dear-mom-8-week

^ In this product page, I would like it to say Dear Mom --> 8 Week: Baby and You

https://www.dearfamilies.com/all-services/p/individual-private-consultation-sessions-victoria

^ In this product page, I would like it to say Dear Anyone --> Victoria

Thank you again for your help!

On 11/22/2020 at 1:16 PM, vna said:

Thank you for this. This is not quite what I need. Here is what I would like to do:

https://www.dearfamilies.com/all-services/p/dear-everyone-soothing

^ In this product page, I would like it to say Dear Everyone --> Soothing - Preview

https://www.dearfamilies.com/all-services/p/dear-everyone-attachment-bonding

^ In this product page, I would like it to say Dear Everyone --> Attachment & Bonding

https://www.dearfamilies.com/all-services/p/dear-mom-8-week

^ In this product page, I would like it to say Dear Mom --> 8 Week: Baby and You

https://www.dearfamilies.com/all-services/p/individual-private-consultation-sessions-victoria

^ In this product page, I would like it to say Dear Anyone --> Victoria

Thank you again for your help!

 

Edit Product > Additional Info > Add a Code Block > Paste this code, replace with text what you want.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

Hi @tuanphan,

This is very cool, but what if one needs an auto breadcrumb for 7.1 blog sections?

For example, with sciencesites.org, using 7.0 (mostly Brine) we'd typically use an archive block and some javascript to give tags/categories and on state for each tag/category link based upon matching the URL, but perhaps there's a better way that's similar to your solution for products?

Because most of our clients want blog lists with effectively endless items listed, at the moment I'm using: https://www.squarewebsites.org/products/universal-filter and https://www.squarewebsites.org/products/lazy-summaries

with this site: 

https://bart-wilson.squarespace.com/publications 

Pwd: Letmein

And they work great, however as far as I can tell there's no way have links to tag/category results from anywhere else on the site show a user where they are. For example if you click one of the links on the homepage like:

https://bart-wilson.squarespace.com/all-publications?tag=Property

The actual blog page, "/all-publications" both doesn't show tags and won't show any indication of what's being displayed, unlike in Brine templates where a "Viewing Posts In:" message would appear (.BlogListFilter).

Ideally the blog list would just show tags AND categories as it does in 7.0.

Hope this all makes sense?

Thanks for your time and I hope you're safe within this COVID purgatory!

On 11/23/2020 at 6:22 PM, tuanphan said:

Edit Product > Additional Info > Add a Code Block > Paste this code, replace with text what you want.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a.ProductItem-nav-breadcrumb-link").html(function() { 
          return $(this).html().replace("All Services", "All Categories");  
    });
});
</script>

 

Great, this replaced the text exactly. However, when I click on that text, it takes me to the page with all my products. I would like it to take me to page within a category. How can I do that? Thank you for your help!

On 11/18/2020 at 7:02 PM, vna said:

Is it possible to have the categories show on a side bar in the product page?

Yes, this is a built-in feature in Squarespace 7.1. No code or plugins are necessary. 

By default, the category navigation will display at the top of your Store Page, but you can change this to a sidebar, where subcategories display in a nested menu.

To change the position, open the section styles and click Sidebar under Categories type. To change the order of the navigation, click and drag the categories in the category manager.

Hi Paul, thank you for the tip, that's great.

Noticed on mobile view, when you have the Sidebar option selected - it seems to display the categories as a list at the top.

Hoping to learn if there's a way to change it so if there are lots of categories it displays as a dropdown?

Thank you for any insight! Mike.

On 7/14/2022 at 5:27 PM, mike.bj said:

Hi Paul, thank you for the tip, that's great.

Noticed on mobile view, when you have the Sidebar option selected - it seems to display the categories as a list at the top.

Hoping to learn if there's a way to change it so if there are lots of categories it displays as a dropdown?

Thank you for any insight! Mike.

Hi @mike.bj Did you ever find a resolution for this mobile issue? I'm also experiencing this problem.