Seeking feedback on my very code customized client website.

Hello, I have a Squarespace website I designed and upkeep for a client (a barber) that I'm hoping to get some feedback on. The website is a Hair & Body Care storefront. Note the website name and branding is a little "bohemian", my client's clientele is mostly college students. Currently 99% of her sales are physical in-store, I'm hoping at some point her website catches on but SEO alone doesn't seem to be doing the job.  The problem isn't bounce rates, it's just nobody knows the website even exists. 😛 (I'm trying to encourage to her to pay for advertising on Google/etc. but we haven't go there yet).

I have customized this site heavily with JavaScript and CSS to get it to work in ways I prefer and improving UX where I thought it could be improved.

Some notable changes:

• Insta "Add To Cart" or "Buy Now" buttons on hover of product images (in most locations).
• On the product page, after clicking "Add To Cart" it then gives the option to "View Cart" or "Checkout Now".
• A really cool slider on the home page hero, that does some crafty code to get multiple sections to show as hero slides. Hero slide images are not loaded until the slide appears (so not to waste bandwidth).
• A nicer looking, more dynamic fixed header.
• Lots of custom CSS animations with specific timings.
• Automatic disabling of said custom CSS animations if the network speed is too slow (so the page shows faster). Also disable custom CSS animations if prefers-reduced-motion is enabled.
• Show scaled text objects instantly if the network speed is too slow. I think this should be a UX change made to base engine, because on slow network speeds the scaled text won't appear until the page has fully loaded -- or maybe it's based on DOM load -- but either-way on slow networks the user ends up staring at a blank screen waiting for text to appear if it's set to scaled.
• Custom nav menu drop downs.

Behind the scenes:

• Use vscode/vitejs/SASS/linters for development.
• Use AWS S3/Cloudfront for staging development assets modes for faster debugging/development.

Here is the website:

https://www.naughtytigerhaircare.com/

Things I'm still working on:

• Optimizing codebase.
• Improving page load speed and reduce thrashing.
• Bug fixes, cross-browser especially.

One problem I'm having regarding page load speeds is font files. I have two fonts on this site: Orpheus Pro and Poppins. Yet, for some reason there's a ton of font files being downloaded: https://i.imgur.com/prksP19.png

Font files are a big performance hit, so if there's a way to get that down to ideally two I'd love to know how.

Thanks for reading and any feedback!

- Michael

I'm not a web design expert but it looks really great to me! Very lively and fun. The only suggestions I have are a search capability when I go to all products, and also to have the product list that shows up on the page exactly match the drop-down list, I got a little confused.

Really nice overall ! The load times weren't bad for me on my computer.

Sorry for the late reply, thanks for your feedback! I agree on both fronts, and made the change to have the product categories exactly match the links in the drop down (styling, shower, etc.)

However, regarding "search capability", I actually have no idea how to enable a search box for the shop pages in Squarespace. I only know of the dedicated search page (naughtytigerhaircare.com/search), but that's not exactly useful on its own page. Do you know how to enable search on the shop pages?

On 9/3/2023 at 2:26 AM, velocd said:

Sorry for the late reply, thanks for your feedback! I agree on both fronts, and made the change to have the product categories exactly match the links in the drop down (styling, shower, etc.)

However, regarding "search capability", I actually have no idea how to enable a search box for the shop pages in Squarespace. I only know of the dedicated search page (naughtytigerhaircare.com/search), but that's not exactly useful on its own page. Do you know how to enable search on the shop pages?

SS has no search bar on Shop Page. Some ways to add this

(1) Add a Search Block to Footer then use code to move it to Shop Page

(2) Use Plugin to add Search & Filter feature

(3) Use a 3rd party custom search

What do you think? We can help easier

On 9/4/2023 at 12:54 AM, tuanphan said:

(1) Add a Search Block to Footer then use code to move it to Shop Page

I think I can make this solution work, thanks for the tip. A shame there's no native way to do it though. The shop could really use built-in filters/sorting and search like Shopify has.

Added a search filter to the /shop page, works pretty well I think!