Floating Categories for shop. Categories stay visible on left of screen when customers are looking through products

Thanks!

Try adding this to your Custom CSS panel - this is just for your desktop when you've got the categories list on the left, as it would be a different code for when it's set to the top:

//stick categories desktop//
@media only screen and (min-width: 768px) {
  .products.collection-content-wrapper .nested-category-tree-wrapper {
    position: sticky;
    position: -webkit-sticky;
    top: 10vh;
  }
}

Unfortunately there's no way to have the subcategories expand, but one thing you could consider is adding an arrow or other symbol to the end of the categories names that do have a subcategory? So in the categories section, you could rename it from 'Carvings' to 'Carvings ➤' for example.

For the mobile view, you might also like to use something like the following, which changes the categories from a horizontal scroll (that's not actually obvious you're supposed to scroll) to a vertical list of categories:

//stack categories mobile//
@media only screen and (max-width: 767px) {
  .products.collection-content-wrapper .nested-category-children {
    flex-direction: column;
    overflow-x: hidden;
  }
  .nested-category-breadcrumb-list-item .breadcrumb-separator {
    display: none;
  }
}

I wouldn't make that one sticky though as it would take up too much screen real estate.

Let me know how you go 😊