Jump to content

changing order of categories

Go to solution Solved by paul2009,

Recommended Posts

 #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;
  }

 

Link to comment
  • 3 weeks later...
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?

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

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
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;
}

 

Link to comment

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;
}

 

Link to comment
  • 4 weeks later...
  • Solution

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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

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

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

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

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
  • 1 year later...
1 hour ago, camille said:

Hi, I'm trying to do the same here, but I'm having some trouble...

site url : https://www.fornogusto.com/boutique

New order : Streetwear / Sacs / Goodies / Toutes

Thanks in advance for your help !

Add to Design > Custom CSS

@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
ul.ProductList-filter-list>li:nth-child(1) {
    order: 4;
}
ul.ProductList-filter-list>li:nth-child(2) {
    order: 3;
}
ul.ProductList-filter-list>li:nth-child(3) {
    order: 2;
}
}

 

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

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
  • 3 months later...
22 hours ago, CamilleOG said:

Anyone would be able to tell me what to do?

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<!--

  begin reorder store categories
  
  Version     : 0.3.3
  
  SS Version  : 7.0
  
  Template    : Brine (Brine template family)
  
  Notes       : the code is comprised of a number style tags. all of them are
                needed for the full effect to work
                
                code generated on 11/20/2022 10:52:42 AM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .ProductList-filter-list-item:nth-child( 2 ) { /* Andalousie */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) { /* Ardèche */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) { /* Campanie */
    
      -webkit-box-ordinal-group : 8;
      -ms-flex-order : 7;
      order : 7;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) { /* Fruité Délicat */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) { /* Fruité Intense */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) { /* Fruité Moyen */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) { /* Ligurie */
    
      -webkit-box-ordinal-group : 9;
      -ms-flex-order : 8;
      order : 8;
      
      }
      
    .ProductList-filter-list-item:nth-child( 9 ) { /* Ombrie */
    
      -webkit-box-ordinal-group : 10;
      -ms-flex-order : 9;
      order : 9;
      
      }
      
    .ProductList-filter-list-item:nth-child( 10 ) { /* Pouilles */
    
      -webkit-box-ordinal-group : 11;
      -ms-flex-order : 10;
      order : 10;
      
      }
      
    .ProductList-filter-list-item:nth-child( 11 ) { /* Sicile */
    
      -webkit-box-ordinal-group : 12;
      -ms-flex-order : 11;
      order : 11;
      
      }
      
    .ProductList-filter-list-item:nth-child( 12 ) { /* Toscane */
    
      -webkit-box-ordinal-group : 13;
      -ms-flex-order : 12;
      order : 12;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    .ProductList-filter-list {
    
      flex-direction : column;
      
      }
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .ProductList-filter-list {
      
        display : flex;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .ProductList-filter-dropdownToggle-checkbox:checked ~ .ProductList-filter-list {
      
        display : flex;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Edited by creedon
version 3

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
10 hours ago, creedon said:

I have updated my code. There were some issues.

Let us know how it goes.

Thanks for this. Ordering is almost good, the only item that is not in order is "Andalousie".

Another issue is that on mobile the categories always show up, the accordeon no longer works.

Any idea how to fix?

Link to comment
10 hours ago, CamilleOG said:

Ordering is almost good, the only item that is not in order is "Andalousie".

This is what I see when I use my code. My code order on the left, your order on the right.

1683178398_ScreenShot2022-11-20at10_19_56AM.png.bb6c09188d70f387d94d9f46af5def5f.png

Quote

Another issue is that on mobile the categories always show up, the accordeon no longer works.

I believe I have addressed this issue. Thanks for the bug report.

I have updated my code again.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.