Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

Category Page Design Customization - new 7.1 update


midwicket

Question

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

Recommended Posts

  • 0
On 3/2/2021 at 8:15 AM, deannaburks said:

I have a question! How can I remove the current page from the breadcrumb and only have the main page. 

can you share link to your site? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 8/28/2020 at 4:32 PM, 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;
}

Hello Tuan Phan, 

Could you please help me? I've tried  to change the color to black of the line ul.nested-category-children:after but in the end I didn't find the right solution/css snippet. It must be so simple... thank you very much

 

Link to comment
  • 0
On 6/22/2021 at 11:37 PM, oeditorial said:

Thanks for answering. I want to change the colour of the line (to black, instead of grey) between the product photos and the Product family links:

1800843724_Capturadeecra2021-06-22as17_29_19.thumb.png.9e2b7d119bdfd2db8ae17de47b3880ad.png

The link is: https://bumblebee-eagle-tfnf.squarespace.com/pt/coleccao
pass: miguelraposo

Hi. It looks like you solved this with?

.bright .products.collection-content-wrapper .nested-category-breadcrumb-link {
    color: #000;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 6/24/2021 at 4:40 AM, tuanphan said:

Hi. It looks like you solved this with?


.bright .products.collection-content-wrapper .nested-category-breadcrumb-link {
    color: #000;
}

 

Thanks for the answer, but unfortunately it didn't work... do you have another solution?

Link to comment
  • 0
On 6/25/2021 at 8:56 PM, oeditorial said:

Thanks for the answer, but unfortunately it didn't work... do you have another solution?

I see you solved? No background here.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 6/28/2021 at 9:31 AM, tuanphan said:

I see you solved? No background here.

Hello again, my goal is to change the colour of the line where the red arrows are pointing to. Can you help with that? Many thanks for your time.1859573577_Capturadeecra2021-06-22as17_29.19cpia.thumb.png.f3c6237a13054171091348858be621ae.png

Link to comment
  • 0
13 hours ago, oeditorial said:

Hello again, my goal is to change the colour of the line where the red arrows are pointing to. Can you help with that? Many thanks for your time.1859573577_Capturadeecra2021-06-22as17_29.19cpia.thumb.png.f3c6237a13054171091348858be621ae.png

Add to Design > Custom CSS

/* Line color */
.products.collection-content-wrapper .nested-category-children::after {
    border-color: red;
    opacity: 1;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...