Hi

Site URL: https://www.studiobullinachinashop.com/paintings1

Hi I was wondering if there was any way to reorganize the categories on the paintings page 

This is the order I would like: bulls, people, ekla cholo re, still life, & others, all

I was also wondering if there was anyway I can make the 'All' category lower case and at the end of the categories (the last category as seen above) 

Here is the website: https://www.studiobullinachinashop.com/paintings1

Using my famous Magic Table we come up with the following.

Category        Natural Order   New Order   Group Order

All             01              06          1

& others        02              05          1

bulls           03              01          1

ekla cholo re   04              03          1

people          05              02          1

still life      06              04          1

Remove any previous attempts at this effect.

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

<style>

  /*
  
    Store Categories Reorder
    
    */
  
  .ProductList-filter-list {
  
    /* natural order 01 */ --scr-new-01: 6; --scr-new-group-01: 1;
    /* natural order 02 */ --scr-new-02: 5; --scr-new-group-02: 1;
    /* natural order 03 */ --scr-new-03: 1; --scr-new-group-03: 1;
    /* natural order 04 */ --scr-new-04: 3; --scr-new-group-04: 1;
    /* natural order 05 */ --scr-new-05: 2; --scr-new-group-05: 1;
    /* natural order 06 */ --scr-new-06: 4; --scr-new-group-06: 1;
    
    }
    
  /* desktop */
  
  @media only screen and ( min-width: 641px ) {
  
    .ProductList-filter-list {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
    }
    
  /* 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;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      
      }
    }
    
  /*
  
    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( 1 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-01 ) + 1 );
    -ms-flex-order: var( --scr-new-01 );
    order: var( --scr-new-01 );
    
    }
    
  .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
    
    */
    
  .ProductList-filter-list-item:first-child {
  
    text-transform: lowercase;
    
    }
    
  @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: 10px;
      
      }
      
    /*
    
      by extension we now want to remove the right margin from whichever element
      is going to be last after reordering
      
      */
      
    .ProductList-filter-list-item:first-child {
    
      margin-right: 0;
      
      }
    }
    
  </style>

Let us know how it goes.

I'm quite impressed by all this code @creedon. Here's how I was thinking about it.
 

.ProductList-filter-list-item:nth-child(1) {
    /* All */
    order: 6;
    text-transform: lowercase;
}
.ProductList-filter-list-item:nth-child(2) {
    /* people */
    order: 2;
}
.ProductList-filter-list-item:nth-child(3) {
    /* still life */
    order: 4;
}
.ProductList-filter-list-item:nth-child(4) {
    /* others */
    order: 5;
}
.ProductList-filter-list-item:nth-child(5) {
    /* ekla */
    order: 3;
}
.ProductList-filter-list-item:nth-child(6) {
    /* bulls */
    order: 1;
}

@creedon Hi I used the code that you sent and everything seemed to work fine but for some reason the order of the categories is still different! Is there any way i can fix that!

THANK YOU SO MUCH FOR YOUR HELP!!!!

11 hours ago, taratsarkar said:

Is there any way i can fix that!

Yes. Remove any previous attempts at this effect, as stated before. Remove the following from Design > Custom CSS.

li.ProductList-filter-list-item:nth-child(2) {
    order: 3
}

li.ProductList-filter-list-item:nth-child(3) {
    order: 5
}

li.ProductList-filter-list-item:nth-child(4) {
    order: 4
}

li.ProductList-filter-list-item:last-child {
    order: 2
}

Let us know how it goes.