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

How to reorder the category list from my shop page

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

Share this post


Link to post

Recommended Posts

  • 0

Hi there.

Give this a try. Insert the following CSS using the CSS Editor.


/*Reorder category list items on Montauk*/

/*http://caniuse.com/flexbox*/
/*http://shouldiprefix.com/#flexbox*/

#collection-5719735837013bf7bb9fc122 .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;
}

/*Set the order of each list item ('li'), starting from the second child (first child is not displayed)*/

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

/*"General"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(3) {
order: 6;  
}

/*"Hair"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(4) {
order: 2;  
}

/*"Hair Care"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(5) {
order: 4;  
}

/*"Nail"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(6) {
order: 5;  
}

/*"Wig"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(7) {
order: 3;  
}

@media only screen and (max-width:640px) {
 #collection-5719735837013bf7bb9fc122 .category-nav-links {
   -webkit-flex-flow: column;
   flex-flow: column;
 }
}

Keep in mind that if you add or remove categories, you'll have to change the "order:" values accordingly.

Do let me know if this works for you.

-Brandon


If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 1

Hi @BrandonW, I am trying to change the order of my categories in my site: https://www.maxcila.com/ using the Indigo template. The new order I want it to be is: 1. All  2. Leather  3. Gold  4. Silver   5. Small  6. Medium  7. Large.  Any way to help me with this? Do I need a CSS code to inject? Thanks very much in advance!

Best,

M

Share this post


Link to post
  • 1
On 2/24/2020 at 8:01 AM, tuanphan said:

@media screen and (min-width:641px) {
.ProductList-filter-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: center;
}
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
.ProductList-filter-list-item:nth-child(2) {
    order: 2;
}
.ProductList-filter-list-item:nth-child(3) {
    order: 3;
}
.ProductList-filter-list-item:nth-child(4) {
    order: 4;
}
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
.ProductList-filter-list-item:nth-child(6) {
    order: 6;
}
}

You can play around with order

Thank you so much! I was able to adjust them but the 5th and 6th options lost the space between the categories (where it says SLEEP CAREOTHER). Do you know why this may have happened? www.shopplantbasedbeauty.com/shop-our-store

Share this post


Link to post
  • 0

Hello @BrandonW, do you think you can help me with my issue as well. Same question, need to re-order the Categories on the left side form alphabetical to the order below. Also where do I add your code?Do you think you can help?

https://www.alpicairus.com/all-products/

Category order: ALL, ONSALE, 9,000 BTU, 12,000 BTU, 18,000 BTU, 27,000 BTU, 36,000 BTU, SINGLE ZONE, DUAL ZONE, TRI ZONE, QUAD ZONE, WALL MOUNT, CASSETTE TYPE, CONCEALED DUCT

THANK YOU

Edited by mj23157
Initial Revision

Share this post


Link to post
  • 0

I added numbers to my category names (1. XXXXXX) for my shopping page and not only did it reorganize them according to number but left the products in the correct category. 

Share this post


Link to post
  • 0
54 minutes ago, JonJonJon said:

Any solutions for the Brine layout?

you can create question  with link to your site and we will help


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
1 minute ago, JonJonJon said:

Hi Tuanphan,

Thanks for the offer to help 🙂

my website is under construction ad I'm currently working away at every aspect of it. I've removed the password, but will put that back in place after we've spoken or in 24hrs.

jonathangallagher.squarespace.com/photo

 

I'd ilke the ability to reorder the category names

Saved your question. Will check tomorrow.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Hi there @tuanphan - I saw your comment earlier this year about coming back with some details around adjusting the shop categories order for the Brine template. Just stopping by to see if you have any insights to share. Thank you! 

Share this post


Link to post
  • 0
1 hour ago, mnawrocki said:

Hi there @tuanphan - I saw your comment earlier this year about coming back with some details around adjusting the shop categories order for the Brine template. Just stopping by to see if you have any insights to share. Thank you! 

 

Can you share link to your shop page? I can take a look

Edited by tuanphan

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
14 hours ago, mnawrocki said:

Hi there @tuanphan - thanks so much for your quick reply, here's the page I'm referring to:

https://www.shopplantbasedbeauty.com/shop-our-store

Thanks again, looking forward to hearing back! 

 

@media screen and (min-width:641px) {
.ProductList-filter-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: center;
}
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
.ProductList-filter-list-item:nth-child(2) {
    order: 2;
}
.ProductList-filter-list-item:nth-child(3) {
    order: 3;
}
.ProductList-filter-list-item:nth-child(4) {
    order: 4;
}
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
.ProductList-filter-list-item:nth-child(6) {
    order: 6;
}
}

You can play around with order


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
16 hours ago, mnawrocki said:

Thank you so much! I was able to adjust them but the 5th and 6th options lost the space between the categories (where it says SLEEP CAREOTHER). Do you know why this may have happened? www.shopplantbasedbeauty.com/shop-our-store

Sleep care is last child so it has no margin right, other items has margin right

Edit to this code

.ProductList-filter-list-item:nth-child(6) {
    order: 5;
    margin: 0 25px 0 0;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Hi There,

www.bodegalosalamos.com

We want to change the order of categories to - Bubbles, White, Rose, Red, Beer, Cider, Merch, Gift Card

Any help today would be amazing!

Share this post


Link to post
  • 0
On 3/17/2020 at 8:33 AM, coryokeefe said:

Hi There,

www.bodegalosalamos.com

We want to change the order of categories to - Bubbles, White, Rose, Red, Beer, Cider, Merch, Gift Card

Any help today would be amazing!

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Hey!

I'm also having issues to reorganize the order of the categories from my shop, I'm using the template "Five".

Is there anyway someone ca help me ?

I'm trying to change it to the following order : All - Vêtements - Bijoux - Accessoires - Carte-cadeau

 

Here is the link to the page: www.cklz.ch/shop
 

Thanks so much

Share this post


Link to post
  • 0
15 hours ago, Laetitia said:

Hey!

I'm also having issues to reorganize the order of the categories from my shop, I'm using the template "Five".

Is there anyway someone ca help me ?

I'm trying to change it to the following order : All - Vêtements - Bijoux - Accessoires - Carte-cadeau

 

Here is the link to the page: www.cklz.ch/shop
 

Thanks so much

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.category-nav-links {
    display: flex !important;
    justify-content: center;
}
/* all */
.category-nav-links>li:nth-child(2) {
    order: 1;
}
/* Vetement */
.category-nav-links>li:nth-child(6) {
    order: 2;
}
/* Bijoux */
.category-nav-links>li:nth-child(4) {
    order: 3;
}
/* Accessories */
.category-nav-links>li:nth-child(3) {
    order: 4;
}
/* Carte cadeau */
.category-nav-links>li:nth-child(5) {
    order: 5;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
On 4/8/2020 at 8:57 AM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (min-width:641px) {
.category-nav-links {
    display: flex !important;
    justify-content: center;
}
/* all */
.category-nav-links>li:nth-child(2) {
    order: 1;
}
/* Vetement */
.category-nav-links>li:nth-child(6) {
    order: 2;
}
/* Bijoux */
.category-nav-links>li:nth-child(4) {
    order: 3;
}
/* Accessories */
.category-nav-links>li:nth-child(3) {
    order: 4;
}
/* Carte cadeau */
.category-nav-links>li:nth-child(5) {
    order: 5;
}
}

 

Thanks a lot, works perfectly !

Share this post


Link to post
  • 0
On 2/29/2020 at 7:18 AM, tuanphan said:

Sleep care is last child so it has no margin right, other items has margin right

Edit to this code


.ProductList-filter-list-item:nth-child(6) {
    order: 5;
    margin: 0 25px 0 0;
}

 

Thank you so much! This worked perfectly 

Share this post


Link to post
  • 0

Hey! 

I am trying to do the same for zazi-vintage.com. 

The order has to be: all, zazi-summer, dresses, tops, skirts, homeware, cushions. 

Could you help me out as well?

 

Share this post


Link to post
  • 0

Hello!
Would you also be able to help me with changing the order of my store?
It's for: https://www.obsess.tokyo/shop-1

I'm trying to do: 
accessories, coats, dresses, hoodies, jackets, leather goods, shirts, skirts, t-shirts, tops, trousers, collection no.7, collection no.8., one off t-shirts

Thank you so much.

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...