u/liamoxoart

I made a simple custom CSS snippet that hides the default Squarespace shop products and category navigation on a specific Squarespace store page.

The reason someone might want to do this is because Squarespace store pages can feel very limited when it comes to layout control. The built-in product grid works, but you are mostly stuck with Squarespace’s default way of displaying products, categories, spacing, and structure.

By hiding the automatic product grid, you can still keep your products active in the background, but manually build your own shop layout underneath the page header using normal Squarespace sections.

This gives you a lot more freedom to create a shop page that feels more custom, branded, and organised.

For example, you could manually create:

• Featured product sections
• Custom product cards
• Product collection areas
• Category-style sections
• Better image layouts
• More detailed product descriptions
• Buttons linking directly to each product
• A cleaner and more premium shop design
• A layout that works better for your own brand or store

This can be really useful for print shops, creative stores, portfolio-style shops, small product collections, or anyone who wants their Squarespace shop page to feel less restricted by the default template.

Here is the CSS:

/* Hide default Squarespace shop products and categories on the Shop page only */
body.collection-INSERT-YOUR-SHOP-ID-HERE .ProductList,
body.collection-INSERT-YOUR-SHOP-ID-HERE .product-list,
body.collection-INSERT-YOUR-SHOP-ID-HERE .products,
body.collection-INSERT-YOUR-SHOP-ID-HERE .collection-content-wrapper,
body.collection-INSERT-YOUR-SHOP-ID-HERE .product-list-grid,
body.collection-INSERT-YOUR-SHOP-ID-HERE .ProductList-grid,
body.collection-INSERT-YOUR-SHOP-ID-HERE .category-nav,
body.collection-INSERT-YOUR-SHOP-ID-HERE .products-category-nav,
body.collection-INSERT-YOUR-SHOP-ID-HERE .ProductList-filter,
body.collection-INSERT-YOUR-SHOP-ID-HERE .ProductList-filter-list {
  display: none !important;
}

Just replace:

INSERT-YOUR-SHOP-ID-HERE

with your own Squarespace shop collection ID.

For example, your body class might look something like this:

body.collection-6a039185e39dyd12fabda26f

In that case, you would only copy the ID part:

6a039185e39dyd12fabda26f

and replace INSERT-YOUR-SHOP-ID-HERE with it.

Once added, the default product grid and category navigation should be hidden on that specific shop page only, while leaving the rest of your website untouched.

You can then manually design your shop page using sections, images, text blocks, buttons, and links to your individual products.

I’d definitely recommend testing it on desktop and mobile before leaving it live, and making sure all your product buttons, checkout links, and navigation still work properly.

For me, this is a nice way to keep the functionality of Squarespace ecommerce while having more creative control over how the shop page actually looks.

If you’re using Squarespace for a UK based shop, you might have noticed that some of the default wording feels a bit American.

One example is “Shopping Cart” and “Add To Cart”.

In the UK, “basket” feels much more natural for online shopping, so I made a simple CSS snippet that changes the wording across my Squarespace shop.

This changes:

“Shopping Cart” to “Shopping Basket”
“Add To Cart” to “Add To Basket”

Here is the CSS I used:

/* Change cart page heading from Shopping Cart to Shopping Basket */
.cart-title {
  font-size: 0 !important;
  line-height: 1.2 !important;
}

.cart-title::after {
  content: "Shopping Basket";
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
  display: inline-block;
}

/* Change product buttons from Add To Cart to Add To Basket */
.sqs-add-to-cart-button .sqs-add-to-cart-button-inner {
  font-size: 0 !important;
}

.sqs-add-to-cart-button .sqs-add-to-cart-button-inner::after {
  content: "Add To Basket";
  font-size: 15px !important;
  line-height: normal !important;
}

I added this into the Custom CSS section in Squarespace and it worked nicely on my site.

All you need to do to use my code is copy the CSS above, go to your Squarespace website, search “CSS”, then click “Custom CSS”, paste the code in, and save it.

Once saved, your Squarespace shop should change “Shopping Cart” to “Shopping Basket” and “Add To Cart” to “Add To Basket”.

Just thought I’d share it here in case anyone else in the UK wants their Squarespace shop wording to feel a bit more British and more natural for their customers

Hope this helps someone!

Hi guys,

I’ve wanted to add rounded corners to my Squarespace gallery images for a long time, but I also wanted the same rounded corner effect to show when the images are opened in the lightbox.

After some trial and error, I finally managed to get it working for both the gallery images and the lightbox view, including a mobile fix so the images stay centred and do not crop awkwardly on smaller screens.

So, if you want to round the corners of your Squarespace gallery images and lightbox too, you can now do it with this CSS code I’ve created.

To use this code:

1. Go to your Squarespace website editor.
2. Open your Custom CSS area.
3. Paste the code below into your Custom CSS box.
4. Save the changes.
5. Refresh your website and check your gallery images on desktop and mobile.
6. Open the images in the lightbox to make sure the rounded corners are showing properly there too.

You can change the 15px value if you want the corners to be more or less rounded. A smaller number gives a sharper corner, while a larger number gives a softer/more rounded look.

Here is the CSS:

/* Rounded corners for Squarespace gallery images */
.gallery-grid-item-wrapper,
.gallery-masonry-item-wrapper,
.gallery-strips-item-wrapper {
  overflow: hidden;
  border-radius: 15px;
}

.gallery-grid-item-wrapper img,
.gallery-masonry-item-wrapper img,
.gallery-strips-item-wrapper img {
  border-radius: 15px;
}

/* 1. Desktop & Universal Lightbox Rules */
.gallery-lightbox-item img {
  box-sizing: border-box !important;
  border-radius: 15px !important;
  
  /* Centers and scales the image seamlessly on desktop */
  width: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* 2. Responsive Mobile Fix (Overrides the math so images do not crop) */
u/media screen and (max-width: 767px) {
  .gallery-lightbox-item img {
    /* Lets the image scale naturally to full mobile screen width */
    width: 100% ! important;
    height: auto ! important;
    
    /* Keeps the image perfectly centered without stretching */
    object-fit: contain !important;
    position: absolute ! important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

A small note: this worked for my Squarespace gallery setup, but different templates, gallery layouts or site versions may behave slightly differently. I’d recommend testing it on both desktop and mobile after adding it.

Hope this helps anyone trying to make their Squarespace galleries and lightbox images look a bit cleaner and more polished!