Jump to content

How to reorder the category list from my shop page

By Guest, in Customize with code

Go to solution Solved by brandon,

Recommended Posts

lottydotty Level 5

lottydotty

Posted
Posted

@tuanphan

I'm using the Pacific template (Squarespace 7.0), and we're making some adjustments to the ecommerce side of our website.

I'm reorganizing the site using categories, and I've got a similar reordering challenge.

Right now the categories are simply displayed in alphabetical order ("All", "Gifts", "Savory Products", and "Sweet Products"). I'd like to reorder the navigation at the top of the page to read as ("All", "Sweet Products", "Savory Products", and "Gifts").  I tried adopting your CSS suggestions for others, but I must have done something wrong.

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

I'd love your help 🙂

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

And here's my attempt at CSS for the page...

/*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(2) {
order: 3;  
}

Link to comment
  • Replies 56
  • Views 16.8k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

Saved your question. Will check tomorrow.

tuanphan
tuanphan

Have you solved yet? If not, I can take a look

RyanDejaegher
RyanDejaegher

@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-

Posted Images

lottydotty Level 5

lottydotty

Posted
Posted

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
lottydotty Level 5

lottydotty

Posted
Posted

@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
tuanphan Level 17

tuanphan

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

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

Link to comment
RyanDejaegher Level 7

RyanDejaegher

Posted
Posted
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 response: https://m.me/dejaegherryan

 

Link to comment
tuanphan Level 17

tuanphan

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

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

Link to comment
RyanDejaegher Level 7

RyanDejaegher

Posted
Posted

@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 response: https://m.me/dejaegherryan

 

Link to comment
RyanDejaegher Level 7

RyanDejaegher

Posted
Posted

@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 response: https://m.me/dejaegherryan

 

Link to comment
galangster Level 4

galangster

Posted
Posted
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
  • 1 month later...
  • 4 weeks later...
tuanphan Level 17

tuanphan

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

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

Link to comment
  • 2 weeks later...
paul2009 Level 18

paul2009

Posted
Posted
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  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
materialandmovement Level 4

materialandmovement

Posted
Posted

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
tuanphan Level 17

tuanphan

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

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

Link to comment
tuanphan Level 17

tuanphan

Posted
Posted (edited)
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. 
Or send to forum message

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

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources