Jump to content

Stacking 7.1 Shop Filters on Mobile

Recommended Posts

Posted

I am using 7.1.

My shop doesn't have many products, but they are split over a few categories.

On the mobile or tablet styles, the shop filters are a slider. However there is no visual cue to the visitor to slide the text across. Also, on some tablets I have tested, trying to slide the filter text just changes forward and back in the browser.

Can anyone help teach how me to add code that simply stacks the filter text if the screen isn't wide enough to show it in full?

And/or to add some visual cue to the visitor to swipe to filter?

The page in question is:
https://www.simonocarrigan.com.au/shop

  • 11 months later...
Posted

 

On 1/23/2020 at 11:29 PM, SimonOCarrigan said:

I am using 7.1.

My shop doesn't have many products, but they are split over a few categories.

On the mobile or tablet styles, the shop filters are a slider. However there is no visual cue to the visitor to slide the text across. Also, on some tablets I have tested, trying to slide the filter text just changes forward and back in the browser.

Can anyone help teach how me to add code that simply stacks the filter text if the screen isn't wide enough to show it in full?

And/or to add some visual cue to the visitor to swipe to filter?

The page in question is:
https://www.simonocarrigan.com.au/shop

Hello, did you find a solution for this problem? I'm having the same issue.

Thanks

  • 2 months later...
Posted (edited)

Hey Simon - 

This is a major ux flaw and oversight. Really, it should be a clean, simple and intuitive dropdown like every other worthy ecommerce site out there. I'm hoping Squarespace addresses this sooner than later; The user currently has no cues that there are other "hidden" categories there. They don't know what they don't know, and that's not a good thing for sales conversion! 

To make the Product Detail page sub-nav more palatable for now, I ended up creating some custom CSS to get around (aka band-aid) the problem. My CSS centers, tightens up, and displays ALL visible product sub-categories.

I also disabled the sticky factor. This makes no sense to have it floating over an already busy and limited-sized viewport. If anything, SQS should just add a small sticky "back to top" arrow button in bottom right. Then again, they still haven't figured out how to slide up and down the page via anchor tags in 7.1. 😕

I do want to say that I love 7.1 for it's incredible potential. It's still early days with their ecomm platform. The latest update was a big leap forward. But, it still has a ways to go to really compete with the likes of Shopify. The reason I'm not Shopify is because it feels old, hard, and boxed-in. Too many options, loss of plug-in support, tired and inflexible templates, etc.

Squarespace sites are nimble by design and always evolving. They feel more 'alive.' Squarespace allows me way more flexibility to create unique and focused pages in any arrangement I choose with speed and relative ease vs Shopify's canned templates that are nice out of the gate but don't evolve well. Sites get tired fast. So it's all about flexibility, ease of use, and timing.

Give me curated best-of-breed 3rd party options (and enough of them), not every available option that I have to sift through and hope work out (Shopify). 

Squarespace, unlike Wix (or Shopify obvi), truly allows me to design and generate content at the speed of thought. Wix is ok for basic stuff. But it's nowhere near as 'deep' as Squarespace.

I'm ok with adding some custom CSS while waiting for SQS engineers to add more and better ecommerce features. Because each time they do, this platform shows it has the best of both worlds. Hence why I'm staying with it vs using a boxed-in 'Kitchen Sink' platforms like Shopify or 'more sizzle than steak' platforms like Wix.  Had to get that out. For the record I have zero affiliation with Squarespace. I just like the platform a lot. 🙂

Anyway, try pasting the CSS below into your custom CSS. It may be what you're looking for. NOTE: you may want to remove or disable certain styles depending on your layout. If nothing else, it gives you the idea of what can be done to improve the user experience a bit while Squarespace comes up with a way better solution than it has now. Hope it helps!

* ////// SHOP SUB-CAT NAV STYLES & MODS ////// */

/* On mobile, Style mobile Shop Page breadcrumb nav */
@media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-breadcrumb {
    text-transform: uppercase;
    opacity: 1;
    }
}
/* on mobile, hide product page "browsing..." header title */
@media screen and (max-width: 575px) {
#block-yui_3_17_2_1_1615177143698_1518 {
    display: none;
    visibility: hidden;
}}
/* on mobile, center product cat title */
@media screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-title {
    text-align: center; /* was: left */
    padding-top: 20px;
}}
/* on mobile, center product sub-cat title */
@media screen and (max-width: 575px) {
.tweak-products-category-title .products.collection-content-wrapper .nested-category-title.nested-category-title-padding {
    padding-bottom: 30px; /* was: 54 */
    margin-bottom: 0px; /* was: 37 */
    position: relative;
    display: inherit; /* was: flex */
    flex-direction: row;
}}

/* on mobile, adjust product sub-cat nav */
@media screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-children {
    padding-top: 15px; /* was: 44 */
    padding-bottom: 30px;
    margin-bottom: 0;
    flex-wrap: wrap; /* was: nowrap */
    overflow-x: scroll;
    justify-content: center; /* was: start */
}}

 

Edited by birdmade
  • 4 months later...
Posted

Hi there, would someone be able to share a code for stacking the mobile categories menu? I see you got it to work on your site Simon. The code shared by birdmade is not working for me.

Gratefully, Kelly

Posted
On 8/13/2021 at 2:12 AM, resonancemktg said:

Hi there, would someone be able to share a code for stacking the mobile categories menu? I see you got it to work on your site Simon. The code shared by birdmade is not working for me.

Gratefully, Kelly

Hi. Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 5 months later...
Posted
On 8/12/2021 at 2:12 PM, resonancemktg said:

would someone be able to share a code for stacking the mobile categories menu?

Hi, a simplified solution is to paste the following in your custom CSS section:

@media screen and (max-width: 575px)
{
.products.collection-content-wrapper .nested-category-children {
  flex-wrap: wrap; 
  justify-content: center;
  }
}

Hope this helps!

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.