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

5 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

Create an account or sign in to comment

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


×
×
  • Create New...