# Restoring The Category List In The Squarespace Store Beta
**Source:** https://beyondspace.studio/blog/restoring-the-category-list-in-the-squarespace-store-beta
**Language:** French (France)

---

# Restoring the Category List in the Squarespace Store Beta

Feb 24

Written By Beyondspace

Squarespace's new **Store Filters (Beta)** is a long - overdue update for product discovery. However, it currently forces a specific design rule: if you have more than 7 categories - or if you are on a mobile device - your navigation is compressed into a tiny dropdown menu.

For many high-end shops, hiding your categories behind a click is a conversion killer. A visible **Category Tree** allows customers to scan your entire range instantly.

![Category List (Old)](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1771923212377-8V3PE8MS1MEY7ZAMU7D2/Screenshot2026-02-22at12_09_30AM.webp)![Category List (Old)]()

Category List (Old)

![Dropdown (New)](https://images.squarespace-cdn.com/content/v1/615d0bdeb9e47e1e585827d3/1771923212376-3ZSV61F3HAY8BP1QVHCI/Screenshot2026-02-22at12_25_07AM.webp)![Dropdown (New)]()

Dropdown (New)

I believe this is a temporary oversight and that Squarespace will eventually provide a toggle to choose between a "Dropdown" and a "List" view.

### The "Quick and Dirty" Fix

While we wait for the update to roll out completely, I’ve put together a lightweight script to "intercept" that dropdown and convert it back into origin nested list. It works perfectly with the **Section Header > Menu Placement > Side** layout.

#### Video in Action

#### The Code Snippet

Paste this into your **Site Footer** code injectiondans `Site web`  -> `Pages` -> `Custom Code (under Not Linked navigation)` -> `Code Injection`.

Once Squarespace proposes an official fix, simply remove it.

```
<!-- sqs:beyondspace-filter-dropdown-convert -->
<script>
/**
 * Squarespace Category Dropdown to Tree Converter
 * Logic: Appends to .product-list-filters and marks selected option as .active
 */
(function() {
  const select = document.getElementById('product-categories-filter-dropdown-select');
  if (!select) return;

  // 1. Setup the Tree Wrapper
  const treeWrapper = document.createElement('div');
  treeWrapper.className = 'nested-category-tree-wrapper';
  
  const rootUl = document.createElement('ul');
  treeWrapper.appendChild(rootUl);

  // 2. Identify/Create the target container & Hide native UI
  let targetContainer = select.closest('.product-list-filters');
  if (!targetContainer) return; // Safety break

  let dropdown = targetContainer.querySelector("#product-categories-filter-dropdown");
  let filterButton = targetContainer.querySelector(".product-list-filter-button-container");
  
  if (dropdown) { dropdown.style.display = "none"; }
  if (filterButton) { filterButton.style.display = "none"; }
    
  // 3. Process Options
  const options = Array.from(select.options);
  let stack = [{ level: -1, ul: rootUl }];

  options.forEach(option => {
    const text = option.textContent.trim();
    const value = option.value;
    const isSelected = option.selected; // Check if this is the active category
    
    // Skip "All" or placeholders
    if (value.endsWith('/shop') || text.toLowerCase() === 'all') return;

    // Depth detection via   (2 per level)
    const rawText = option.innerHTML;
    const nbspCount = (rawText.match(/ /g) || []).length;
    const currentLevel = Math.floor(nbspCount / 2);

    const li = document.createElement('li');
    li.className = 'category-item';
    
    const a = document.createElement('a');
    a.href = value;
    
    // Build class string: root status + active status
    let classList = ['category-link'];
    if (currentLevel === 0) classList.push('root');
    if (isSelected) classList.push('active');
    
    a.className = classList.join(' ');
    a.textContent = text;
    li.appendChild(a);

    // Maintain nesting stack
    while (stack.length > 1 && stack[stack.length - 1].level >= currentLevel) {
      stack.pop();
    }

    stack[stack.length - 1].ul.appendChild(li);

    // Look ahead for children
    const nextOption = option.nextElementSibling;
    if (nextOption) {
      const nextNbsp = (nextOption.innerHTML.match(/ /g) || []).length;
      if (Math.floor(nextNbsp / 2) > currentLevel) {
        const subUl = document.createElement('ul');
        li.appendChild(subUl);
        stack.push({ level: currentLevel, ul: subUl });
      }
    }
  });

  // 4. Inject into DOM
  targetContainer.appendChild(treeWrapper);
  
})();
</script>
<!-- /sqs:beyondspace-filter-dropdown-conver -->
```

### Need a Hand?

I know that every Squarespace site is a little different. If you’ve customized your CSS or are using a unique template and the snippet isn't lining up perfectly, I’m here to help.

**Is the new Filter Beta causing other design headaches for your shop?** Just hit reply and let me know.

If you'd rather have me handle the implementation for you and ensure your shop is 100% optimized before the official rollout, I offer **1-1 sessions** to get your site exactly where it needs to be.

Beyondspace 

As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement.

https://beyondspace.studio

Précédent

Précédent

## How long it takes for a stranger to buy?

Suivant

Suivant

## Beyondspace January 2026 Products Updates