Jump to content

Managing squarespace categories un alphabetically

Recommended Posts

Site URL: https://www.lukaskasper.com/shop

Heya, I'm looking to change the sequence of my websites shop categories from alphabetic to a specific order, could someone help me with this? My website is: https://www.lukaskasper.com/shop

I want to change the order to:

Skateboards

Prints

Canvas & Framed

Skateboard minis

Enamel Pins

A3 paper paintings

A4 paper paintings

A5 paper paintings

Thanks in advance

Link to comment
  • Replies 1
  • Views 236
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

There several posts that cover this effect pretty well. Here is one.

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.3d2
  
  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 01/12/2022 05:21:13 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 ) { /* A3 Paper Paintings */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) { /* A4 Paper Paintings */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) { /* A5 Paper Paintings */
    
      -webkit-box-ordinal-group : 7;
      -ms-flex-order : 6;
      order : 6;
      
      }
      
    .ProductList-filter-list-item:nth-child( 5 ) { /* Canvas & Framed */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    .ProductList-filter-list-item:nth-child( 6 ) { /* Enamel Pins */
    
      -webkit-box-ordinal-group : 6;
      -ms-flex-order : 5;
      order : 5;
      
      }
      
    .ProductList-filter-list-item:nth-child( 7 ) { /* Prints */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 8 ) { /* Skateboard Minis */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .ProductList-filter-list-item:nth-child( 9 ) { /* Skateboards */
    
      -webkit-box-ordinal-group : 2;
      -ms-flex-order : 1;
      order : 1;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    .ProductList-filter-list {
    
      display : flex;
      flex-direction : column;
      
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .ProductList-filter-list {
      
        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

Create an account or sign in to comment

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

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