Reorganising categories

Site URL: https://hawk-bronze-2tmm.squarespace.com/tote

Hi, I'd like to reorganise the  order of my categories on my website. The shop is currently on 7.0 so it has to be done with CSS. 

I know this question has been asked a lot of times but I just can' t seem to get it no matter how I edit it.   

My current order is: 

All, chrome tanned, horizontal, horizontal big, veg tanned, vertical

The order i'd like (just swap the 2nd and 6th one around) 

All, Vertical, Horizontal, Horizontal Big, Veg Tanned, Chrome Tanned. 

Thank you so much if you can help!

pw: leatherbags

33 minutes ago, Ugne said:

pw: leatherbags

That password doesn't work.

9 minutes ago, creedon said:

That password doesn't work.

Oh my bad! try now?

First I get out my magic table.

Category          Natural Order   New Order   Group Order

All               01              01          1

Chrome Tanned     02              06          1

Horizontal        03              03          1

Horizontal Big    04              04          1

Veg Tanned        05              05          1

Vertical          06              02          1

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  /*
  
    Store Categories Reorder
    
    Brine template family
    
    */
  
  .ProductList-filter-list {
  
    /* natural order 01, no need to define this doesn't change order */
    /* natural order 02 */ --scr-new-02:  6; --scr-new-group-02: 1;
    /* natural order 03 */ --scr-new-03:  3; --scr-new-group-03: 1;
    /* natural order 04 */ --scr-new-04:  4; --scr-new-group-04: 1;
    /* natural order 05 */ --scr-new-05:  5; --scr-new-group-05: 1;
    /* natural order 06 */ --scr-new-06:  2; --scr-new-group-06: 1;
    
    }
    
  /* desktop */
  
  @media only screen and ( min-width: 641px ) {
  
    .ProductList-filter-list {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      -webkit-box-orient: horizontal; /* vertical */
      -webkit-box-direction: normal;
      -ms-flex-direction: row; /* column */
      flex-direction: row; /* column */
      
      justify-content: center;
      
      }
    }
    
  /* mobile */
  
  @media only screen and ( max-width: 640px ) {
  
    .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      -webkit-box-orient: vertical; /* horizontal */
      -webkit-box-direction: normal;
      -ms-flex-direction: column; /* row */
      flex-direction: column; /* row */
      
      }
    }
    
  /*
  
    begin reordering
    
    [natural order] is the natural order that elements display on the page
                    without any intervention
    
    repeat one of the following structures for as many categories you want to
    reorder
    
    new order
    
      .ProductList-filter-list-item:nth-child( [natural order] ) {
      
        -webkit-box-ordinal-group: calc( var( --scr-new-[natural order] ) + 1 );
        -ms-flex-order: var( --scr-new-[natural order] );
        order: var( --scr-new-[natural order] );
        
        }
        
    new order group
    
      .ProductList-filter-list-item:nth-child( [natural order] ) {
      
        -webkit-box-ordinal-group: calc( var( --new-group-[natural order] ) + 1 );
        -ms-flex-order: var( --new-group-[natural order] );
        order: var( --new-group-[natural order] );
        
        }
        
    */
    
  .ProductList-filter-list-item:nth-child( 2 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-02 ) + 1 );
    -ms-flex-order: var( --scr-new-02 );
    order: var( --scr-new-02 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 3 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-03 ) + 1 );
    -ms-flex-order: var( --scr-new-03 );
    order: var( --scr-new-03 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 4 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-04 ) + 1 );
    -ms-flex-order: var( --scr-new-04 );
    order: var( --scr-new-04 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 5 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-05 ) + 1 );
    -ms-flex-order: var( --scr-new-05 );
    order: var( --scr-new-05 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 6 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-06 ) + 1 );
    -ms-flex-order: var( --scr-new-06 );
    order: var( --scr-new-06 );
    
    }
    
  /* end reordering */
  
  /*
  
    style categories, keep in mind the styling applies to categories before they
    are reordered so use their natural order number
    
    */
    
  @media only screen and ( min-width: 641px ) {
  
    /* desktop */
    
    /*
    
      by default the last category has no margin on the right. when you apply
      the reordering CSS then that no margin comes along for the ride. we need
      to get that margin back in there.
      
      */
      
    .ProductList-filter-list-item:last-child {
    
      margin-right: 53px;
      
      }
      
    /*
    
      by extension we now want to remove the right margin from whichever element
      is going to be last after reordering
      
      */
      
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      margin-right: 0;
      
      }
    }
    
    /* don't let multi-word categories wrap */
    
    .ProductList-filter-list-item {
    
      white-space: nowrap;
      
      }
      
  </style>

Let us know how it goes.

Ah thank you so much! 😄

Its pretty much perfect, only problem is that the categories are not centered now, they're moved over to the left hand side

Also I have several different pages that have different categories in them, is there a way for the code to affect only one page rather than all pages across the website?

I tried to look at your site and got the following...

9 hours ago, Ugne said:

only problem is that the categories are not centered now, they're moved over to the left hand side

I added some untested code to center the categories.

9 hours ago, Ugne said:

is there a way for the code to affect only one page rather than all pages across the website?

Did you put the code in Store Settings > Advanced > Page Header Code Injection for the store? If the code is there it would only effect that particular store.