u/liamoxoart

Hi everyone,

I’d really appreciate some honest feedback on my website:

https://www.liamoxo.art

The website is both my creative portfolio and an online shop where I sell premium wall art prints created from my photography and visual artwork. It showcases my work across photography, videography, graphic design, and wall art prints, with genres ranging from automotive and wildlife photography to landscapes and astronomy.

I’ve been rebuilding the website from the ground up and putting a lot of time into the overall design, user experience, layout, product pages, mobile responsiveness, branding, and SEO. Because I’ve spent so many hours looking at it, I feel like I’ve become a bit blind to things that might stand out to fresh visitors.

I’d love feedback on things such as:

• First impressions
• Overall design and branding
• Ease of navigation
• Mobile and desktop experience
• Portfolio presentation
• Shop experience and product pages
• Loading speed and performance
• Anything that feels confusing, unnecessary, unfinished, or could be improved

Please be as honest as possible. Positive feedback is appreciated, but I’m especially interested in hearing what could be improved or what might stop you from exploring further.

Thanks for taking the time to have a look 😁

Hi everyone,

I’d really appreciate some honest feedback on my website:

https://www.liamoxo.art

The website is both my creative portfolio and an online shop where I sell premium wall art prints created from my photography and visual artwork. It showcases my work across photography, videography, graphic design, and wall art prints, with genres ranging from automotive and wildlife photography to landscapes and astronomy.

I’ve been rebuilding the website from the ground up and putting a lot of time into the overall design, user experience, layout, product pages, mobile responsiveness, branding, and SEO. Because I’ve spent so many hours looking at it, I feel like I’ve become a bit blind to things that might stand out to fresh visitors.

I’d love feedback on things such as:

• First impressions
• Overall design and branding
• Ease of navigation
• Mobile and desktop experience
• Portfolio presentation
• Shop experience and product pages
• Loading speed and performance
• Anything that feels confusing, unnecessary, unfinished, or could be improved

Please be as honest as possible. Positive feedback is appreciated, but I’m especially interested in hearing what could be improved or what might stop you from exploring further.

Thanks for taking the time to have a look 😁

Hey everyone,

I thought I’d share a bit of CSS I’ve been working on for Squarespace product pages.

I have some products with longer individual descriptions, and I wanted the product image/gallery to stay visible while people scroll down and read through the product information. This makes the product page feel a bit cleaner and keeps the product visuals in view instead of disappearing as soon as the customer scrolls.

This code makes the product image gallery sticky on individual product pages, and it applies across all products individually. Basically in simpler terms, when you scroll down the product page, the product images follow you instead of disappearing off the screen.

It is especially useful if you have long product descriptions, detailed product information, sizing details, print information, FAQs, shipping notes, or anything else further down the product page.

Here's the CSS:

/* Sticky product image gallery on individual product pages */
 screen and (min-width: 900px) {

  .product-content-wrapper {
    overflow: visible !important;
    align-items: flex-start !important;
  }

  .product-gallery {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 110px !important;
    align-self: flex-start !important;
    height: fit-content !important;
    z-index: 20 !important;
  }
}

The min-width: 900px part keeps it desktop-focused, so it should not affect the mobile layout.

You can also adjust the top: 110px value depending on your site header height or how much spacing you want above the sticky product image.

Just thought this might help anyone else using Squarespace who wants their product pages to feel a bit more polished when they have longer descriptions 😄

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!