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

Reordering Categories


EKSJ

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

It can be done. Put the following CSS in Store Settings > Advanced > Page Header Code Injection. <style> /* reorder Store categories Brine template family *

@creedon Awesome, thank you! This worked perfectly. 

I updated the code to include rules for desktop and mobile. Also threw in some minimal comments. The previous version was a bit squirrelly on mobile!

Posted Images

10 answers to this question

Recommended Posts

  • 0

Please provide the site wide password. How do you want to reorder your categories?

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
  • 0

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.

Edited by creedon
version 2 of CSS

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
  • 0

I updated the code to include rules for desktop and mobile. Also threw in some minimal comments. The previous version was a bit squirrelly on mobile!

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
  • 0

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

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
  • 0

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 post
  • 0

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

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
  • 0

Folks another variation 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

Create an account or sign in to comment

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


×
×
  • Create New...