Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
kodacurrie

changing order of categories

Question

Site URL: http://mattretzlaff.com

Is there a way to re-order the product categories on the Shop page?

I need them to be: 

All / Large Scale / Tabletop and Wall / Garden

right now my site is password protected because it's not yet live

pw: retzlaff

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 1
7 hours ago, brandjarrett said:

Hello!

I'm looking to do the same thing:

site: http://www.alycefayeoriginals.com/all

password: tempshop7851

order:    All     Wire Sculpture     Jewelry     Other

 

Thanks in advance for the help!

.ProductList-filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ProductList-filter-list-item.ProductList-filter-list-item--all {
  order: 1;
}
.ProductList-filter-list-item:nth-child(2) {
  order: 3;
}
.ProductList-filter-list-item:nth-child(3) {
  order: 4;
  margin: 0;
}
.ProductList-filter-list-item:nth-child(4) {
  order: 2;
  margin-right: 15px;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(1) {
      order: 1;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(2) {
      order: 2;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(3) {
      order: 7;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(4) {
      order: 4;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(5) {
      order: 3;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(6) {
      order: 6;
  }
 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(7) {
      order: 5;
  }

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
4 hours ago, brandjarrett said:

Hello!

I'm looking to do the same thing:

site: http://www.alycefayeoriginals.com/all

password: tempshop7851

order:    All     Wire Sculpture     Jewelry     Other

 

Thanks in advance for the help!

The link doesn't exist. Can you check?


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

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

@rwp I'm actually seeing a slight issue on mobile; some categories are back-to-back now

Also is there a way to hide the category dropdown menu on mobile?

911578320_ScreenShot2020-08-01at11_41_36AM.png.133c604c0fbdf8f233c0fa4844ff33d9.png

Share this post


Link to post
  • 0

I'll send updated code when I get to a computer


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Change the code I sent to this:

.ProductList-filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ProductList-filter-list-item.ProductList-filter-list-item--all {
  order: 1;
}
.ProductList-filter-list-item:nth-child(2) {
  order: 3;
}
.ProductList-filter-list-item:nth-child(3) {
  order: 4;
}
.ProductList-filter-list-item:nth-child(4) {
  order: 2;
}
.ProductList-filter-list-item {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

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