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

changing order of categories


kodacurrie
Go to solution Solved by paul2009,

Question

  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

If you are using Squarespace 7.1, you can change the category order without code! There's a built-in panel where you can drag and drop the categories into the order that you prefer. For more informati

.ProductList-filter-list { display: flex; flex-wrap: wrap; justify-content: center; } .ProductList-filter-list-item.ProductList-filter-list-item--all { order: 1; } .ProductList-filter-list-ite

That did it, thanks again!  

Posted Images

15 answers to this question

Recommended Posts

  • 2

If you are using Squarespace 7.1, you can change the category order without code! There's a built-in panel where you can drag and drop the categories into the order that you prefer. For more information, see my post below. It includes a video sequence showing the steps.

 

 

 If this helps you, please click "Like" below  ⬇️

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 1
7 hours ago, brandjarrett said:

Hello!

I'm looking to do the same thing:

site: http://www.alycefayeoriginals.com/all

password: tempshop7851

order:    All     Wire Sculpture     Jewelry     Other

 

Thanks in advance for the help!

.ProductList-filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ProductList-filter-list-item.ProductList-filter-list-item--all {
  order: 1;
}
.ProductList-filter-list-item:nth-child(2) {
  order: 3;
}
.ProductList-filter-list-item:nth-child(3) {
  order: 4;
  margin: 0;
}
.ProductList-filter-list-item:nth-child(4) {
  order: 2;
  margin-right: 15px;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(1) {
      order: 1;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(2) {
      order: 2;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(3) {
      order: 7;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(4) {
      order: 4;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(5) {
      order: 3;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(6) {
      order: 6;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(7) {
      order: 5;
  }

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
4 hours ago, brandjarrett said:

Hello!

I'm looking to do the same thing:

site: http://www.alycefayeoriginals.com/all

password: tempshop7851

order:    All     Wire Sculpture     Jewelry     Other

 

Thanks in advance for the help!

The link doesn't exist. Can you check?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

I'll send updated code when I get to a computer

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

Change the code I sent to this:

.ProductList-filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ProductList-filter-list-item.ProductList-filter-list-item--all {
  order: 1;
}
.ProductList-filter-list-item:nth-child(2) {
  order: 3;
}
.ProductList-filter-list-item:nth-child(3) {
  order: 4;
}
.ProductList-filter-list-item:nth-child(4) {
  order: 2;
}
.ProductList-filter-list-item {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
On 8/30/2020 at 4:26 AM, paul2009 said:

If you are using Squarespace 7.1, you can change the category order without code! There's a built-in panel where you can drag and drop the categories into the order that you prefer. For more information, see my post below. It includes a video sequence showing the steps.

 

 

 If this helps you, please click "Like" below  ⬇️

 

I'm guessing for 7.0 you still use CSS, which I need more of now since I changed the category display from horizontal to left stacked. Can you help me amend the pervious CSS?

http://www.alycefayeoriginals.com/wiresculpture

pw: tempshop7851

 

Link to post
  • 0
16 hours ago, brandjarrett said:

 

I'm guessing for 7.0 you still use CSS, which I need more of now since I changed the category display from horizontal to left stacked. Can you help me amend the pervious CSS?

http://www.alycefayeoriginals.com/wiresculpture

pw: tempshop7851

 

Which order you want?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
8 hours ago, brandjarrett said:

I know enough CSS to rearrange the order once it's set up, so let's say reverse alphabetical for now.

Hi. I see you solved? If no, which order what you want?

All Black Copper Silver Tan White or..?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...