How to Hide a Product from the Store Page in Squarespace 7.1

Jun 29

Want to create a hidden product that doesn’t show up in your storefront but is still accessible through a direct link? Whether you're running a private promotion, a VIP-only offer, or an exclusive affiliate campaign, Squarespace offers flexible solutions, even without a native visibility toggle.

This guide will show you two proven methods to hide products from your store grid while keeping the product page live and fully functional.

You need a way to:

Exclude a product from your store's public listing
Keep the product page live and accessible via direct URL
Allow purchases through private or email-based promotions

What Squarespace Lacks

Squarespace doesn’t include a “hide product” feature.
But you can achieve the same result using:

Method 1: Category-based filtering (Best practice)

Method 2: Custom CSS to hide the product manually (Quick workaround)

Method 1: Use Categories to Filter Hidden Products (Recommended)

How It Works:

Assign a Unique Category

Go to the product’s settings.
Add a category like Hidden, Private, or VIP.

Filter Your Store Page

Edit your Store Section → Product Filter
Choose to display only products not in the Hidden category

✔ The product disappears from the store
✔ The direct product link remains active
✔ Customers can still access and purchase the product if they have the URL

Method 2: Hide Products Using Custom CSS (Quick Manual Method)

When you need to hide specific products visually without setting up filters, CSS works great.

How to Do It:

Identify the Product Index Class

Go to your live Store Page
Right-click the product → Inspect Element
Look for a class like .article-index-2, .article-index-3, etc.

Add the CSS Code

Paste the following into Pages → Custom code → Custom CSS


/**** Hide Specific Product from Store Page ****/
/* Find the product number of the product you want to hide 
   and place that number in the (.article-index) class below.
   Example: .article-index-2, .article-index-3, etc. */
.products .grid-item.article-index-2 {
  display: none !important;
}

✔ The product is hidden from the store page
✔ The product URL remains functional and can be shared or promoted

Best Use Cases

Exclusive VIP offers
Influencer-only product pages
Seasonal or limited-time hidden products
Pre-launch product testing
Email-only private sales

Summary

  
        Feature
        Category Filtering
        Custom CSS
      
        Clean, scalable method
        ✅
        ❌ (Manual only)
      
        Easy to manage in bulk
        ✅
        ❌
      
        URL stays active
        ✅
        ✅
      
        Ideal for one-off hiding
        ❌
        ✅

Final Thoughts

Squarespace does not natively have a "hide product" button; however, there are some good workarounds! For the vast majority of us, category blocking is a clean and future-proof proposition. For one-off case scenarios, the custom CSS is quick and easy.

Frequently Asked Questions (FAQ)

1. Can I remove a product from my Squarespace store without deleting it?

Yes! Squarespace does not have a “hide” toggle, but you can hide products using category filtering (suggested) or custom CSS. Either way, you get to keep the product live and for purchase via a direct link.

2. Will hidden items be indexed by Google/searchable?

Yes. Disabling a product from the storefront will not make it invisible to search engines. “If you want something to be private from even Google, utilize SEO settings (like noindex) or a password,” he said.

3. What is the best way to hide multiple products at once?

Use category filtering. Tag each product with a category such as “Hidden.” You can filter your Store Section to only show products that are not in that category. It is scalable and manageable.

4. Could people still buy the secret product?

Absolutely. They are a product with a functional product page that can be added to the cart, jump to a direct link, and can be checked out like any other product, as long as they have direct access to this page.

5. Is it safe to use custom CSS to hide a product?

Yes — for fast, one-time disappearing acts. But it’s manual and not great for ongoing maintenance of long lists of products. Plus, invisibles may show up momentarily as the page loads when the CSS hasn’t yet rendered.

6. How do I find the .article-index number for a specific product?
On your live store page, right-click the product → click Inspect Element. Look for a class like .article-index-2 attached to the product's grid container. Use that number in your CSS rule.

7. Can I have a hidden product that can be scheduled to appear on a later date?

Product visibility scheduling is not supported by Squarespace. Then you need to manually delete the “Hidden” category or the CSS rule when you’re ready to show the product.