Move Sold-Out Products to the Bottom of the Page in Squarespace
A No-Code Method Using Tags and Product List Blocks
If you have an online store on Squarespace 7.1, having a neat and conversion-optimized product layout is crucial. One of the most irritating aspects of this is that sold-out products are displayed intermingled with available ones, and, on top of that, they’re often the first products people see when browsing a collection, causing unnecessary disappointment and interrupting purchasing flows.
Although Squarespace lacks a native solution to automatically reorder products depending on their availability, it can be done by following a professional no-code hack using tags and Product List Blocks. In this tutorial, we’ll show you how to manually move “Sold” items to the bottom of your product page cleanly and easily.
Why Move Sold-Out Products?
Reordering your sold-out products improves:
User experience: First view of in-stock products.cgColor
Conversions: Customers are not distracted by out-of-stock items
Brand perception: Your store looks organized and intentional
Step-by-Step: Move Sold-Out Items to the Bottom Using Tags
Step 1: Tag All the Sold-Out Products
Go to Commerce → Inventory
Click on any item currently sold out
Scroll down to the Tags field
Add tag sold or soldout, out-of-stock
(Use a side-by-side comparison tag name consistently.)
Hit the save button, and do this process for every product you sold.
These tags won’t be visible to customers but are important for filtering.
Step 2: Create Two Product List Blocks
Now, edit the page where your products are displayed.
In Edit Mode, navigate to your Store or Products Page
Add your first Product List Block:
Title it: “Available Products”
Under Display, choose your store collection
Under Filter by Tag, leave it blank or exclude sold
Below that, add your second Product List Block:
Title it: “Sold Out Items”
Under Filter by Tag, enter the tag sold (or whatever tag you used)
This setup splits your inventory visually, showing available items at the top and sold-out items at the bottom.
Step 3: Style and Organize the Layout
To make your product page even more polished:
Use Section Headings like:
“Available Now”
“Sold Out — Display Only”
Adjust spacing and padding to differentiate the two blocks
Use subtle background color changes to separate available and sold items visually
Optional Enhancements
| Feature | How to Add It |
|---|---|
| “Sold Out” badge | Enable Inventory Display under product settings |
| Grayscale sold product images | Use CSS (optional – ask us if needed) |
| Hide pricing or purchase buttons | Disable checkout on sold items manually |
Final Thoughts
While Squarespace 7.1 doesn’t offer dynamic inventory-based sorting, this simple tag-based method gives you full visual control, no code, no plugins, and no third-party tools required. With just a bit of manual setup, your product page can clearly distinguish available stock from sold items, improving both design and user experience.
Frequently Asked Questions (FAQ)
Is there a way that I can set sold-out products to auto-drop to the bottom the page in Squarespace?
No, there isn’t an option for dynamic sorting by product availability with Squarespace. But with manual tagging on Product List Blocks, you can feature sold-out products as a separate section at the bottom of the page.
Will my product pages show the “sold” tag to customers?
Product tags in Squarespace are not used for product tagging. Tags like sold or soldout, or out-of-stock, will not be shown to customers until you want to show them using Block or using custom code.
Do I just have to do this for every page that will display products?
Yes. If you have several product display pages (category pages or sections of your home page), you’ll have to duplicate the two Product List Blocks (Available/Sold Out) and set the tag filter accordingly in both of them.
How can I fade or gray an image when its add to cart button is not available?
Yes, with some Custom CSS, you can add a greyscale filter to sold-out images in the Product List Block. This visually helps differentiate an item that has been sold. You can ask a developer or Squarespace support for assistance adding the precise CSS, if necessary.
How should we keep it updated as inventory changes?
Once a product has sold out, manually add the sold tag in the product settings in Commerce > Inventory. Just remove the tag if the product goes back in stock. This will help to keep the structure of your display blocks accurate and visually neat.
