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
Go to solution Solved by brandon,

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 post
  • Answers 51
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Saved your question. Will check tomorrow.

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

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

Posted Images

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)

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

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

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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

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.

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

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! 

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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

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

 

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

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

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

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

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

 

Email me if you have need any help (free, of course :-D). Answer within 24 hours.

How to:

-- Yup!

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 !

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 

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?

 

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.

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

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