changing order of categories

Site URL: http://mattretzlaff.com

Is there a way to re-order the product categories on the Shop page?

I need them to be: 

All / Large Scale / Tabletop and Wall / Garden

right now my site is password protected because it's not yet live

pw: retzlaff

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

Thank you! Worked perfectly.

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!

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?

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

@rwp That worked brilliantly, thank you so much!

@tuanphan my apologies, the ending url "/all" should have been removed. I'm all set now though, thank you.

@rwp I'm actually seeing a slight issue on mobile; some categories are back-to-back now

Also is there a way to hide the category dropdown menu on mobile?

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

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

That did it, thanks again!

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

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?

On 9/1/2020 at 5:35 AM, tuanphan said:

Which order you want?

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

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

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 !

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

Thank you again @tuanphan ! It works perfectly : )

Hello,

I would also like to change the category order on this page : https://www.olive-groves.fr/huilesolive-bio-exception

I'd like the new order to be : Tous / Fruité Délicat / Fruité Moyen / Fruité Intense / Andalousie / Ardèche / Campanie / Ligurie / Ombrie / Pouilles / Sicile / Toscane

CSS or code would be fine.

Anyone would be able to tell me what to do?

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.

Thanks @creedon, this did change the category order. However, not quite in the order I intended. Maybe I can tweak the code to adjust the order?

Here is the desired order:

Tous
Fruité Délicat 
Fruité Moyen
Fruité Intense
Andalousie
Ardèche
Campanie
Ligurie
Ombrie
Pouilles
Sicile
Toscane

47 minutes ago, CamilleOG said:

this did change the category order. However, not quite in the order I intended.

I have updated my code. There were some issues.

Let us know how it goes.

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?

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.

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.