Category Page Design Customization - new 7.1 update

Hi, could someone help on some issues with the new Squarespace product categories as also point me in the right direction on Design of Category pages.

Background:

 I have just updated 7.1 commerce with the latest categories update (based on a notification I saw in the dashboard). This update provides more powerful category features, in particular, nesting of categories (ie Category, Sub-category). This is a useful feature. For example, one can create a category structure like Mens>Jeans, add those categories to a new product and Squarespace automatically generates the category and subcategory URLs and content..

So for example in the above example, the following URLs are automatically created and appropriate collections/products shown under;
mysite.com/shop
mysite.com/shop/mens
mysite.com/shop/mens/jeans
mysite.com/shop/p/levis-501-blue-stone-washed 

Q1:  Squarespace is automatically adding a "/p" in the product URL structure. Is there a way to avoid the "/p"?

Q2: Squarespace is automatically adding the category structure in the Browser Tab Title (eg., "/mens/jeans - mysite.com | Your home for Jeans". This forced addition of the category structure  "/mens/jeans" in the title is ugly. How do I stop this!!!!

Q3: Category Page Design. Squarespace automatically creates a collection page for each category/sub-category name. Example, it would show an appropriate set of products under Mens, or under Jeans.  However, while I can edit the design of the "Shop" page, I can't figure out how to add a section to the category pages underneath (eg., Mens, Jeans) . For example, say I wanted to include a specific category image under the Header for the Jeans page, and a different category image under the Header for the Mens page, is this possible?

Appreciate any help from the community.

I'm having the same issue with the page title headers! Seems to be no way to get rid!

I've managed to sort the title issue, quite simple. Go to the pencil by manage items and scroll down to category title. Disable the bar.

25 minutes ago, Bradleymcwhinney said:

I've managed to sort the title issue, quite simple. Go to the pencil by manage items and scroll down to category title. Disable the bar.

My issues (three raised above) are still unresolved. Are you also getting the "/p" in your product url (example for your belo oak frame)? Also, are you getting the category/subcategory name prefixed to your SEO Title in the Browser Tab?

All unresolved still getting the p in URL. I don't think there is any way of changing that unless you downgrade back.

Just now, Bradleymcwhinney said:

All unresolved still getting the p in URL. I don't think there is any way of changing that unless you downgrade back.

Wouldyou know how to downgrade back? Am also worried about other unforseen issues that may arise with going back . But at least it is useful to know if that option exists. I have a lot of product data loaded and can't afford to lose that or have it go haywire!

I have no idea, I would contact the customer service. I can imagine! Squarespace is brilliant at times but some of  these "UPGRADES" are starting to become major inconveniences!

Yes, this is indeed a major inconvenience. As far as the bugs go, these were reported to customer service, whose first response was to suggest that I keep my expectations low, and the second comment was to go to the Forum.

It is inexcusable that Squarespace rolls out updates with scant respect to documentation, or user testing, nor when the expected bugs arise do they show any urgency to fix this. It is absolutely bewildering that someone thought it a good idea to put the URL tree as a prefix to the SEO Title for a category page. As it is, the SEO title character length is pretty short at the best of times, now, it gets taken up by a URL slug of category and subcategory names separated by backslashes before the SEO Title even begins for the category page. The Marketing>SEO settings are now no longer valid, because Squarespace is partially overriding what you enter there by forcibly inserting the slug.

Also, how does this even get close to optimising Category pages for SEO, one of the stated benefits of this category update. You can't even insert a unique piece of text or image for each category page. All you get is Squarespace automatically inserting the Category Name in H1 on top of the collection. That's it. 

Still no response from Squarespace, hope someone is working on it. Ironically their own website is clean of such bugs, looks like these are reserved for us paying customers!!!

ADD-ON ISSUE - The Category Name is inserted by Squarespace in h3. SEO Optimisation immediately picks this up as an issue and says, your page has no h1 tags. Given the importance of h1 in SEO , should the Category Name display not be in h1 ???

 

I am so annoyed about this update and regret that moment I clicked upgrade. I've asked (via Twitter) if this can be reverted, and they said no. I complained more and put in Anthony Casalena (CEO). And nothing. I'm still waiting for a response from Customer Service. I put a long critique of their practices on Instagram and included everyone I could find of their directors. I'm going to cancel my subscription unless this reverts back. 

All the reviews about squarespace and their great looking templates are meaningless unless their service is backed up by thoughtful, robust functionality. Perhaps the new Adobe guy they have appointed will fix this. Because frankly, having a business that is based solely on user experience is just not good enough. 

6 hours ago, bbarinaga said:

Hi!

I'm also having some issues with the new Squarespace product categories.

I decided to leave the Category Title but it's quite big and can't find how to make it smaller (see screenshot)

Does anyone know how to fix this?

I appreciate any help.

https://mistoa.mx/tiendalavabos/

Pass: 1234

Add to Home > Design > Custom CSS

/* category title size */
h3.nested-category-title {
    font-size: 20px !important;
}

Looks great, thank you @tuanphan!

Hi everyone, I also encountered similar problems.  The code for adjusting category titles works perfectly. Thank you @tuanphan!  

But now I have some other questions:

1. How to remove the grey line between categories and product blocks?
2. Can I style the font of the categories (Bowl and Plates, Chopsticks, etc) and make them align with the category title? And also the line spacing between them?
   
    
3. Similarly, can I change the font style of "All Products" same as the category title?
   

Much appreciated!

On 8/27/2020 at 5:59 AM, cantocookingclub said:

Hi everyone, I also encountered similar problems.  The code for adjusting category titles works perfectly. Thank you @tuanphan!  

But now I have some other questions:

1. How to remove the grey line between categories and product blocks?
2. Can I style the font of the categories (Bowl and Plates, Chopsticks, etc) and make them align with the category title? And also the line spacing between them?
    
3. Similarly, can I change the font style of "All Products" same as the category title?

Much appreciated!

Website: https://www.cantocooking.club/tableware
PW: hungry

Add to Home > Design > Custom CSS

/* Remove line */
ul.nested-category-children:after {
    display: none;
}

Align with category: What do you mean? Can you describe in detail?

With font style of All products, add to Home > Design > Custom CSS

/* All products */
a.nested-category-breadcrumb-link {
    font-family: granville;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

Thank you for posting these problems. I am not upgrading then!!!! 

Squarespace support is becoming worse and worse, I am for the moment locked in but I would never recommend them to anyone! 

12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Remove line */
ul.nested-category-children:after {
    display: none;
}

Align with category: What do you mean? Can you describe in detail?

With font style of All products, add to Home > Design > Custom CSS

/* All products */
a.nested-category-breadcrumb-link {
    font-family: granville;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

 

@tuanphan -- Thank you so much! Everything just makes more sense now!   I just wanted to use the same font style for the category and sub-categories, and your code has solved it! 🙂

2 more follow-up questions:

1. the grey line still displays in sub-category pages -- how can I fix this? 

 2. Can I adjust the spacing  between the section top, category title, sub-category titles and product blocks?  (I did try to put line-height in the code but it just looked really off...)

Thanks again for your help! Your code really makes up for Squarespace's unthoughtful design...

On 8/25/2020 at 10:41 PM, bbarinaga said:

Looks great, thank you @tuanphan!

Tuan Phan, can this be converted from h3 class to h1 class for SEO reasons.

On 8/25/2020 at 4:53 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* category title size */
h3.nested-category-title {
    font-size: 20px !important;
}

 

@Tuanphan, could you help with the Custom CSS to reduce padding around this category title? And separately, how to change this from h3 class to h1 class for SEO

4 hours ago, midwicket said:

Tuan Phan, can this be converted from h3 class to h1 class for SEO reasons.

You need to use JS to do this. Complex.

4 hours ago, midwicket said:

@Tuanphan, could you help with the Custom CSS to reduce padding around this category title? And separately, how to change this from h3 class to h1 class for SEO

Can you share site url? We can check easier.

Hi all - This thread is super useful - thank you!

I have 2 x big challenges at the moment.

1. Is there a way to add an image header to product category pages? It looks really empty at the moment and I'd really love to be able to add an image to the top.

2. Is there a way to add a back button to individual product pages? So that the user can return back to the previous page they viewed or the previous category page? I also can't see where to add custom code to product pages 😑

I'd be so grateful if someone could help? (For mobile and desktop please) ❤️  

On 9/15/2020 at 9:37 PM, nadineburzler said:

Hi all - This thread is super useful - thank you!

I have 2 x big challenges at the moment.

1. Is there a way to add an image header to product category pages? It looks really empty at the moment and I'd really love to be able to add an image to the top.

2. Is there a way to add a back button to individual product pages? So that the user can return back to the previous page they viewed or the previous category page? I also can't see where to add custom code to product pages 😑

I'd be so grateful if someone could help? (For mobile and desktop please) ❤️ 

 

1. Same image for all category or?

2. Can you share link to product page?

On 8/14/2020 at 9:02 AM, midwicket said:

So for example in the above example, the following URLs are automatically created and appropriate collections/products shown under;
mysite.com/shop
mysite.com/shop/mens
mysite.com/shop/mens/jeans
mysite.com/shop/p/levis-501-blue-stone-washed 

Q1:  Squarespace is automatically adding a "/p" in the product URL structure. Is there a way to avoid the "/p"?

 

Has anyone found a solution to the "/p/" issue in the product URL?

I did notice that you can still share links without it, and it simply redirects to the URL with the "/p/", so old links that didn't have it thankfully won't give a 404 error. But it's still annoying that it popped up and we can't remove it.

Also wondering about the "/p/" problem. It looks terrible. I'm not sure why this is even being added. Has anyone figured it out?

Thanks!

I am also having problems with that letter  "/p/" problem. I am hoping someone can help me out and I can remove it! 

Thanks!

On 9/18/2020 at 12:59 PM, tuanphan said:

1. Same image for all category or?

2. Can you share link to product page?

I’m looking for assistance on adding a different photo per category section. Currently, if you add a section block with a photo background, it's universal across all the shop category pages.

17 hours ago, sharine said:

I’m looking for assistance on adding a different photo per category section. Currently, if you add a section block with a photo background, it's universal across all the shop category pages.

I think @creedon has this code? not sure, you try contact him..