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

Well... I just want to say that I figured it out! (I was missing hashtags for the collection!).

Here's where I landed. And thanks, @tuanphan for your awesome work on this stuff.

------------------------

/*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(1) {
order: 3;  
}

Share this post


Link to post
  • 0

@tuanphan ok... it's working, but there's a weird loading thing that happens when a page opens. Pages open first with the original category order then switch to the new order. Is there a way to preload the categories (or approach this differently) to have each page's navigation displayed in the correct order?

I removed the #collection-5995fe7a6f4ca37560772435 from the code to see if it would speed up page loading.

If you click from "All" to "Sweet Products" etc. you'll see what I mean.

Here's the page again...

https://david-lopez-aha9.squarespace.com/products-content

Share this post


Link to post
  • 0
On 6/4/2020 at 10:56 PM, lottydotty said:

@tuanphan ok... it's working, but there's a weird loading thing that happens when a page opens. Pages open first with the original category order then switch to the new order. Is there a way to preload the categories (or approach this differently) to have each page's navigation displayed in the correct order?

I removed the #collection-5995fe7a6f4ca37560772435 from the code to see if it would speed up page loading.

If you click from "All" to "Sweet Products" etc. you'll see what I mean.

Here's the page again...

https://david-lopez-aha9.squarespace.com/products-content

The link doesn't exist.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

Hi! We need help on our website if anyone can help! Our website is: enjoysnacks.com. Any help would be greatly appreciated!

Share this post


Link to post
  • 0

@ryandejaegher Yes! Sorry, I forgot to add the order we want them in.

ALL/  GIFT PACKS / ARARE/PEANUTS / BEST SELLERS / CANDIES / CANDIES BV/ CHIPS / COOKIES / FUN PACKS /

GIFT BOXES / LEIS / SPECIALTY ITEMS / NEW ARRIVALS / SEEDS /

Share this post


Link to post
  • 0
2 hours ago, galangster said:

@ryandejaegher Here is the website: enjoysnacks.com

@galangster normally you could do this with flexbox and order but you've got a lot of items. How attached are you to the | between each category? 

If those are removed it's easier to rearrange/reorder


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
20 minutes ago, ryandejaegher said:

@galangster normally you could do this with flexbox and order but you've got a lot of items. How attached are you to the | between each category? 

If those are removed it's easier to rearrange/reorder

@ryandejaegher Our client is please with the | in between each category, unfortunately. 

Share this post


Link to post
  • 0
On 6/13/2020 at 8:18 AM, honuboba said:

Hi there, can I get help updating the order of my categories to:

  1. all
  2. tumblers
  3. straws
  4. clearance

Here is my website address: https://www.honuboba.com/shop

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-filter-item:nth-child(5) {
    order: 5;
}
/* Clearance */
.category-filter-item:nth-child(3) {
    order: 7;
}
span.category-filter-delimiter.has-category {
    display: none;
}

 

On 6/12/2020 at 3:48 AM, galangster said:

Hi! We need help on our website if anyone can help! Our website is: enjoysnacks.com. Any help would be greatly appreciated!

Have you solved it yet?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

@honuboba

Add this to your custom CSS

Result:
image.thumb.png.1e28c2a86af8f1a4fcadd5b866896ccf.png
 

.category-filter-list > *:nth-child(1) {
  order: 1;
}

.category-filter-list > *:nth-child(2) {
  order: 1;
}

.category-filter-list > *:nth-child(3) {
  order: 4;
}

.category-filter-list > *:nth-child(4) {
  order: 3;
}

.category-filter-list > *:nth-child(5) {
  order: 3;
}

.category-filter-list > *:nth-child(6) {
  order: 3;
}

.category-filter-list > *:nth-child(7) {
  order: 2;
}

 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0

@galangster

add this to your custom CSS

.category-filter-list > *:nth-child(1) {
  order: 1;
}

.category-filter-list > *:nth-child(2) {
  order: 2;
}

.category-filter-list > *:nth-child(3) {
  order: 3;
}

.category-filter-list > *:nth-child(4) {
  order: 4;
}

.category-filter-list > *:nth-child(5) {
  order: 5;
}

.category-filter-list > *:nth-child(6) {
  order: 6;
}

.category-filter-list > *:nth-child(7) {
  order: 7;
}

.category-filter-list > *:nth-child(8) {
  order: 8;
}

.category-filter-list > *:nth-child(9) {
  order: 9;
}

.category-filter-list > *:nth-child(10) {
  order: 10;
}

.category-filter-list > *:nth-child(11) {
  order: 11;
}

.category-filter-list > *:nth-child(12) {
  order: 12;
}

.category-filter-list > *:nth-child(13) {
  order: 13;
}

.category-filter-list > *:nth-child(14) {
  order: 14;
}

.category-filter-list > *:nth-child(15) {
  order: 15;
}

.category-filter-list > *:nth-child(16) {
  order: 16;
}

.category-filter-list > *:nth-child(17) {
  order: 17;
}

.category-filter-list > *:nth-child(18) {
  order: 18;
}

.category-filter-list > *:nth-child(19) {
  order: 2;
}

.category-filter-list > *:nth-child(20) {
  order: 2;
}

.category-filter-list > *:nth-child(21) {
  order: 21;
}

.category-filter-list > *:nth-child(22) {
  order: 22;
}

.category-filter-list > *:nth-child(23) {
  order: 24;
}

.category-filter-list > *:nth-child(24) {
  order: 24;
}

.category-filter-list > *:nth-child(25) {
  order: 25;
}

.category-filter-list > *:nth-child(26) {
  order: 23;
}

.category-filter-list > *:nth-child(27) {
  order: 22;
}

Result:
image.thumb.png.99e66dfba17b26665721f3fb32528074.png
 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
3 hours ago, ryandejaegher said:

add this to your custom CSS


.category-filter-list > *:nth-child(1) {
  order: 1;
}

.category-filter-list > *:nth-child(2) {
  order: 2;
}

.category-filter-list > *:nth-child(3) {
  order: 3;
}

.category-filter-list > *:nth-child(4) {
  order: 4;
}

.category-filter-list > *:nth-child(5) {
  order: 5;
}

.category-filter-list > *:nth-child(6) {
  order: 6;
}

.category-filter-list > *:nth-child(7) {
  order: 7;
}

.category-filter-list > *:nth-child(8) {
  order: 8;
}

.category-filter-list > *:nth-child(9) {
  order: 9;
}

.category-filter-list > *:nth-child(10) {
  order: 10;
}

.category-filter-list > *:nth-child(11) {
  order: 11;
}

.category-filter-list > *:nth-child(12) {
  order: 12;
}

.category-filter-list > *:nth-child(13) {
  order: 13;
}

.category-filter-list > *:nth-child(14) {
  order: 14;
}

.category-filter-list > *:nth-child(15) {
  order: 15;
}

.category-filter-list > *:nth-child(16) {
  order: 16;
}

.category-filter-list > *:nth-child(17) {
  order: 17;
}

.category-filter-list > *:nth-child(18) {
  order: 18;
}

.category-filter-list > *:nth-child(19) {
  order: 2;
}

.category-filter-list > *:nth-child(20) {
  order: 2;
}

.category-filter-list > *:nth-child(21) {
  order: 21;
}

.category-filter-list > *:nth-child(22) {
  order: 22;
}

.category-filter-list > *:nth-child(23) {
  order: 24;
}

.category-filter-list > *:nth-child(24) {
  order: 24;
}

.category-filter-list > *:nth-child(25) {
  order: 25;
}

.category-filter-list > *:nth-child(26) {
  order: 23;
}

.category-filter-list > *:nth-child(27) {
  order: 22;
}

Result:
image.thumb.png.99e66dfba17b26665721f3fb32528074.png
 

@ryandejaegher This worked perfectly! Thank you so much for the help!

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