Re-ordering Product Categories

Site URL: https://www.mbfpetshop.com

Hi all, this might be a simple question that I might just not be able to find, but is there a way to rearrange the product categories order?

Whenever I create a new product and add it to the website, give it is own category, the site automatically puts it at the end--but I would like to be able to put it as the 2nd or 3rd category listed.

Right now its Bandanas, Limited Stock, New Arrivals, Tote Bags

I would like to change the order to: Bandanas, Tote Bags, New Arrivals, Limited Stock

Hi. This is possible with some custom code. Do you still need help on this? We will check carefully.

On 4/17/2021 at 5:38 AM, tuanphan said:

Hi. This is possible with some custom code. Do you still need help on this? We will check carefully.

Hey tuanphan, thanks for answering and yes I still need help on this.

I would like the category order to be All, Bandanas, Tote Bags, New Arrivals, Limited Stock 

Is that possible with some code?

On 4/26/2021 at 11:44 PM, mbfpetshop said:

Hey tuanphan, thanks for answering and yes I still need help on this.

I would like the category order to be All, Bandanas, Tote Bags, New Arrivals, Limited Stock 

Is that possible with some code?

Hi. Sorry for the delay. Add this to Design > Custom CSS

/* reorder category links */
ul.ProductList-filter-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
/* All */
ul.ProductList-filter-list>li:nth-child(1) {
    order: 1;
}
/* Bandanas */
ul.ProductList-filter-list>li:nth-child(2) {
    order: 2;
}
/* Tote bags */
ul.ProductList-filter-list>li:nth-child(5) {
    order: 3;
}
/* New Arrivals */
ul.ProductList-filter-list>li:nth-child(4) {
    order:5;
}
/* Limited Stock */
ul.ProductList-filter-list>li:nth-child(3) {
    order: 6;
}