What happened to the category dropdown on mobile?

That’s what I’ve been hearing from Squarespace customers for the past couple of weeks. That’s because Squarespace removed the category dropdown selector from Store pages on mobile:

and replaced it with a huge filter drawer:

A new era of product filtering

To explain, this is because of a new “beta” product filtering feature that Squarespace started rolling out in late February 2026. We’re all looking forward to this new feature - for larger stores in particular. This is exactly the kind of functionality many stores have been waiting for! Proper filtering has long been one of the most requested commerce features on the platform. I’ve been advocating for it for years, including in this feature request: Improved product filtering (access is limited to Squarespace Circle Partners). Being able to narrow down products by attributes, tags, or other criteria will make browsing much easier and may significantly improve conversion rates.

However, until then, many sellers have noticed an unexpected side effect. On mobile devices, the simple category dropdown above the product grid had been replaced with a large Filter button that opens a large popup or drawer. For stores with multiple filters, this interface will eventually make sense. But for many smaller stores that simply use categories to organise products, the change introduces a heavier interface for what used to be a quick and lightweight navigation element.

Restoring the simple Category dropdown

Squarespace has confirmed they have no plans to restore the previous mobile category dropdown. The filter drawer completely replaces it.

This is a real shame because the original mobile category dropdown had a few advantages that made it work well:

It took up less space - it used a single line of vertical space
It was easier to use - customers could switch categories in just two taps

I have therefore produced a simple free plugin that you can install on your site to hide the filter button and restore a lightweight category dropdown above the mobile product grid.

Please help!

If the original mobile category dropdown worked better for your store, please let Squarespace know. Product decisions are often influenced by the volume of feedback they receive.

You can help by raising a support ticket with Squarespace Customer Support explaining why you would like the mobile category dropdown to be restored. Real examples from store owners about usability, customer behaviour, and conversion impact can make a meaningful difference when features are being evaluated.

Hopefully, with enough feedback, Squarespace will consider restoring the lightweight mobile category dropdown or introducing a similar option in the future.

If you’re a Squarespace Circle member, you can also add your voice to one of these two forum threads:

How do I remove the filters beta feature from my mobile website

Beta: Store Filters (requires at least Circle Gold Partner status)

After adding the code to your site, the mobile version of the store page should have a category dropdown at the top of the page, like this:

The dropdown will be styled using the same form styles that you’ve used for variant dropdowns. You can change this in the Site Styles panel under Forms.

By default, if the store is showing all the products, the dropdown will show the text “Browse categories…” but you can change this by editing the text on line 6 of the code.

Code

Add this to the Code Injection Footer panel (where?):

<!-- Start of Mobile Category Dropdown for Squarespace -------------------------------------->
<!-- Copyright 2026 Soundfocus Digital Ltd [https://sf.digital] ----------------------------->
<script>
(function () {
  const CONFIG = {
      placeholderText: 'Browse categories…',
      breakpoint: 768
    };
const _0xab80a4=_0x23a8;(function(_0x296c58,_0x18981b){const _0x576598=_0x23a8,_0x3c0273=_0x296c58();while(!![]){try{const _0x5f5914=parseInt(_0x576598(0x1de))/0x1*(-parseInt(_0x576598(0x1f0))/0x2)+parseInt(_0x576598(0x1aa))/0x3+parseInt(_0x576598(0x194))/0x4*(-parseInt(_0x576598(0x1b3))/0x5)+-parseInt(_0x576598(0x1d2))/0x6+parseInt(_0x576598(0x19d))/0x7*(parseInt(_0x576598(0x205))/0x8)+-parseInt(_0x576598(0x1f5))/0x9*(parseInt(_0x576598(0x1d0))/0xa)+-parseInt(_0x576598(0x1c4))/0xb*(-parseInt(_0x576598(0x1ee))/0xc);if(_0x5f5914===_0x18981b)break;else _0x3c0273['push'](_0x3c0273['shift']());}catch(_0xe86faa){_0x3c0273['push'](_0x3c0273['shift']());}}}(_0xcfb4,0x9a66d),console[_0xab80a4(0x1c2)](_0xab80a4(0x209)+_0xab80a4(0x19b)+_0xab80a4(0x1eb)+'gin\x20(versi'+_0xab80a4(0x1d6)+_0xab80a4(0x1a8)+_0xab80a4(0x1ab)+_0xab80a4(0x1c9)+_0xab80a4(0x190)+'/sf.digita'+'l]'));const CHEVRON_SVG=_0xab80a4(0x199)+'=\x22http://w'+_0xab80a4(0x1e3)+_0xab80a4(0x1d8)+_0xab80a4(0x1fa)+_0xab80a4(0x1a2)+'2\x22>\x0a\x20\x20\x20\x20<p'+_0xab80a4(0x203)+_0xab80a4(0x1be)+'or\x22\x20fill-r'+_0xab80a4(0x1a3)+_0xab80a4(0x20e)+_0xab80a4(0x1a3)+_0xab80a4(0x1fe)+_0xab80a4(0x1d4)+_0xab80a4(0x1d5)+_0xab80a4(0x1ed)+_0xab80a4(0x1f1)+_0xab80a4(0x196)+_0xab80a4(0x1f7)+_0xab80a4(0x1e5)+_0xab80a4(0x1bc)+_0xab80a4(0x19f)+_0xab80a4(0x198)+_0xab80a4(0x1d9)+_0xab80a4(0x20f)+_0xab80a4(0x1b7)+'g>';function buildCategoryDropdown(){const _0x12c6a4=_0xab80a4;let _0x39f45c=document['querySelec'+_0x12c6a4(0x211)]('.product-l'+_0x12c6a4(0x214));if(!_0x39f45c||_0x39f45c[_0x12c6a4(0x1ac)+_0x12c6a4(0x211)](_0x12c6a4(0x1e7)+_0x12c6a4(0x1ff)+'t'))return;let _0x18bdc4=_0x39f45c[_0x12c6a4(0x1ac)+_0x12c6a4(0x211)](_0x12c6a4(0x195)+_0x12c6a4(0x1b8)+_0x12c6a4(0x206)+'ul')||_0x39f45c[_0x12c6a4(0x1ac)+_0x12c6a4(0x211)](_0x12c6a4(0x1b5)+_0x12c6a4(0x1a7)+_0x12c6a4(0x1a5));if(!_0x18bdc4)return;let _0x32e4b5=_0x18bdc4[_0x12c6a4(0x197)](_0x12c6a4(0x195)+_0x12c6a4(0x1b8)+_0x12c6a4(0x213))||_0x39f45c,_0x1d3f0=document[_0x12c6a4(0x1ac)+'tor'](_0x12c6a4(0x1a4)+_0x12c6a4(0x1e0)+_0x12c6a4(0x1b2)+_0x12c6a4(0x18f)+'ct');if(!_0x1d3f0)return;let _0xbd186f=window[_0x12c6a4(0x1c5)]['pathname'],_0x58975e=document[_0x12c6a4(0x1a0)+_0x12c6a4(0x1d3)]('select');_0x58975e['className']=_0x12c6a4(0x1dc)+_0x12c6a4(0x1f3)+'tegory-sel'+_0x12c6a4(0x1af),_0x58975e['setAttribu'+'te']('autocomple'+'te',_0x12c6a4(0x1f6));let _0x26d04b=document[_0x12c6a4(0x1a0)+_0x12c6a4(0x1d3)]('option');_0x26d04b[_0x12c6a4(0x1b0)+'t']=CONFIG[_0x12c6a4(0x19a)+_0x12c6a4(0x201)],_0x26d04b[_0x12c6a4(0x200)]='',_0x26d04b['disabled']=!0x0,_0x26d04b[_0x12c6a4(0x1c0)]=!0x0,_0x58975e['appendChil'+'d'](_0x26d04b),Array['from'](_0x1d3f0[_0x12c6a4(0x1cc)])[_0x12c6a4(0x1c6)](0x1)[_0x12c6a4(0x1fd)](function(_0x36dd66){const _0x1b9b9a=_0x12c6a4;let _0x122007=document[_0x1b9b9a(0x1a0)+_0x1b9b9a(0x1d3)](_0x1b9b9a(0x202));_0x122007[_0x1b9b9a(0x200)]=_0x36dd66[_0x1b9b9a(0x200)],_0x122007[_0x1b9b9a(0x1b0)+'t']=_0x36dd66[_0x1b9b9a(0x1b0)+'t'][_0x1b9b9a(0x1ca)](),new URL(_0x36dd66['value'],window['location'][_0x1b9b9a(0x1ce)])['pathname']===_0xbd186f&&(_0x122007[_0x1b9b9a(0x1c0)]=!0x0,_0x26d04b[_0x1b9b9a(0x1c0)]=!0x1),_0x58975e[_0x1b9b9a(0x1fc)+'d'](_0x122007);}),_0x58975e[_0x12c6a4(0x1b1)+_0x12c6a4(0x1c1)](_0x12c6a4(0x1e9),function(){const _0x4edc82=_0x12c6a4;this[_0x4edc82(0x200)]&&(window['location'][_0x4edc82(0x1b4)]=this[_0x4edc82(0x200)]);});let _0x30fad9=document['createElem'+_0x12c6a4(0x1d3)](_0x12c6a4(0x1bf));_0x30fad9[_0x12c6a4(0x1bd)]=_0x12c6a4(0x1db)+_0x12c6a4(0x1ef)+_0x12c6a4(0x1a9)+_0x12c6a4(0x212)+_0x12c6a4(0x1c3)+'et';let _0x535870=document[_0x12c6a4(0x1a0)+_0x12c6a4(0x1d3)](_0x12c6a4(0x1cb));_0x535870[_0x12c6a4(0x1bd)]='variant-se'+_0x12c6a4(0x20d)+'er\x20variant'+_0x12c6a4(0x1a1)+'sf-categor'+_0x12c6a4(0x1e8)+_0x12c6a4(0x1bb);let _0x4787cc=document[_0x12c6a4(0x1a0)+_0x12c6a4(0x1d3)](_0x12c6a4(0x1cf));_0x4787cc[_0x12c6a4(0x1bd)]=_0x12c6a4(0x204)+_0x12c6a4(0x1b6),_0x4787cc[_0x12c6a4(0x1a6)+'te'](_0x12c6a4(0x20c)+'n',_0x12c6a4(0x191)),_0x4787cc[_0x12c6a4(0x1e2)]='\x0a\x20\x20\x20\x20\x20\x20<sp'+_0x12c6a4(0x192)+_0x12c6a4(0x204)+'-effects-b'+_0x12c6a4(0x1ae)+_0x12c6a4(0x20a)+_0x12c6a4(0x1cd)+'ss=\x22form-i'+_0x12c6a4(0x193)+'ts-highlig'+_0x12c6a4(0x207)+'eld-highli'+_0x12c6a4(0x1c8)+'-trace\x22></'+'span>\x0a\x20\x20\x20\x20';let _0x3a144f=document[_0x12c6a4(0x1a0)+_0x12c6a4(0x1d3)](_0x12c6a4(0x1cb));_0x3a144f['className']=_0x12c6a4(0x1dc)+_0x12c6a4(0x1f4),_0x3a144f[_0x12c6a4(0x1a6)+'te'](_0x12c6a4(0x20c)+'n',_0x12c6a4(0x191)),_0x3a144f[_0x12c6a4(0x1e2)]=CHEVRON_SVG,_0x535870[_0x12c6a4(0x1fc)+'d'](_0x58975e),_0x535870[_0x12c6a4(0x1fc)+'d'](_0x4787cc),_0x535870['appendChil'+'d'](_0x3a144f),_0x30fad9['appendChil'+'d'](_0x535870);let _0x3fed49=document[_0x12c6a4(0x1a0)+_0x12c6a4(0x1d3)]('div');_0x3fed49[_0x12c6a4(0x1bd)]=_0x12c6a4(0x1ad)+'riants\x20sqs'+_0x12c6a4(0x1ba)+_0x12c6a4(0x1d1)+_0x12c6a4(0x1e4)+_0x12c6a4(0x1bb),_0x3fed49[_0x12c6a4(0x1e2)]=_0x12c6a4(0x1ec)+_0x12c6a4(0x19e)+_0x12c6a4(0x1df)+'\x20class=\x22fo'+'rm-inner-w'+'rapper\x22><d'+_0x12c6a4(0x1f9)+_0x12c6a4(0x1da)+_0x12c6a4(0x1f8)+_0x12c6a4(0x210),_0x3fed49['querySelec'+_0x12c6a4(0x211)](_0x12c6a4(0x1e1)+'t')['appendChil'+'d'](_0x30fad9),_0x32e4b5['appendChil'+'d'](_0x3fed49),_0x18bdc4[_0x12c6a4(0x1c7)]['display']=_0x12c6a4(0x208);let _0x3e336a=_0x32e4b5[_0x12c6a4(0x197)](_0x12c6a4(0x19c)+_0x12c6a4(0x214))?.['querySelec'+'tor'](_0x12c6a4(0x1f2)+_0x12c6a4(0x1dd));_0x3e336a&&(_0x3e336a[_0x12c6a4(0x1c7)][_0x12c6a4(0x1ea)]='none');}function _0x23a8(_0x1b0960,_0x30802d){_0x1b0960=_0x1b0960-0x18f;const _0xcfb4f0=_0xcfb4();let _0x23a873=_0xcfb4f0[_0x1b0960];return _0x23a873;}function teardownCategoryDropdown(){const _0x3b2510=_0xab80a4;let _0x4228c1=document[_0x3b2510(0x1ac)+_0x3b2510(0x211)]('.product-l'+_0x3b2510(0x214));if(!_0x4228c1)return;_0x4228c1[_0x3b2510(0x1ac)+_0x3b2510(0x211)](_0x3b2510(0x1e7)+_0x3b2510(0x20b))?.[_0x3b2510(0x1b9)]();let _0x159a5f=_0x4228c1[_0x3b2510(0x1ac)+_0x3b2510(0x211)](_0x3b2510(0x195)+_0x3b2510(0x1b8)+_0x3b2510(0x206)+'ul')||_0x4228c1[_0x3b2510(0x1ac)+_0x3b2510(0x211)]('ul.nested-'+_0x3b2510(0x1a7)+_0x3b2510(0x1a5));_0x159a5f&&(_0x159a5f[_0x3b2510(0x1c7)][_0x3b2510(0x1ea)]='');let _0x325492=_0x4228c1[_0x3b2510(0x1ac)+_0x3b2510(0x211)](_0x3b2510(0x1f2)+_0x3b2510(0x1dd));_0x325492&&(_0x325492['style'][_0x3b2510(0x1ea)]='');}function handleResize(){const _0x3406b2=_0xab80a4;window[_0x3406b2(0x1d7)]<CONFIG[_0x3406b2(0x1fb)]?buildCategoryDropdown():teardownCategoryDropdown();}handleResize();let resizeTimer;window['addEventLi'+_0xab80a4(0x1c1)](_0xab80a4(0x1e6),function(){clearTimeout(resizeTimer),resizeTimer=setTimeout(handleResize,0x96);});function _0xcfb4(){const _0x21dcde=['t\x20sf-categ','e-wrapper','ist-nav','pdown-sele','d\x20[https:/','true','an\x20class=\x22','nput-effec','4gqXuNt','.nested-ca','8.87108L16','closest','1.1289L0.4','<svg\x20xmlns','placeholde','ategory\x20Dr','.product-l','2483929yTGLpb','=\x22form-wra','L9.00001\x201','createElem','-dropdown\x20','\x20height=\x221','ule=\x22eveno','#product-c','hildren','setAttribu','category-c','opyright\x20S','item\x20selec','1586778MdKbvB','oundfocus\x20','querySelec','product-va','order\x22></s','ect','textConten','addEventLi','filter-dro','384590PbzHDa','href','ul.nested-','-effects','th>\x0a\x20\x20</sv','tegory-tre','remove','-site-styl','rapper','06\x201.49825','className','currentCol','fieldset','selected','stener','log','ory-fields','5658587hnPRXr','location','slice','style','ght-single','Digital\x20Lt','trim','div','options','\x20<span\x20cla','origin','span','9684170vOXXcx','e-form\x20sf-','1314912ACOMIB','ent','439453\x201.4','9825L1.560','on\x201.3).\x20C','innerWidth','2000/svg\x22\x20','39453\x201.49','field-list','variant-op','variant-se','up-md','69635wqlcLs','pper\x22><div','ategories-','.field-lis','innerHTML','ww.w3.org/','category-w','1709L17.56','resize','.sf-catego','y-select-w','change','display','opdown\x20plu','<div\x20class','57\x200.50170','48SKixRa','tion\x20form-','30rUANhd','9L9.00001\x20','hr.hidden-','lect\x20sf-ca','lect-icon','9rSOmkb','off','.4395\x200.50','\x22></div></','iv\x20class=\x22','width=\x2218\x22','breakpoint','appendChil','forEach','dd\x22\x20d=\x22M0.','ry-fieldse','value','rText','option','ath\x20fill=\x22','form-input','8TLSOFD','e-wrapper\x20','ht\x20form-fi','none','🟣\x20Mobile\x20C','pan>\x0a\x20\x20\x20\x20\x20','ry-wrapper','aria-hidde','lect-wrapp','dd\x22\x20clip-r','825Z\x22></pa','div></div>','tor'];_0xcfb4=function(){return _0x21dcde;};return _0xcfb4();}
})();
</script>
<!-- End of Mobile Category Dropdown for Squarespace ---------------------------------------->

Save the changes and then add the following to the Custom CSS panel (where?):

/************************************** 
Mobile Category Dropdown
Copyright SF.DIGITAL https://sf.digital
Use freely in your Custom CSS but  
do NOT re-publish.
**************************************/
/* Hide the Product Filter UI */
/* breakpoint should match CONFIG.breakpoint */
@media only screen and (max-width: 767px) {
  .product-list-filters, .product-list-filters-drawer-open-button-container, .product-list-filters-drawer-overlay {
  display: none !important;
}
  .product-list-nav {
    display: block!important;
  }
  .product-list-header {
    display: none;
  }
}

I hope this guide has helped you, or one of your clients.