Jump to content

Reorder Categories

Recommended Posts

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
  • Replies 9
  • Views 879
  • Created
  • Last Reply

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.