Better Way to Rearrange Items on Website?

[ShopGirlNY152]

Can anyone help me figure out how to quickly and easily rearrange the items on my website? Is it possible to arrange them in a custom format without leaving the online editor?

Currently I take the following steps: While in the website editor, I click on an individual category page. I choose "Item List". From there I choose "Arrange Items". I want a custom arrangement, so under "Arrangement", I choose "Custom". Unless I am missing something... I then have to leave my online editor by clicking the button called "Arrange Items". This takes me back to my regular Square dashboard and my category page where there is a long list (without pictures or stock quantities) of the items in that category. On that page, I have to slowly drag and arrange all 100+ items in the category. I can't see any pictures of them. I can't see how they look on the website page. In order to see the results of my rearranging, I have set them in the order I want, then go back to the website and preview to see how they look, then repeat the process over and over until I get the arrangement right. Please, please, please, someone tell me there is a better way! I have never seen a website editor where you can't just move the items around on the page while looking at them. 

The reason I want a custom arrangement is that I want to be able to move the out of stock items to the bottom of the page. I don't want to remove them from the page-- I want people to see what we have and what might be restocked soon. I don't want to do "newest" or "price high to low" or "popularity"... those will inevitably show out of stock items at the top of the page. I also like to put items in an order that makes sense for my customer, sometimes grouping like items on the same row. Basically, I just want more control over the way items are arranged and that seems like it should be a basic function. I used the online editor years ago and it was possible to move the items around while looking at the website editor.

Is this no longer possible? Please tell me how to arrange the items in a custom way while still in the website editor. And if this is not possible, can someone please tell me the most efficient way to do it. Thank you!

[Summer2024 · Accepted solution]

Hi, @ShopGirlNY152 ! 👋😊

It is not currently possible to rearrange items directly within the website editor while viewing them visually. The method you're using, where clicking "Arrange Items" takes you out of the editor and into the Square Dashboard, is the intended behavior at this time. While that setup technically works, it's not very user friendly, especially for Sellers with large item catalogs. 

The reason this happens is that Square Online’s website editor separates the visual builder from the item catalog manager, so the arrangement must be done in the backend category tool, which doesn’t support image previews or live updates. Sadly, there’s no toggle or hidden feature that brings this capability back into the live site editor. It’s just not currently supported.

That said, there are a few tips to make the process more manageable. First, try using split screen so when you open your Square Dashboard’s “Arrange Items” tool in one window, you can have your site’s live preview or editor in the other. This allows you to see your items visually while reordering them on the backend, reducing the need to constantly switch tabs. Another helpful trick is to temporarily rename items with numbers or grouping tags (like “01-”, “02-” or “A1”, “B1”) so they’re easier to arrange logically in the backend list. You can remove those labels once the layout is finalized.

If your goal is to push out-of-stock items to the bottom, you’ll still need to do this manually. There’s no setting in Square Online to automatically sort by stock status. However, you could consider duplicating key items as new listings, which will sort to the top if sorted by “Newest” or highlight restock status in the item title or description to improve visibility without relying on sort order.

I feel like I just kept typing disappointing news in this response, so I'm sorry I'm probably not providing the answers you're wanting. 😅

Let me know if you have any questions. 

[ShopGirlNY152]

Wow, this is a very thorough and detailed answer. Thank you for letting me know what I'm trying to do is not possible-- this keeps me from continuing to try to figure it out! And thank you for your helpful suggestions for a workaround. After posting this question I did find that by clicking the three dots beside the item name (while in the rearrange category section) I can quickly move items all the way to the top or bottom. This is super helpful and keeps me from having to do the slow crawl with each item, moving it manually up or down. This has helped me quickly send my out of stock items to the bottom of the page without having to remove them from the site. 

Re: the split screen... it seems like I have to do the rearranging, hit done, then hit save before I can see those changes take effect. Is there a trick to being able to see the items as they are moved instead of having to save to see it in the preview? Thanks so much for your help!

[Summer2024]

I'm so glad your reaction to my response was a positive one! I felt so bad typing everything that just seemed like disappointment after disappointment LOL 

You have to save before you can see changes take effect, unfortunately. 

[JKO]

It really is a shame there isn't a way to push out of stock items to the bottom automatically--or better yet, Square should allow you to toggle between showing out-of-stock items or not when you are rearranging items within a category! Also a shame that new items don't automatically post to the top of a category. All in all, this component of site management leaves a LOT to be desired!