Jump to content

Collapse Product Categories & Reorder – Sonora template

Recommended Posts

Site URL: https://www.seabirdcoffee.com/buy-coffee

Hi all! I'm trying to figure out how to make my categories on my product pages a drop down and I haven't found other code for this. I'm looking to see if there's code to make the categories in the Sonora template a dropdown menu, either hamburger or a sideways carrot dropdown, also possibly with 'Categories' above the dropdown.

Also looking to reorganize the order of the Categories on our coffee page. (possibly doing the same for Merch later down the line.

1. Single Origin, 2. Blends, 3. Light Roast, 4. Medium Roast, 5. Dark Roast, 6. Espresso




Thanks ahead of time!


Link to comment

You can use CSS on both pages to change the order. Using your first example, the code below changes the 2nd item to the 5th place, the third item to the 4th place, and so on, reversing the order. Change the numbers as you like.

.ProductList-filter-list {
    display: grid;

.ProductList-filter-list li:nth-child(2) {
    order: 5;


.ProductList-filter-list li:nth-child(3) {
    order: 4;


.ProductList-filter-list li:nth-child(4) {
    order: 3;


.ProductList-filter-list li:nth-child(5) {
    order: 2;



Link to comment

Create an account or sign in to comment

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

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.