How to change the 'ALL' text on the product page when 'Sort & Filter' option is on

Hey there!

I'm wondering if anyone knows how to change the text that says 'ALL' in the 'Sort & Filter' option on the products page (shop page).
I'm finding this page very minimal in choices when filtering. 

Website: https://artbuzz-today.squarespace.com/
passcode: today
Page:  shop
Template: Brine

I just need to change 'ALL' to say 'ALL ARTISTS' instead. Is this possible?

Also...is there a way to add the tags as well as the category here?

Thank you!

Carrie

Add to Design > Custom CSS

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
}

Hi @tuanphan

Thanks so much for that code. It worked!
Would you happen to know if we are able to somehow add a header to this section?
Something like 'Artists'?
I see there's a header in the mobile view and it says 'Category' Would love to change that as well to 'Artists' if possible.

THANK YOU!

add header text to above of right side (images)?

Thanks @tuanphan I think I've sorted something out.

One last question if that's ok! 🙂

With the code you provided to change the 'ALL' to 'ALL ARTISTS', I've lost the active link color unfortunately. So when someone is on that particular page, it isn't showing the red active link color. it's just grey/fade.  Would you know how to add that back? Thanks so much. Carrie

Hey 

How do you do the same thing ( just need to change 'ALL' to say 'ALL ARTISTS' instead. ) for the template ALAMEDA

I tried it like you said up there, but unfortunately it didn`t work.

And also does anybody know how to do a filter for the shop? Not just by categories and tags, but like a proper filter you see on other websites. 

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page: under neon gallery , ceramics

Template: ALAMEDA

40 minutes ago, carrie1 said:

Thanks @tuanphan I think I've sorted something out.

One last question if that's ok! 🙂

With the code you provided to change the 'ALL' to 'ALL ARTISTS', I've lost the active link color unfortunately. So when someone is on that particular page, it isn't showing the red active link color. it's just grey/fade.  Would you know how to add that back? Thanks so much. Carrie

.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    font-size: 20px;
    color: #bb545e;
}

25 minutes ago, inniminni said:

Hey 

How do you do the same thing ( just need to change 'ALL' to say 'ALL ARTISTS' instead. ) for the template ALAMEDA

I tried it like you said up there, but unfortunately it didn`t work.

 

difficult to help without site url

hey tuanphan, sorry didn't know that. I am all new to this.

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page: under neon gallery , ceramics

Template: ALAMEDA

43 minutes ago, inniminni said:

hey tuanphan, sorry didn't know that. I am all new to this.

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page:  shop ceramics
Template: ALAMEDA

Where is "shop ceramics"?

https://pugsandpigs.squarespace.com/config/pages/5e26737bd88c7d1ea136e775

under neon gallery , ceramics

51 minutes ago, inniminni said:

https://pugsandpigs.squarespace.com/config/pages/5e26737bd88c7d1ea136e775

under neon gallery , ceramics

a.category-filter-link.category-filter-link-all {
    visibility: hidden;
}
a.category-filter-link.category-filter-link-all:before {
    visibility: visible;
    content: "All artists";
}

10 hours ago, tuanphan said:

.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    font-size: 20px;
    color: #bb545e;
}

 

difficult to help without site url

Hi again @tuanphan

Very much appreciate your help.
This indeed makes the text red but I'm looking for it to only go read when the page/link is active...like the rest of the list below. 

Site URL is the same as listing in my original message:

Website: https://artbuzz-today.squarespace.com/
passcode: today
Page:  shop
Template: Brine

THANK YOU!

Hi @tuanphan!

Do you know of a way? I'm desperate! 🙂

15 hours ago, carrie1 said:

Hi @tuanphan!

Do you know of a way? I'm desperate! 🙂

Saved question, will check in the next 3-4 days

On 1/31/2020 at 6:21 AM, carrie1 said:

Hi @tuanphan!

Do you know of a way? I'm desperate! 🙂

Try this CSS

.ProductList-filter-list-item--all a.ProductList-filter-list-item-link:active:before {
    color: #bb545e !important;
}

@tuanphan do you know how to do a filter for the shop? Not just by categories and tags, but like a proper filter you see on other websites. 

I would like to have one where you can sort by artists and one where you can sort by object.

and if you pick a artist and an object at the same time it will show you all plates from that artist or so

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page: under neon gallery , ceramics

Template: ALAMEDA 

squarespace 7.1

6 hours ago, inniminni said:

@tuanphan do you know how to do a filter for the shop? Not just by categories and tags, but like a proper filter you see on other websites. 

I would like to have one where you can sort by artists and one where you can sort by object.

and if you pick a artist and an object at the same time it will show you all plates from that artist or so

Website: https://pugsandpigs.squarespace.com
passcode: 123456
Page: under neon gallery , ceramics

Template: ALAMEDA 

squarespace 7.1

Hi @inniminni

I've seen a few plugins out there with this feature. I seem to locate one of them I had found but here's the second one.
Not sure if that helps.

https://www.squarewebsites.org/products/universal-filter

11 hours ago, tuanphan said:

Try this CSS

.ProductList-filter-list-item--all a.ProductList-filter-list-item-link:active:before {
    color: #bb545e !important;
}

 

Hi @tuanphan,

Thanks for taking the time on this. This code makes the link the right color upon clicking on it but it doesn't remain that color while that catagory is active on the page. Thanks for your efforts. Much appreciated.

Hi @carrie1. You currently have this in your Custom CSS:

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px;
}

Remove the line that you've included to set the color:

   color: #000;

It should be unnecessary and is overriding the active color.

1 hour ago, paul2009 said:

Hi @carrie1. You currently have this in your Custom CSS:

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px;
}

Remove the line that you've included to set the color:

   color: #000;

It should be unnecessary and is overriding the active color.

Hi @paul2009

You're right...it worked.

I was starting to pull out my hair trying everything! This quick fix now seems so obvious. 

THANK YOU!

On 2/2/2020 at 10:39 AM, paul2009 said:

Hi @carrie1. You currently have this in your Custom CSS:

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px;
}

Remove the line that you've included to set the color:

   color: #000;

It should be unnecessary and is overriding the active color.

Hey @paul2009!
Curious if you'd know how to change the 'ALL' in the 'Sort & Filter' option on each individual product page?

I currently have code to change the 'ALL' to 'ALL ARTISTS' but now I have 3 individual product pages and one of them I would love to say 'ALL PHOTOGRAPHERS' instead of all artists. 

Website: https://artbuzz-today.squarespace.com/
passcode: today
Page:  shop-art (photography)
Template: Brine

Code I currently have:

.ProductList .ProductList-title {font-size:16px!important;}

.ProductList-outerImageWrapper{filter:drop-shadow(5px 5px 8px #000)}

.ProductList-filter-list-item
a:hover{color: #E1EA99}

.ProductList-filter-list-item--all a {
    visibility: hidden;
}
.ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    font-size: 18px;
  }
 

Thank you for any direction you may be able to provide!

@carrie1 You just need to 'wrap' the existing CSS with something that limits it to a single 'Collection'. A 'Collection' is how Squarespace refer to a 'Page'! 

You can then repeat the CSS for each Collection, changing the content as needed. For example, the code for All Artists would be modified to this:

#collection-5e23480b6570d547549f8f66 {


  .ProductList-filter-list-item--all a {
    visibility: hidden; 
  } 
  .ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px; 
  }


}

I've added spacing to emphasise the new code (top and bottom lines) but the spacing isn't necessary. Repeat this for the photographers page using the collection "#collection-5e72aaacdbc5156b756b1275" and modifying the "content" line. 

Here's a guide that wrote (some time ago!) explaining how to find the Collection IDs and limit your code to affecting a specific page:

https://sf.digital/squarespace/how-to-apply-css-to-specific-pages-in-squarespace

Hopefully that's clear. Let me know if you need me to clarify anything.

Stay safe. Stay healthy. 

-Paul

On 3/23/2020 at 10:31 AM, paul2009 said:

@carrie1 You just need to 'wrap' the existing CSS with something that limits it to a single 'Collection'. A 'Collection' is how Squarespace refer to a 'Page'! 

You can then repeat the CSS for each Collection, changing the content as needed. For example, the code for All Artists would be modified to this:

#collection-5e23480b6570d547549f8f66 {


  .ProductList-filter-list-item--all a {
    visibility: hidden; 
  } 
  .ProductList-filter-list-item--all a:before {
    visibility: visible;
    content: "All artists";
    color: #000;
    font-size: 18px; 
  }


}

I've added spacing to emphasise the new code (top and bottom lines) but the spacing isn't necessary. Repeat this for the photographers page using the collection "#collection-5e72aaacdbc5156b756b1275" and modifying the "content" line. 

Here's a guide that wrote (some time ago!) explaining how to find the Collection IDs and limit your code to affecting a specific page:

https://sf.digital/squarespace/how-to-apply-css-to-specific-pages-in-squarespace

Hopefully that's clear. Let me know if you need me to clarify anything.

Stay safe. Stay healthy. 

-Paul

This is absolutely perfect.

THANK YOU!

Apologies for the late response as I've been nose deep in other projects and only coming up for air now. 
Thanks so much for your help and well wishes. 

Stay well and healthy yourself my friend. Positive spirit and positive attitude will get us through anything. 🙂

Carrie

Hey does anyone know who to also change the fonts on the page that shows just one of your products? I can't find it anywhere! Thanks so much for the help. 

this is one of the pages I'm trying to add my custom fonts to: https://www.andthenjewelry.com/collections/beni-shoga-n8amh

thank you in advance!