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

How to reorder the category list from my shop page


arvinlee53

Question

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've already tried a few and it hasn't worked. Here's the link to the website I'm working on: https://arvin-lee.squarespace.com/config#/|/

For instance I'd like to change the order of the categories to: 1. Hair 2. Wig 3. Hair Care 4. Nail 5. General Mechanics

Edited by arvinlee53
Initial Revision
Link to comment

Recommended Posts

  • 0

Well... I just want to say that I figured it out! (I was missing hashtags for the collection!).

Here's where I landed. And thanks, @tuanphan for your awesome work on this stuff.

------------------------

/*Reorder category list items on Pacific*/

#collection-5995fe7a6f4ca37560772435 .category-nav-links {
 display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -ms-flexbox;  /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
 display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

 -webkit-justify-content: space-around; /* Safari 6.1+ */
 justify-content: center;
}

/*"All"*/
#collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(1) {
order: 1;  
}

/*"Sweet Products"*/
#collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(4) {
order: 2;  
}

/*"Savory Products"*/
#collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(3) {
order: 3;  
}

/*"Gifts"*/
#collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(1) {
order: 3;  
}

Link to comment
  • 0

@tuanphan ok... it's working, but there's a weird loading thing that happens when a page opens. Pages open first with the original category order then switch to the new order. Is there a way to preload the categories (or approach this differently) to have each page's navigation displayed in the correct order?

I removed the #collection-5995fe7a6f4ca37560772435 from the code to see if it would speed up page loading.

If you click from "All" to "Sweet Products" etc. you'll see what I mean.

Here's the page again...

https://david-lopez-aha9.squarespace.com/products-content

Link to comment
  • 0
On 6/4/2020 at 10:56 PM, lottydotty said:

@tuanphan ok... it's working, but there's a weird loading thing that happens when a page opens. Pages open first with the original category order then switch to the new order. Is there a way to preload the categories (or approach this differently) to have each page's navigation displayed in the correct order?

I removed the #collection-5995fe7a6f4ca37560772435 from the code to see if it would speed up page loading.

If you click from "All" to "Sweet Products" etc. you'll see what I mean.

Here's the page again...

https://david-lopez-aha9.squarespace.com/products-content

The link doesn't exist.

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
2 hours ago, galangster said:

@ryandejaegher Here is the website: enjoysnacks.com

@galangster normally you could do this with flexbox and order but you've got a lot of items. How attached are you to the | between each category? 

If those are removed it's easier to rearrange/reorder

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 0
On 6/13/2020 at 8:18 AM, honuboba said:

Hi there, can I get help updating the order of my categories to:

  1. all
  2. tumblers
  3. straws
  4. clearance

Here is my website address: https://www.honuboba.com/shop

Add to Home > Design > Custom CSS

/* All */
.category-filter-item:nth-child(1) {
    order: 1;
}
/* Tumblers */
.category-filter-item:nth-child(7) {
    order: 3;
}
/* Straws */
.category-filter-item:nth-child(5) {
    order: 5;
}
/* Clearance */
.category-filter-item:nth-child(3) {
    order: 7;
}
span.category-filter-delimiter.has-category {
    display: none;
}

 

On 6/12/2020 at 3:48 AM, galangster said:

Hi! We need help on our website if anyone can help! Our website is: enjoysnacks.com. Any help would be greatly appreciated!

Have you solved it yet?

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

@honuboba

Add this to your custom CSS

Result:
image.thumb.png.1e28c2a86af8f1a4fcadd5b866896ccf.png
 

.category-filter-list > *:nth-child(1) {
  order: 1;
}

.category-filter-list > *:nth-child(2) {
  order: 1;
}

.category-filter-list > *:nth-child(3) {
  order: 4;
}

.category-filter-list > *:nth-child(4) {
  order: 3;
}

.category-filter-list > *:nth-child(5) {
  order: 3;
}

.category-filter-list > *:nth-child(6) {
  order: 3;
}

.category-filter-list > *:nth-child(7) {
  order: 2;
}

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 0

@galangster

add this to your custom CSS

.category-filter-list > *:nth-child(1) {
  order: 1;
}

.category-filter-list > *:nth-child(2) {
  order: 2;
}

.category-filter-list > *:nth-child(3) {
  order: 3;
}

.category-filter-list > *:nth-child(4) {
  order: 4;
}

.category-filter-list > *:nth-child(5) {
  order: 5;
}

.category-filter-list > *:nth-child(6) {
  order: 6;
}

.category-filter-list > *:nth-child(7) {
  order: 7;
}

.category-filter-list > *:nth-child(8) {
  order: 8;
}

.category-filter-list > *:nth-child(9) {
  order: 9;
}

.category-filter-list > *:nth-child(10) {
  order: 10;
}

.category-filter-list > *:nth-child(11) {
  order: 11;
}

.category-filter-list > *:nth-child(12) {
  order: 12;
}

.category-filter-list > *:nth-child(13) {
  order: 13;
}

.category-filter-list > *:nth-child(14) {
  order: 14;
}

.category-filter-list > *:nth-child(15) {
  order: 15;
}

.category-filter-list > *:nth-child(16) {
  order: 16;
}

.category-filter-list > *:nth-child(17) {
  order: 17;
}

.category-filter-list > *:nth-child(18) {
  order: 18;
}

.category-filter-list > *:nth-child(19) {
  order: 2;
}

.category-filter-list > *:nth-child(20) {
  order: 2;
}

.category-filter-list > *:nth-child(21) {
  order: 21;
}

.category-filter-list > *:nth-child(22) {
  order: 22;
}

.category-filter-list > *:nth-child(23) {
  order: 24;
}

.category-filter-list > *:nth-child(24) {
  order: 24;
}

.category-filter-list > *:nth-child(25) {
  order: 25;
}

.category-filter-list > *:nth-child(26) {
  order: 23;
}

.category-filter-list > *:nth-child(27) {
  order: 22;
}

Result:
image.thumb.png.99e66dfba17b26665721f3fb32528074.png
 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 0
3 hours ago, ryandejaegher said:

add this to your custom CSS


.category-filter-list > *:nth-child(1) {
  order: 1;
}

.category-filter-list > *:nth-child(2) {
  order: 2;
}

.category-filter-list > *:nth-child(3) {
  order: 3;
}

.category-filter-list > *:nth-child(4) {
  order: 4;
}

.category-filter-list > *:nth-child(5) {
  order: 5;
}

.category-filter-list > *:nth-child(6) {
  order: 6;
}

.category-filter-list > *:nth-child(7) {
  order: 7;
}

.category-filter-list > *:nth-child(8) {
  order: 8;
}

.category-filter-list > *:nth-child(9) {
  order: 9;
}

.category-filter-list > *:nth-child(10) {
  order: 10;
}

.category-filter-list > *:nth-child(11) {
  order: 11;
}

.category-filter-list > *:nth-child(12) {
  order: 12;
}

.category-filter-list > *:nth-child(13) {
  order: 13;
}

.category-filter-list > *:nth-child(14) {
  order: 14;
}

.category-filter-list > *:nth-child(15) {
  order: 15;
}

.category-filter-list > *:nth-child(16) {
  order: 16;
}

.category-filter-list > *:nth-child(17) {
  order: 17;
}

.category-filter-list > *:nth-child(18) {
  order: 18;
}

.category-filter-list > *:nth-child(19) {
  order: 2;
}

.category-filter-list > *:nth-child(20) {
  order: 2;
}

.category-filter-list > *:nth-child(21) {
  order: 21;
}

.category-filter-list > *:nth-child(22) {
  order: 22;
}

.category-filter-list > *:nth-child(23) {
  order: 24;
}

.category-filter-list > *:nth-child(24) {
  order: 24;
}

.category-filter-list > *:nth-child(25) {
  order: 25;
}

.category-filter-list > *:nth-child(26) {
  order: 23;
}

.category-filter-list > *:nth-child(27) {
  order: 22;
}

Result:
image.thumb.png.99e66dfba17b26665721f3fb32528074.png
 

@ryandejaegher This worked perfectly! Thank you so much for the help!

Link to comment
  • 0
On 7/16/2020 at 4:16 PM, SurvivalTechniqiues said:

Hi there,

Would anyone be able to help with the re-ordering in my shop also? I'm on version 7.1 and have tried some of the above codes but with my own categories in place and they didn't work.

My shop is: https://www.survivaltechniques.co.uk/shop-all

And I would like the order to be:

Prints
Paintings
Other Stuff
All

Add to Home > Design > Custom CSS

/* Prints */
ul.category-filter-list>li:nth-child(7) {
    order: 1;
}
/* Paintings */
ul.category-filter-list>li:nth-child(5) {
    order: 2;
}
/* Other Stuff */
ul.category-filter-list>li:nth-child(3) {
    order: 3;
}
/* All */
ul.category-filter-list>li:nth-child(1) {
    order: 4;
}
ul.category-filter-list>span.has-category {
    display: none;
}

 

7 hours ago, jasonparkerart said:

I'm looking to rearrange the order of my categories too. 

The order I am after:  All - New - Tees - Hoodies - Sale 

www.doomandbloomco.com is my website. 

Is this possible??

 

I see 6 items here. Where accessories?

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
On 7/16/2020 at 10:16 AM, SurvivalTechniqiues said:

Would anyone be able to help with the re-ordering in my shop also? I'm on version 7.1 and have tried some of the above codes but with my own categories in place and they didn't work.

As you are using Squarespace 7.1, you can change the category order without code! There's a built-in setting where you can drag and drop the categories.

To reorder the categories, open your Store page in the PAGES panel.

Click Settings (the 'gear' icon)

Click Categories.

Drag the category names into your preferred order.

Click CLOSE.

Here's a short video sequence showing the steps to reorder "Bowls | Cups" into the order "Cups | Bowls":

 

spacer.png

If you don't see the options in this video, check you have upgraded your 7.1 store. If you haven't upgraded, you should see the message below in your PAGES panel:

spacer.png

 

 If this helps you, please click "Like" below  ⬇️

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

I've received help with this before, but now the order is messed up and my original question is gone from the forum. This is the page I want to fix:

https://www.materialandmovement.com/earrings

I want the categories listed in this order:

All
Sterling Silver
Gold Fill
Post Earring
Single Earring
Super Dangle
Duo Earring
Triple Earring

I have this code and no matter how I move the numbers around they don't line up:
 

#collection-5c5a5e188165f5f67726a016 .ProductList-filter-list {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    -webkit-flex-flow: column;
    flex-flow: column;
 }

  /*"All"*/
#collection-5c5a5e188165f5f67726a016 .ProductList-filter .ProductList-filter-list-item:nth-child(2) {
   order: 1;  
  }
  /*"Gold Fill"*/
#collection-5c5a5e188165f5f67726a016 .ProductList-filter .ProductList-filter-list-item:nth-child(3) {
   order: 2;  
  }
  /*"Sterling Silver"*/
 #collection-5c5a5e188165f5f67726a016 .ProductList-filter .ProductList-filter-list-item:nth-child(2) {
   order: 3;  
  }
 
  /*"Post Earring"*/
 #collection-5c5a5e188165f5f67726a016  .ProductList-filter .ProductList-filter-list-item:nth-child(6) {
   order: 4;  
  }
 
  /*"Single Earring"*/
 #collection-5c5a5e188165f5f67726a016 .ProductList-filter .ProductList-filter-list-item:nth-child(3) {
   order: 5;  
  }
 
  /*"Super Dangle"*/
#collection-5c5a5e188165f5f67726a016  .ProductList-filter .ProductList-filter-list-item:nth-child(2) {
   order: 6;  
  }
 
  /*"Duo Earring"*/
#collection-5c5a5e188165f5f67726a016 .ProductList-filter .ProductList-filter-list-item:nth-child(2) {
   order: 7;  
  }

  /*"Triple Earring"*/
#collection-5c5a5e188165f5f67726a016 .ProductList-filter .ProductList-filter-list-item:nth-child(8) {
   order: 8;  
  }

 

I'd really appreciate some straightening out! Thank you.

Link to comment
  • 0
On 9/6/2020 at 5:23 AM, materialandmovement said:

I've received help with this before, but now the order is messed up and my original question is gone from the forum. This is the page I want to fix:

https://www.materialandmovement.com/earrings

I want the categories listed in this order:

All
Sterling Silver
Gold Fill
Post Earring
Single Earring
Super Dangle
Duo Earring
Triple Earring
 

I don't see Post Earring?

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
On 9/8/2020 at 3:01 AM, materialandmovement said:

Right - I decided to make that its own page after I posted this. Thanks for the call out. It wasn't working even before the post earring addition - are you still able to help? Thanks!

Which order you want now? I will check again

Note that when you add / delete a category, the code will need to change, so I need to know the exact order to come up with the correct code.

Edited by tuanphan

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

Create an account or sign in to comment

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

×
×
  • Create New...