How to reorder the category list from my shop page

arvinlee53 · May 19, 2016

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 May 19, 2016 by arvinlee53
Initial Revision

brandon · May 19, 2016

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 May 19, 2016 by brandon

SkinDeep · January 30, 2017

Would this also work for the Galapagos template?

March 10, 2017

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 March 10, 2017 by Guest
Initial Revision

clairehungdesign · November 27, 2017

Hi @BrandonW, trying to use this bit of code for the Thorne Template, but it seems to not impact the list order at all.

Is this code only good for the Montauk template?

Any tweeks or updates greatly appreciated. Below is the code I've inputed thus far:

The website url is: https://global-design-firm.squarespace.com/shop/

Thanks in advance for your help!!

BraveTurtle · November 3, 2019

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

bbbynewton · December 20, 2019

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.

JonJonJon · January 6, 2020

Any solutions for the Brine layout?

tuanphan · January 6, 2020

54 minutes ago, JonJonJon said:

Any solutions for the Brine layout?

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

JonJonJon · January 6, 2020

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

tuanphan · January 6, 2020

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.

mnawrocki · February 23, 2020

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!

tuanphan · February 23, 2020

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 February 24, 2020 by tuanphan

mnawrocki · February 23, 2020

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!

tuanphan · February 24, 2020

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

mnawrocki · February 28, 2020

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

tuanphan · February 29, 2020

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

coryokeefe · March 17, 2020

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!

tuanphan · March 27, 2020

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

Laetitia · April 7, 2020

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

tuanphan · April 8, 2020

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

Laetitia · April 14, 2020

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 !

mnawrocki · April 23, 2020

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

ZAZI · May 6, 2020

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?

Aeniima · June 3, 2020

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.

How to reorder the category list from my shop page

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources