Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reorder Categories


STF

Question

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;
}
 

 

Link to comment

9 answers to this question

Recommended Posts

  • 0

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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

Link to comment
  • 0
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. 

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

Link to comment
  • 0

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...