Functionality & Clunkiness of Squarespace Store

Hey there! Here’s the link to my website: www.ergometric.co.uk

Thanks

1 Like

Hi @Paul_H :wave:

I’m not a techie at all, but your website looks really stylish. Impressive stuff!

Now, let’s wait for the feedback from @tuanphan

1 Like

Hi,
The site has some small problems, if you need to fix & can’t do this, just comment below, I will help you
#1. There is a gray bar under header, appears 2-3 seconds then disappear

#2. Huge space below Footer on mobile
image

#3. The store page on mobile looks long, you can consider changing to 2 columns on mobile. SS released this feature, so you can edit Store page > Click mobile icon > Then choose 2 in Columns option

#4. Do you need to show all category items, instead of showing scroll?
image

#5. (Mobile) Variant width is small on mobile

You can add this to Website > Website Tools > Custom CSS to fix problem

@media screen and (max-width:767px) {
.ProductItem-details .product-variants {
    width: 100% !important;
}
}

#6. (Mobile) text looks big
image
You can use this code to Custom CSS box to fix it

@media screen and (max-width:767px) {
h2.ProductItem-related-label {
    font-size: 30px;
}
}
1 Like

Hello, sorry for the long delay. I really appreciate your help and feedback.
#1 - I don’t see this issue, so i dont know how i can fix it
#2 - Cant find a way for all the elements with the footer to prevent stacking on top of each other with in mobile view
#3 Squarespace store template doesnt allow you to change it to just 2 collumns, but thats a great idea!
#4 Squarespace doesn’t allow you to hide the category items unfortunetly
#5 ive added the code to the CCS, many thanks, unsure if its worked though
#6 Ive dded this code too and this aprears to have worked, thank you.

Kind regards

-Paul

#1. #2. I see all are fixed itself
#3. SS just released an option to change 2 columns on mobile. Just edit shop page > then click Mobile icon on top right > You will see an option to set 2 columns.

#4. To show all category items, you can use this CSS code (Website Tools [under Not Linked]) > Custom CSS

@media screen and (max-width:767px) {
  ul.nested-category-children {
    flex-wrap: wrap !important;
}}