Reorder Categories

Please excuse my "beginner-ness" with web dev.

I have been trying to implement some of the category re-ordering examples from this forum and it is not working for me.  The logic of the re-order is clear, what I don't understand is how the css knows which page to apply the re-order to. I'm sure there is something I'm missing.

Example:

/* Reorder categories */
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
}
/* First one changed to second */
ul.ProductList-filter-list>li:nth-child(1) {
    order: 2;
}
/* Second one changed to first */
ul.ProductList-filter-list>li:nth-child(2) {
    order: 1;
}
 

The above code will affect entire site. If you want it to work on a specific page only, add to Page Header

<style>
  /* Reorder categories */
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
}
/* First one changed to second */
ul.ProductList-filter-list>li:nth-child(1) {
    order: 2;
}
/* Second one changed to first */
ul.ProductList-filter-list>li:nth-child(2) {
    order: 1;
}
</style>

@tuanphan I see that you have helped many people reorder their product categories. I have been trying to do this on a SS 7.0 Brine site with 3 different product pages and I need to reorder for each. I have tried all of the different variations that I have seen throughout these forums, and have added to page header as you have explained, but have been unable to make anything work. 

As an example, on the Accessories page I am trying to have the categories read: All (1), Ribbons (2), Elastic Loops (3), Mailers (4), Gift Inserts (5), SALE (6)

I would appreciate any assistance as I cannot figure out what I'm doing wrong. Thank you!

creativecarding.squarespace.com/accessories

password: CCPP

The suggestion regarding html to the Page Header made sense to change the specific page but alas, it didn't do the reorder. I join TCM in awaiting additional suggestions.

And I should mention that I am using 7.1

On 6/6/2020 at 3:30 AM, TCM said:

@tuanphan I see that you have helped many people reorder their product categories. I have been trying to do this on a SS 7.0 Brine site with 3 different product pages and I need to reorder for each. I have tried all of the different variations that I have seen throughout these forums, and have added to page header as you have explained, but have been unable to make anything work. 

As an example, on the Accessories page I am trying to have the categories read: All (1), Ribbons (2), Elastic Loops (3), Mailers (4), Gift Inserts (5), SALE (6)

I would appreciate any assistance as I cannot figure out what I'm doing wrong. Thank you!

creativecarding.squarespace.com/accessories

password: CCPP

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
  .ProductList-filter-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
}  
}
@media screen and (max-width:640px) {
    .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
}

/* All */
.ProductList-filter-list>li:nth-child(1) {
    order: 1;
}
/* Ribbons */
.ProductList-filter-list>li:nth-child(5) {
    order: 2;
}
/* Elastics */
.ProductList-filter-list>li:nth-child(2) {
    order: 3;
}
/* Mailers */
.ProductList-filter-list>li:nth-child(4) {
    order: 4;
}
/* Gift */
.ProductList-filter-list>li:nth-child(3) {
    order: 5;
}
/* Sale */
.ProductList-filter-list>li:nth-child(6) {
    order: 6;
}

On 6/7/2020 at 1:32 AM, STF said:

The suggestion regarding html to the Page Header made sense to change the specific page but alas, it didn't do the reorder. I join TCM in awaiting additional suggestions.

Follow this. 

Thanks tuanphan, that's what I needed.

To summarize:

In 7.0 use .ProductList-filter-list>li

In 7.1 use .category-filter-item

 Bracketing the CSS with <style> </style> allows it to order a particular page.

I played around trying to get it reorder including the lines but to no avail. It must have something to do with the lines being both positional and delimiters.

Thanks tuanphan, that's what I needed.

To summarize:

In 7.0 use .ProductList-filter-list>li

In 7.1 use .category-filter-item

 Bracketing the CSS with <style> </style> allows it to order a particular page.

I played around trying to get it reorder including the lines but to no avail. It must have something to do with the lines being both positional and delimiters.

If I had read further, I would have seen how to include the lines, for all the even numbers.

span.category-filter-delimiter.has-category:nth-child(2) {
	order: 2;
}

Thank you so much! This did the trick!!!