Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Organize Categories


Recommended Posts

Site URL: https://www.terroir-imports.com/products

Hi, 

I would need your help finding a way to organize my categories in my shop online. 

My categories are:

  • France
  • Italy
  • Spain
  • Natural
  • Organic

I would want there to be some type of separation between the countries and the natural and organic option, so as to look something like:

  • Canada
  • France
  • Italy
  • Spain

----

  • Biodynamic
  • Natural
  • Organic

Can you provide any help with this? Thanks 🙂 

@tuanphan

Link to post
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

As codefordummies mentions there is another thread that has variations on this technique.  

@creedon thank you so so much for your help! This is exactly what I needed!

Everything is perfect! Thank you!!! 🙂   @creedon

I think we can adapt my code to your situation. The only thing it doesn't do is add the separator. We can get into that after we get the order right.

Stand by...

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

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

Category     Default Order  Reorder   Group Reorder

All          1              1         1

Biodynamic   2              5         2

Canada       3              2         1

France       4              3         1

Italy        5              4         1

Natural      6              7         2

Organic      7              8         2

Spain        8              5         1

Now you may notice something a little different here. I've added a Group Reorder column. We want to maintain the natural behaviour of alphabetic sorting but create two groupings. Non-organic and organic. We can create two groups 1 and 2.

Add the following to 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: -ms-flexbox;
      display: flex;
      
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      border-top: solid 2px black;
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      padding-top: 25px;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .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: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) {
    
      /* margin-bottom: 1em; */
      
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
    }
    
  /* 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;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      border-top: solid 2px black;
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      padding-top: 25px;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .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: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
    }
        
  </style>

I've also added a border to separate the two groups.

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
4 hours ago, codefordummies said:

I saw you answered a similar question for someone in the forum, any chance you could help me with this?

As codefordummies mentions there is another thread that has variations on this technique.

 

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Hey@creedon

I have a follow up question. I tried using the same code for my french version of the website and for some reason it doesn't seem to work? I tried to rework the category numbers and such but it seems that some of these categories are linked in blocks (i.e. when I change one number, two different categories jump from the first group to the second).

Any idea why this may be happening?

https://www.terroir-imports.com/produits

Thanks for your help!

🙂 

Link to post

Back to the magic table and plugging in your french information we get...

Category       Default Order  Reorder   Group Reorder

All            1              1         1

Biodynamique   2              6         2

Biologique     3              7         2

Canada         4              2         1

Espagne        5              3         1

France         6              4         1

Italie         7              5         1

Nature         8              8         2
 

Which gives us the following.

<style>

  /*
  
    reorder Store categories
    
    Brine template family
    
    */
  
  /* desktop */
  
  @media only screen and ( min-width: 641px ) {
  
    .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;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      border-top: solid 2px black;
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      padding-top: 25px;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) {
    
      /* margin-bottom: 1em; */
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
    }
    
  /* 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;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      border-top: solid 2px black;
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      padding-top: 25px;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
    }
        
  </style>

I hope I got the order right as I don't read french! 🙂

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
3 minutes ago, creedon said:

Back to the magic table and plugging in your french information we get...

Category       Default Order  Reorder   Group Reorder

All            1              1         1

Biodynamique   2              6         2

Biologique     3              7         2

Canada         4              2         1

Espagne        5              3         1

France         6              4         1

Italie         7              5         1

Nature         8              8         2
 

Which gives us the following.


<style>

  /*
  
    reorder Store categories
    
    Brine template family
    
    */
  
  /* desktop */
  
  @media only screen and ( min-width: 641px ) {
  
    .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;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      border-top: solid 2px black;
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      padding-top: 25px;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) {
    
      /* margin-bottom: 1em; */
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
    }
    
  /* 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;
      
      }
      
    /* this is where reordering takes place */
    
    .ProductList-filter-list-item:nth-child( 2 ) {
    
      border-top: solid 2px black;
      
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      padding-top: 25px;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) {
    
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) {
    
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2;
      
      }
    }
        
  </style>

I hope I got the order right as I don't read french! 🙂

Let us know how it goes.

Everything is perfect! Thank you!!! 🙂   @creedon

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...