Jump to content

changing order of categories

By kodacurrie, in Customize with code

Go to solution Solved by paul2009,

Recommended Posts

  • 2 months later...
  • Replies 52
  • Views 8.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009
paul2009

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 informati

angela0anderson
angela0anderson

Thank you! I have been busting my butt for hours with ChatGPT and could not figure it out for the life of me! Thank you so much!

rwp
rwp

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

Posted Images

CamilleOG Level 4

CamilleOG

Posted
Posted
On 11/20/2022 at 8:20 PM, creedon said:

This is what I see when I use my code. My code order on the left, your order on the right.

1683178398_ScreenShot2022-11-20at10_19_56AM.png.bb6c09188d70f387d94d9f46af5def5f.png

I believe I have addressed this issue. Thanks for the bug report.

I have updated my code again.

Hello,

I would now need to fix the category order on another similar website : https://olive-groves.sg/shopoliveoils

I have tried to adapt the code provided by @creedon above, but with no success!

The category order would need to be:

DELICATE FRUITY
MEDIUM FRUITY
ROBUST FRUITY
FRANCE
ITALY
SPAIN
GIFT SETS

Would you be able to help adapting the code for this page?

 

Link to comment
creedon Level 15

creedon

Posted
Posted
9 hours ago, CamilleOG said:

Would you be able to help adapting the code for this page?

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 02/02/2023 02:38:58 PM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .ProductList-filter-list-item:nth-child( 2 ) { /* DELICATE FRUITY */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) { /* FRANCE */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) { /* GIFT SETS */
    
      -webkit-box-ordinal-group : 9;
      -ms-flex-order : 8;
      order : 8;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) { /* ITALY */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) { /* MEDIUM FRUITY */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) { /* ROBUST FRUITY */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) { /* SPAIN */
    
      -webkit-box-ordinal-group : 8;
      -ms-flex-order : 7;
      order : 7;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .ProductList-filter-list {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .ProductList-filter-dropdownToggle-checkbox:checked ~ .ProductList-filter-list {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
CamilleOG Level 4

CamilleOG

Posted
Posted
14 hours ago, creedon said:

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 02/02/2023 02:38:58 PM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .ProductList-filter-list-item:nth-child( 2 ) { /* DELICATE FRUITY */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) { /* FRANCE */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) { /* GIFT SETS */
    
      -webkit-box-ordinal-group : 9;
      -ms-flex-order : 8;
      order : 8;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) { /* ITALY */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) { /* MEDIUM FRUITY */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) { /* ROBUST FRUITY */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) { /* SPAIN */
    
      -webkit-box-ordinal-group : 8;
      -ms-flex-order : 7;
      order : 7;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .ProductList-filter-list {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .ProductList-filter-dropdownToggle-checkbox:checked ~ .ProductList-filter-list {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Many thanks @creedon, it worked perfectly!

Link to comment
  • 5 months later...
tuanphan Level 17

tuanphan

Posted
Posted
On 7/17/2023 at 10:25 PM, Maqu said:

Could someone please help me with the same? Thank you in advance

https://www.bymaqu.com/shop

In this order:

How about "All", above _SALE or?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
creedon Level 15

creedon

Posted
Posted
On 7/17/2023 at 8:25 AM, Maqu said:

help me with the same?

One thing I noticed as I was trying to come up with some code was that there seems to be an empty category. Can you check that and get rid of it or give it a name? Let me know if you fix that and I can take another run at it.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
creedon Level 15

creedon

Posted
Posted
43 minutes ago, angela0anderson said:

Can anybody please help me change the order of my categories?

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.6
  
  SS Version  : 7.0
  
  Template    : Bedford (Bedford 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 08/20/2023 08:47:52 PM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .category-nav-links li:nth-child( 4 ) { /* 10th Grade */
    
      -webkit-box-ordinal-group : 13;
      -ms-flex-order : 12;
      order : 12;
      
      }
      
    .category-nav-links li:nth-child( 5 ) { /* 11th Grade */
    
      -webkit-box-ordinal-group : 14;
      -ms-flex-order : 13;
      order : 13;
      
      }
      
    .category-nav-links li:nth-child( 6 ) { /* 12th Grade */
    
      -webkit-box-ordinal-group : 15;
      -ms-flex-order : 14;
      order : 14;
      
      }
      
    .category-nav-links li:nth-child( 7 ) { /* 1st Grade */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .category-nav-links li:nth-child( 8 ) { /* 2nd Grade */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .category-nav-links li:nth-child( 9 ) { /* 3rd Grade */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .category-nav-links li:nth-child( 10 ) { /* 4th Grade */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .category-nav-links li:nth-child( 11 ) { /* 5th Grade */
    
      -webkit-box-ordinal-group : 8;
      -ms-flex-order : 7;
      order : 7;
      
      }
      
    .category-nav-links li:nth-child( 12 ) { /* 6th Grade */
    
      -webkit-box-ordinal-group : 9;
      -ms-flex-order : 8;
      order : 8;
      
      }
      
    .category-nav-links li:nth-child( 13 ) { /* 7th Grade */
    
      -webkit-box-ordinal-group : 10;
      -ms-flex-order : 9;
      order : 9;
      
      }
      
    .category-nav-links li:nth-child( 14 ) { /* 8th Grade */
    
      -webkit-box-ordinal-group : 11;
      -ms-flex-order : 10;
      order : 10;
      
      }
      
    .category-nav-links li:nth-child( 15 ) { /* 9th Grade */
    
      -webkit-box-ordinal-group : 12;
      -ms-flex-order : 11;
      order : 11;
      
      }
      
    .category-nav-links li:nth-child( 16 ) { /* Kindergarten */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
angela0anderson Level 4

angela0anderson

Posted
Posted
35 minutes ago, creedon said:

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.6
  
  SS Version  : 7.0
  
  Template    : Bedford (Bedford 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 08/20/2023 08:47:52 PM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .category-nav-links li:nth-child( 4 ) { /* 10th Grade */
    
      -webkit-box-ordinal-group : 13;
      -ms-flex-order : 12;
      order : 12;
      
      }
      
    .category-nav-links li:nth-child( 5 ) { /* 11th Grade */
    
      -webkit-box-ordinal-group : 14;
      -ms-flex-order : 13;
      order : 13;
      
      }
      
    .category-nav-links li:nth-child( 6 ) { /* 12th Grade */
    
      -webkit-box-ordinal-group : 15;
      -ms-flex-order : 14;
      order : 14;
      
      }
      
    .category-nav-links li:nth-child( 7 ) { /* 1st Grade */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .category-nav-links li:nth-child( 8 ) { /* 2nd Grade */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .category-nav-links li:nth-child( 9 ) { /* 3rd Grade */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .category-nav-links li:nth-child( 10 ) { /* 4th Grade */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .category-nav-links li:nth-child( 11 ) { /* 5th Grade */
    
      -webkit-box-ordinal-group : 8;
      -ms-flex-order : 7;
      order : 7;
      
      }
      
    .category-nav-links li:nth-child( 12 ) { /* 6th Grade */
    
      -webkit-box-ordinal-group : 9;
      -ms-flex-order : 8;
      order : 8;
      
      }
      
    .category-nav-links li:nth-child( 13 ) { /* 7th Grade */
    
      -webkit-box-ordinal-group : 10;
      -ms-flex-order : 9;
      order : 9;
      
      }
      
    .category-nav-links li:nth-child( 14 ) { /* 8th Grade */
    
      -webkit-box-ordinal-group : 11;
      -ms-flex-order : 10;
      order : 10;
      
      }
      
    .category-nav-links li:nth-child( 15 ) { /* 9th Grade */
    
      -webkit-box-ordinal-group : 12;
      -ms-flex-order : 11;
      order : 11;
      
      }
      
    .category-nav-links li:nth-child( 16 ) { /* Kindergarten */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Thank you! I have been busting my butt for hours with ChatGPT and could not figure it out for the life of me! Thank you so much!

Link to comment
  • 1 month later...
creedon Level 15

creedon

Posted
Posted
10 hours ago, C-bear said:

I would love some help with the same issue too please

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.7
  
  SS Version  : 7.0
  
  Template    : Skye (Skye 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 09/29/2023 03:06:17 PM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .ProductList-filter-list-item:nth-child( 2 ) { /* Digital Downloads */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) { /* Dinner Al Fresco */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) { /* Dinner at Home */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) { /* Dinner With Friends */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) { /* New */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets just for styling the store 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 {
      
        /*
        
          the value of this declaration needs to be updated manually on v7.0
          sites
          
          */
          
        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:nth-child( 3 ) {
      
        margin-right : 0;
        
        }
        
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .ProductList-filter-list {
      
        display : flex;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .ProductList-filter-list {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 weeks later...
angela0anderson Level 4

angela0anderson

Posted
Posted (edited)

Hi again! The following code worked on most of my product pages thus far, but for some reason not anymore? I don't know why! Is it because I used it on too many pages already? Is that a thing? The code worked great on my other pages, (like befa.com/art-crafts and befa.com/science and befa.com/social-studies), but it won't work on other pages I'm trying to use, like befa.com/writing. This is the code and TYIA:

<!-- begin reorder store categories -->

<style>
  /* rulesets just for reordering categories */
  
  .category-nav-links li:nth-child(4) { /* 10th Grade */
    -webkit-box-ordinal-group: 13;
    -ms-flex-order: 12;
    order: 12;
  }
  
  .category-nav-links li:nth-child(5) { /* 11th Grade */
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }
  
  .category-nav-links li:nth-child(6) { /* 12th Grade */
    -webkit-box-ordinal-group: 15;
    -ms-flex-order: 14;
    order: 14;
  }
  
  .category-nav-links li:nth-child(7) { /* 1st Grade */
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  
  .category-nav-links li:nth-child(8) { /* 2nd Grade */
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  
  .category-nav-links li:nth-child(9) { /* 3rd Grade */
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  
  .category-nav-links li:nth-child(10) { /* 4th Grade */
    -webkit-box-ordinal-group: 7;
    -ms-flex-order: 6;
    order: 6;
  }
  
  .category-nav-links li:nth-child(11) { /* 5th Grade */
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
  }
  
  .category-nav-links li:nth-child(12) { /* 6th Grade */
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
  }
  
  .category-nav-links li:nth-child(13) { /* 7th Grade */
    -webkit-box-ordinal-group: 10;
    -ms-flex-order: 9;
    order: 9;
  }
  
  .category-nav-links li:nth-child(14) { /* 8th Grade */
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
  }
  
  .category-nav-links li:nth-child(15) { /* 9th Grade */
    -webkit-box-ordinal-group: 12;
    -ms-flex-order: 11;
    order: 11;
  }
  
  .category-nav-links li:nth-child(16) { /* Kindergarten */
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
</style>

<style>
  /*
    rulesets to define the base of this effect
    no user serviceable parts below
  */
  
  /* desktop */
  @media only screen and (min-width: 641px) {
    .category-nav-links {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  
  /* mobile */
  @media only screen and (max-width: 640px) {
    .category-nav-links {
      display: flex;
      flex-direction: column;
    }
  }
</style>

<!-- end reorder store categories -->

 

Edited by angela0anderson
Link to comment
creedon Level 15

creedon

Posted
Posted
2 hours ago, angela0anderson said:

The following code worked on most of my product pages thus far, but for some reason not anymore? I don't know why!

When I look at your page it looks good to me.

ScreenShot2023-10-16at7_48_19PM.thumb.png.787da426d824e6dfbabb20a7bb0be447.png

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
creedon Level 15

creedon

Posted
Posted
17 hours ago, angela0anderson said:

but it is not working on the writing page for some reason?

If the categories where exactly the same then my original code might work on different pages. But with a different set of categories new code is needed. 

<!--

  begin reorder store categories
  
  Version     : 0.3.7
  
  SS Version  : 7.0
  
  Template    : Bedford (Bedford 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 10/18/2023 11:49:09 AM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .category-nav-links li:nth-child( 4 ) { /* 1st Grade */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .category-nav-links li:nth-child( 5 ) { /* 2nd Grade */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .category-nav-links li:nth-child( 6 ) { /* Kindergarten */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
angela0anderson Level 4

angela0anderson

Posted
Posted
On 10/18/2023 at 2:51 PM, creedon said:

If the categories where exactly the same then my original code might work on different pages. But with a different set of categories new code is needed. 

<!--

  begin reorder store categories
  
  Version     : 0.3.7
  
  SS Version  : 7.0
  
  Template    : Bedford (Bedford 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 10/18/2023 11:49:09 AM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .category-nav-links li:nth-child( 4 ) { /* 1st Grade */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .category-nav-links li:nth-child( 5 ) { /* 2nd Grade */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .category-nav-links li:nth-child( 6 ) { /* Kindergarten */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

This code works on the page! But it is the same categories, K-12. For some reason the old code just isn't working on this page, but the new code is! Now it's only missing categories for grades 3-12. I tried writing the rest of it myself, but I really have no idea what I'm doing.

It seems like the versions of the pages may be different (0.3.6 vs 0.3.7) and that may be making a difference in the code working? Idk though, just guessing.

Link to comment
creedon Level 15

creedon

Posted
Posted
25 minutes ago, angela0anderson said:

Now it's only missing categories for grades 3-12

All the categories have to be on the writing page before code can be made to reorder them. It currently only shows K - 2. If you don't have products in writing that cover all the categories, you can make a hidden product and add all the categories to it so that you'll have all the categories displayed. Then you could use the social-emotional-learning code on the writing page.

Quote

It seems like the versions of the pages may be different (0.3.6 vs 0.3.7) and that may be making a difference in the code working?

The difference between the v0.3.6 and 0.3.7 generator are minor and the ordering part of the generator code didn't change.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
angela0anderson Level 4

angela0anderson

Posted
Posted
On 10/19/2023 at 10:14 PM, creedon said:

All the categories have to be on the writing page before code can be made to reorder them. It currently only shows K - 2. If you don't have products in writing that cover all the categories, you can make a hidden product and add all the categories to it so that you'll have all the categories displayed. Then you could use the social-emotional-learning code on the writing page.

The difference between the v0.3.6 and 0.3.7 generator are minor and the ordering part of the generator code didn't change.

Thank you! I figured it out with your help. I had to add the K-12 categories and then remove them from the one product that is up on that page, and you were right that the old code worked just the same once I did that!

I gotta learn this coding stuff more for sure!

Link to comment
  • 1 month later...
creedon Level 15

creedon

Posted
Posted
28 minutes ago, Liviaaaa said:

Is there a way to re-order the product categories on the Shop page? I need them to be:

All / Mugs & Cups / Bowls & Plates / Planters & Vases / Kitchen / Prints

Yes. Note the code won't work if there is no Prints category. Also that if the categories change, the code breaks.

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.7
  
  SS Version  : 7.0
  
  Template    : Native
  
  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/29/2023 12:31:20 PM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .category-nav-links li:nth-child( 3 ) { /* Cups & Mugs */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    .category-nav-links li:nth-child( 4 ) { /* Kitchen */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .category-nav-links li:nth-child( 5 ) { /* Plates & Bowls */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .category-nav-links li:nth-child( 6 ) { /* Prints */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .category-nav-links li:nth-child( 7 ) { /* Vases & Planters */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets just for styling the store 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
        
        */
        
      .category-nav-links li:last-child {
      
        /*
        
          the value of this declaration needs to be updated manually on v7.0
          sites
          
          */
          
        margin-right : ;
        
        }
        
      /*
      
        by extension we now want to remove the right margin from whichever
        element is going to be last after reordering
        
        */
        
      .category-nav-links li:nth-child( 4 ) {
      
        margin-right : 0;
        
        }
        
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .category-nav-links {
      
        display : flex;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

This is for v7.0 using the Native template.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 months later...
creedon Level 15

creedon

Posted
Posted
19 hours ago, mdelamen said:

Can someone help with code for that?

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.7
  
  SS Version  : 7.0
  
  Template    : Avenue
  
  Notes       : the code is comprised of a number style tags. all of them are
                needed for the full effect to work
                
                code generated on 02/23/2024 12:38:53 PM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .category-nav-links li:nth-child( 3 ) { /* Canvas */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    .category-nav-links li:nth-child( 4 ) { /* Paper */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .category-nav-links li:nth-child( 5 ) { /* Prints */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .category-nav-links li:nth-child( 6 ) { /* Tiny */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .category-nav-links li:nth-child( 7 ) { /* Wood */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .category-nav-links {
      
        display : flex;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .category-nav-links {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

This is for v7.0 using the Avenue template.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources