Reordering Categories

Site URL: http://emilyklopstein.com

Hi there,

Can I please get some help reordering my shop categories? I'm using the Jaunt template. 

Thank you!

Emily

Please provide the site wide password. How do you want to reorder your categories?

Thanks, I messaged you!

It can be done. Put the following CSS in Store Settings > Advanced > Page Header Code Injection.

<style>

  /*
  
    reorder Store categories
    
    Brine template family
    
    */
  
  /* desktop */
  
  @media only screen and (min-width: 641px) {
  
    .ProductList-filter-list {
    
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child(2) {
    
      order: 4;
      
      }
      
    .ProductList-filter-list-item:nth-child(3) {
    
      order: 6;
      
      }
      
    .ProductList-filter-list-item:nth-child(4) {
    
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child(5) {
    
      order: 5;
      
      }
      
    .ProductList-filter-list-item:nth-child(6) {
    
      order: 7;
      
      }
      
    .ProductList-filter-list-item:nth-child(7) {
    
      order: 3;
      
      }
    }
    
  /* mobile */
  
  @media only screen and (max-width: 640px) {
  
    .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
      
      }

    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child(2) {
    
      order: 4;
      
      }
      
    .ProductList-filter-list-item:nth-child(3) {
    
      order: 6;
      
      }
      
    .ProductList-filter-list-item:nth-child(4) {
    
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child(5) {
    
      order: 5;
      
      }
      
    .ProductList-filter-list-item:nth-child(6) {
    
      order: 7;
      
      }
      
    .ProductList-filter-list-item:nth-child(7) {
    
      order: 3;
      
      }
    }
    
  </style>

@EKSJ communicated with me that the category order should be...

Quote

All, Engagement, Wedding Bands, All Rings, Necklaces, Earrings, Sale

The CSS assumes all categories are defined in the Store even if there are no products with those categories attached.

You can use a table like the following to help you figure out what number to put where in the CSS.

    Category                Default Order    Reorder

    All                             1                            1

    All Rings                 2                           4

    Earrings                  3                           6

    Engagement         4                           2

    Necklaces              5                          5

    Sale                          6                          7

    Wedding Bands    7                          3

Each time you add or delete categories the CSS will need to be updated.

There are other posts in this forum covering this technique if one wants to do further research.

Let us know how it goes.

@creedon

Awesome, thank you! This worked perfectly. 

I updated the code to include rules for desktop and mobile. Also threw in some minimal comments. The previous version was a bit squirrelly on mobile!

Hi! Thanks for this code. I have tried several different ways and for some reason, each time I lose a space between two of my categories. How do I maintain the category reorder and also have a space between "Pillows" and "Accessories"?

https://dalmatian-robin-3kg5.squarespace.com

PW: DHS

@Rosie33 Before reordering Pillows on your site is the last category. 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. So in your case we need to get that margin back in there.

Add the following to the CSS I provided earlier for desktop. I don't think it will be needed for mobile.

.ProductList-filter-list-item:last-child {

  margin-right: 10px;
  
  }

Let us know how it goes.

Hi Creedon

Thanks for your answer although I'm struggling to get the change of order happening.  Admittedly I am an absolute novice at this stuff so please excuse any blindingly obvious mistakes I am making.  I have attached 3 files of my coding attempts.  I would be super grateful if you could tell me where I am going wrong.

https://www.hempconnect.co.nz/shop

I'm wanting to adjust the order to: All / Oil - 6 / Hearts - 5 / Protein Powders -7 / Flour - 3 / Combo - 2 / Gift Card -4

The number above shows the order they are in now (default).

Warm regards,

Jacob 

@Jacob33

Using my magic table and plugging in your information we get...

Category         Default Order  Reorder

All              1              1

Combo            2              6

Flour            3              5

Gift Card        4              7

Hearts           5              3

Oil              6              2

Protein Powders  7              4

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

<style>

  /*
  
    reorder Store categories
    
    Brine template family
    
    */
    
  /* desktop */
  
  @media only screen and ( min-width: 641px ) {
  
    .ProductList-filter-list {
    
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      
      }
      
    .ProductList-filter-list-item:last-child {
    
      margin-right: 25px;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
      order: 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
      order: 5;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
      order: 7;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) {
    
      -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
      order: 4;
      
      }
    }

  /* mobile */
  
  @media only screen and ( max-width: 640px ) {
  
    .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
      order: 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
      order: 5;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
      order: 7;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) {
    
      -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
      order: 4;
      
      }
    }
    
  </style>

This is slightly different than the previous version, other than the order. Your site is set up just a tad different so I made some changes from the previous version.

Let us know how it goes.

Folks another variation on this technique.