Jump to content

Reordering Categories

Recommended Posts

  • Replies 10
  • Views 620
  • Created
  • Last Reply

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.

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

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

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

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 

 

Attempt 3.JPG

Attempt 2.JPG

Attempt 1.JPG

Link to comment

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

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.