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

10 answers to this question

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


Send me a message if you have any questions (free 10 minutes).

Don't send to forum message. I will check all questions via the link above

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