Jump to content

Category Page Design Customization - new 7.1 update

Recommended Posts

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.

Edited by midwicket
Additional Issues identified
Link to comment
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.

image.thumb.png.0a3cca016cd181ecc4b9f4fc302e5a27.png

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?

 

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

Link to comment

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

 

Edited by midwicket
Link to comment

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. 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?
    1330585579_ScreenShot2020-08-27at00_51_09.thumb.png.5c623c15551f25f452c0c49951676483.png
     
  3. Similarly, can I change the font style of "All Products" same as the category title?
    440605313_ScreenShot2020-08-27at00_50_57.thumb.png.22576bcbef1aba2710e1de32d601d2c2.png

Much appreciated!

Edited by cantocookingclub
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Screen Shot 2020-08-29 at 05.36.12.png

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

Screen Shot 2020-08-29 at 05.41.18 copy.png

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

Edited by cantocookingclub
Link to comment
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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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) ❤️  

Screen Shot 2020-09-15 at 15.34.07.png

WhatsApp Image 2020-09-15 at 15.10.50.jpeg

Edited by nadineburzler
added question
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Link to comment
  • 2 months later...
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..

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.