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

Collapse Product Categories & Reorder – Sonora template


rachel27

Question

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

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

https://www.seabirdcoffee.com/seabird-swag

1694708263_ScreenShot2020-12-28at12_28_42PM.png.35fdd454b61e4f9554e18561ff5d28e8.png1792129623_ScreenShot2020-12-28at12_28_25PM.thumb.png.f9208c86894ed27777fbcdceafc738ab.png

Thanks ahead of time!

 

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

1 answer to this question

Recommended Posts

  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...