reorder categories on indigo template

Site URL: https://pollinator-project.com/

Hi all,

I did some forum research but could not find answers with the Indigo template, and squarespace apparently still doesn't assist with custom coding (booo)

Looking to reorder the categories on my page to the following:

wildflower seed packets / honey soap / merch / flower resin pieces /bedhead fiber dye seeds

any help would be sooo appreciated!!! 

21 hours ago, chelseat123 said:

Site URL: https://pollinator-project.com/

Hi all,

I did some forum research but could not find answers with the Indigo template, and squarespace apparently still doesn't assist with custom coding (booo)

Looking to reorder the categories on my page to the following:

wildflower seed packets / honey soap / merch / flower resin pieces /bedhead fiber dye seeds

any help would be sooo appreciated!!! 

Manually set to order the right position as you wish, you must know how to inspect element via dev tool of browse to get the right selector

.ProductList-filter-list {
  display: flex;
}

.ProductList-filter-list > .ProductList-filter-list-item {
  margin-right: 15px !important;
}
.ProductList-filter-list > .ProductList-filter-list-item:nth-child(2) {
  order:5;
}
.ProductList-filter-list > .ProductList-filter-list-item:nth-child(3) {
  order:4;
}

.ProductList-filter-list > .ProductList-filter-list-item:nth-child(4) {
  order:2;
}
.ProductList-filter-list > .ProductList-filter-list-item:nth-child(5) {
  order:3;
}

.ProductList-filter-list > .ProductList-filter-list-item:nth-child(6) {
  order:1;
}

If using javascript, it could be easier for you to confige

Let me know how it works on your site

my testing

On 4/16/2022 at 6:02 AM, bangank36 said:

Manually set to order the right position as you wish, you must know how to inspect element via dev tool of browse to get the right selector

.ProductList-filter-list {
  display: flex;
}

.ProductList-filter-list > .ProductList-filter-list-item {
  margin-right: 15px !important;
}
.ProductList-filter-list > .ProductList-filter-list-item:nth-child(2) {
  order:5;
}
.ProductList-filter-list > .ProductList-filter-list-item:nth-child(3) {
  order:4;
}

.ProductList-filter-list > .ProductList-filter-list-item:nth-child(4) {
  order:2;
}
.ProductList-filter-list > .ProductList-filter-list-item:nth-child(5) {
  order:3;
}

.ProductList-filter-list > .ProductList-filter-list-item:nth-child(6) {
  order:1;
}

If using javascript, it could be easier for you to confige

Let me know how it works on your site

Hello there! This worked out great, thank you so much for your assistance 🙂