Jump to content

Alphabetically sorting products in product pages

Recommended Posts

It's unbelievable how a simple feature such as automatic product sorting is missing in the Advanced Commerce plan. If a product page can hold up to 10,000 products, how are we supposed to get our products sorted alphabetically without wasting hours dragging products to the right places?!?!?!? I have a product page with 153 products. I added 30 products to it and they all got dumped towards the end of the list. I just wasted half an hour trying to drag each to the right place so they'd be alphabetical BUT the products are not getting put on the right place! Even products I wasn't dragging get moved in the list. The only thing that works is Move to Top and Move to Bottom. But when you try to drag a product, it just jumps all over the place. I am so frustrated that there is no automatic sorting. This is such a basic feature when you are dealing with hundreds of products and yet it is nowhere to be found in the product pages!

Is there a script that can be injected in the product pages that would automatically sort products alphabetically?

Link to comment
  • 1 month later...
  • 4 months later...


I have the same issue. My inventory is not sorted alphabetically, but on the Store page I've created I would like the products to appear sorted alphabetically.

Do I really need to use drag and drop for each product to do this on the page (or buy an expensive plugin)?

I've looked everywhere I can think of and can't see how to do it otherwise.



Link to comment

Yes, you will have to drag and drop each product if you want them to appear alphabetically...that or buy an expensive plugin. Honestly, it's ridiculous for Squarespace to not have this sorting functionality when each shop page can now hold up to 10,000 products. I mean what half-twit coder leaves out an important function like that?!?!?!?!

Link to comment
  • 2 years later...

In case there are people seeking help with this for 7.1 (as I recently did but came up empty-handed), here is a JS code that can be inserted within the <head> tag (Settings > Developer Tools > Code Injection). 

  window.addEventListener('load', function() {
    var container = document.querySelector('.list-grid');
    var items = Array.from(container.getElementsByClassName('grid-item'));
    items.sort(function(a, b) {
      var titleA = a.querySelector('.grid-title').textContent.trim().toLowerCase();
      var titleB = b.querySelector('.grid-title').textContent.trim().toLowerCase();
      if (titleA < titleB) {
        return -1;
      if (titleA > titleB) {
        return 1;
      return 0;
    container.innerHTML = '';

    items.forEach(function(item) {


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.