Jump to content

Displaying Category on Product Page

Recommended Posts

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?

Link to comment
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?

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
5 hours ago, vna said:

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

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
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!

Link to comment

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>

 

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
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!

 

Link to comment
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>

 

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
  • 1 month later...

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!

 

 

 

Link to comment
  • 1 month later...
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!

Link to comment
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.

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.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
  • 1 year later...

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.

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.