Reorder categories shop page

Site URL: https://bluebird-vuvuzela-mxmr.squarespace.com/

Hi, I'm trying to reorder the categories from my shop page.

I know that by default it's alphabetized but is there a code that I can use to fix this? I tried to copy/past a code from the forum but it didn't work... 😕

For instance I'd like to change the order of the categories for each shop page (Top, Manteaux & Vestes, Pantalons, Robes & jupes, Chaussures & accéssoires):

Femme

Homme

1. XS
2. S
3. M
4. L
5. XL

Thank you !!

Can you share access password?

5 minutes ago, tuanphan said:

Can you share access password?

Sure, 5555pock

Which order you want?

For each page sub categories of the shop (Top, Manteaux & Vestes, Pantalons, Robes & jupes, Chaussures & accéssoires) :

1. Femme
2. Homme
3. XS
4. S
5. M
6. L
7. XL

Add to Home > Design > Custom CSS

/* this code for desktop ss 70 */
/* check by tuanphan */
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
/* female */
.ProductList-filter-list-item:nth-child(2) {
    order: 1;
}
/* Homme */
.ProductList-filter-list-item:nth-child(3) {
    order: 2;
}
/* XS */
.ProductList-filter-list-item:nth-child(8) {
    order: 3;
}
/* S */
.ProductList-filter-list-item:nth-child(6) {
    order: 4;
}
/* M */
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
/* L */
.ProductList-filter-list-item:nth-child(4) {
    order:6;
}
/* XL */
.ProductList-filter-list-item:nth-child(7) {
    order: 7;
}

}

Thank you ! How to do the same for mobile ?

Any idea ? Thanks

Try this

ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
/* female */
.ProductList-filter-list-item:nth-child(2) {
    order: 1;
}
/* Homme */
.ProductList-filter-list-item:nth-child(3) {
    order: 2;
}
/* XS */
.ProductList-filter-list-item:nth-child(8) {
    order: 3;
}
/* S */
.ProductList-filter-list-item:nth-child(6) {
    order: 4;
}
/* M */
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
/* L */
.ProductList-filter-list-item:nth-child(4) {
    order:6;
}
/* XL */
.ProductList-filter-list-item:nth-child(7) {
    order: 7;
}

Mobile takes more time. Try the code above, if it doesn't work, I will check back in a few days

. Hopefully in the meantime someone will provide the answer.

18 hours ago, tuanphan said:

Try this

ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
/* female */
.ProductList-filter-list-item:nth-child(2) {
    order: 1;
}
/* Homme */
.ProductList-filter-list-item:nth-child(3) {
    order: 2;
}
/* XS */
.ProductList-filter-list-item:nth-child(8) {
    order: 3;
}
/* S */
.ProductList-filter-list-item:nth-child(6) {
    order: 4;
}
/* M */
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
/* L */
.ProductList-filter-list-item:nth-child(4) {
    order:6;
}
/* XL */
.ProductList-filter-list-item:nth-child(7) {
    order: 7;
}

Mobile takes more time. Try the code above, if it doesn't work, I will check back in a few days

. Hopefully in the meantime someone will provide the answer.

It works it broke the menu 😕 Someone have an idea ? Thanks for your help again !

All code

Where is category filter on mobile. I don't see????

On 4/4/2020 at 4:52 AM, tuanphan said:

All code

Where is category filter on mobile. I don't see????

 

What do you mean ?

Open this url on mobile (pass: 5555pock): https://www.fripsix.com/shop

It's on the top page

2 hours ago, Tristan93100 said:

What do you mean ?

Open this url on mobile (pass: 5555pock): https://www.fripsix.com/shop

It's on the top page

2 hours ago, tuanphan said:

Sorry ! Now the url is : https://www.fripsix.com/boutique

The order works well on desktop but not on mobile