Jump to content

Hide ALL from store page

Go to solution Solved by paul2009,

Recommended Posts

7 hours ago, ziney said:

I would like to hide the All Category on top of my [Product List] Page

It should be possible to hide it by adding the following to Design > Custom CSS:

.ProductList-filter-list-item--all {
  display: none!important;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • Solution
57 minutes ago, ziney said:

Not the text "ALL" is hidden but the products still appear. Do you know how to hide these so that the first products to appear are the digital singles please?

I am not sure whether I understood your initial question. Did you want to hide the the word "ALL" from the product category filter, or did you want to display a different category of products? 

If you wanted to hide the "ALL" option from the the product category filter, the CSS that I provided will do this.

If you would prefer the page to filter the products by a category when the page loads, you can do this by changing the link within the site navigation. To do this:

  1. Go to the PAGES panel.
  2. Drag the default 'Store' page to the NOT LINKED section.
  3. Click the "+" button beside the PRIMARY or MAIN NAVIGATION (depending on your template) and select 'Link' to create a new link. 
  4. Give the new link the name "Store" and the URL "/store?category=Digital+Singles".

           image.png.18e86259bd0f914335aec9a3f7831f80.png

After saving this new link, clicking on it should show the Digital Singles category.

Let me know how you get on.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<!--

  begin reorder store categories
  
  Version     : 0.3.6
  
  SS Version  : 7.0
  
  Template    : Polaris (Brine template family)
  
  Notes       : the code is comprised of a number style tags. all of them are
                needed for the full effect to work
                
                code generated on 04/17/2023 12:28:00 AM by my magic table < ? >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /* rulesets just for reordering categories */
    
    .ProductList-filter-list-item:nth-child( 2 ) { /* DIGITAL SINGLES */
    
      -webkit-box-ordinal-group : 3;
      -ms-flex-order : 2;
      order : 2;
      
      }
      
    .ProductList-filter-list-item:nth-child( 3 ) { /* MARKETING */
    
      -webkit-box-ordinal-group : 5;
      -ms-flex-order : 4;
      order : 4;
      
      }
      
    .ProductList-filter-list-item:nth-child( 4 ) { /* MERCH */
    
      -webkit-box-ordinal-group : 4;
      -ms-flex-order : 3;
      order : 3;
      
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets just for styling the store categories
      
      keep in mind the styling applies to categories before they are reordered
      so use their natural order number
      
      */
      
    @media only screen and ( min-width : 641px ) {
    
      /* desktop */
      
      /*
      
        by default the last category has no margin on the right. when you apply
        the reordering CSS then that no margin comes along for the ride. we need
        to get that margin back in there
        
        */
        
      .ProductList-filter-list-item:last-child {
      
        margin-right : 25px;
        
        }
        
      /*
      
        by extension we now want to remove the right margin from whichever
        element is going to be last after reordering
        
        */
        
      .ProductList-filter-list-item:nth-child( 3 ) {
      
        margin-right : 0;
        
        }
        
      }
      
    </style>
    
  <style>
  
    /*
    
      rulesets to define the base of this effect
      
      no user serviceable parts below
      
      */
      
    /* desktop */
    
    @media only screen and ( min-width : 641px ) {
    
      .ProductList-filter-list {
      
        display : flex;
        
        justify-content : center;
        
        }
        
      }
      
    /* mobile */
    
    @media only screen and ( max-width : 640px ) {
    
      .ProductList-filter-list {
      
        display : flex;
        flex-direction : column;
        
        }
        
      }
      
    </style>
    
  <!-- end reorder store categories -->

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.