Jump to content

Reorganising categories

Recommended Posts

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

Link to comment
  • Replies 8
  • Views 578
  • Created
  • Last Reply

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.

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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