Store Category Order Help

Site URL: https://www.ofgoodnature.com/store

I would like to rearrange my categories in my store to show in this order:

All, On Sale, T-Shirts, Tank-Tops, Hoodies, Ladies, Music, Other

https://www.ofgoodnature.com/store

Using the Juke template.

Thanks.

@tuanphan I have a fix for this, but it might be overly complicated. Do you know of any quick tricks?

5 minutes ago, rwp said:

@tuanphan I have a fix for this, but it might be overly complicated. Do you know of any quick tricks?

I usually use CSS Flex Order for these questions =]]

Just now, tuanphan said:

CSS Flex Order =]]

I tried that, but the categories overflow off the screen. On narrow widths. The only fix I found was to use a grid, layed out for different widths. Seems cumbersome.

Try adding to Home > Design > custom CSS

@media screen and (min-width:641px) {
.ProductList-filter-list {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
ul.ProductList-filter-list>:nth-child(8) {
    margin-right: 15px;
}
}
@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
}
/* All */
ul.ProductList-filter-list>:nth-child(1) {
    order: 1;
}
/* On Sale */
ul.ProductList-filter-list>:nth-child(2) {
    order: 2;
}
/* T Shirts */
ul.ProductList-filter-list>:nth-child(7) {
    order: 3;
}
/* Tank Tops */
ul.ProductList-filter-list>:nth-child(8) {
    order: 4;
}
/* Hoodies*/
ul.ProductList-filter-list>:nth-child(3) {
    order: 5;
}
/* Ladies */
ul.ProductList-filter-list>:nth-child(4) {
    order: 5;
}
/* Music */
ul.ProductList-filter-list>:nth-child(5) {
    order: 5;
}
/* Other */
ul.ProductList-filter-list>:nth-child(6) {
    order: 6;
}

35 minutes ago, tuanphan said:

Try adding to Home > Design > custom CSS

@media screen and (min-width:641px) {
.ProductList-filter-list {
    display: flex;
    justify-content: center;
}
ul.ProductList-filter-list>:nth-child(8) {
    margin-right: 15px;
}
}
@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
}
/* All */
ul.ProductList-filter-list>:nth-child(1) {
    order: 1;
}
/* On Sale */
ul.ProductList-filter-list>:nth-child(2) {
    order: 2;
}
/* T Shirts */
ul.ProductList-filter-list>:nth-child(7) {
    order: 3;
}
/* Tank Tops */
ul.ProductList-filter-list>:nth-child(8) {
    order: 4;
}
/* Hoodies*/
ul.ProductList-filter-list>:nth-child(3) {
    order: 5;
}
/* Ladies */
ul.ProductList-filter-list>:nth-child(4) {
    order: 5;
}
/* Music */
ul.ProductList-filter-list>:nth-child(5) {
    order: 5;
}
/* Other */
ul.ProductList-filter-list>:nth-child(6) {
    order: 6;
}

 

This worked great, thank you!

@ofgoodnature Did that give you an overflow issue on narrower screens? I couldn't get flex orders to work when I tried.

12 minutes ago, rwp said:

@ofgoodnature Did that give you an overflow issue on narrower screens? I couldn't get flex orders to work when I tried.

 

flex-wrap?

17 minutes ago, ofgoodnature said:

This worked great, thank you!

I just adjusted the code. You can insert again new code

5 minutes ago, tuanphan said:

flex-wrap?

I just adjusted the code. You can insert again new code

Taught me something again!

That looks like it works perfectly.