Jump to content

How to hide all products on main shop page not only the ALL hyperlink

Recommended Posts

Site URL: https://www.eightysixtuned.com/shop

Hello all,

Could one assist with a way to prevent showing of all products on the main store page bottom.  I'm looking to require the customer to drill down through the categories or sections to view individual product groupings rather than be able to view all products listed individually on the main store page.

Not strictly talking about the ALL category which can be removed using page settings as a filter, but how to remove the display of each individual product on the lower portion of the shop main page.

Thank you!

Edited by blitz
Link to comment

I meant to take a look into this after suggesting blitz post this topic in a new thread.

Thanks to tuanphan for reminding me about this topic.

Please see Store Category All List Hide.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...
On 1/16/2021 at 7:50 PM, creedon said:

I meant to take a look into this after suggesting blitz post this topic in a new thread.

Thanks to tuanphan for reminding me about this topic.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.


<style>

  /* hide products on main store page that has categories */
  
  .nested-category-children ~ .products-flex-container {
  
    display: none !important;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

It worked! Thank you so much!

Link to comment
  • 3 months later...

@SaltedDecor

We'll have to take a different tack as it looks like there isn't a CSS only way to do this.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  body:not( [data-store-category] ) .ProductList-grid {
  
    display : none;
    
    }
    
  </style>

Follow the instructions in the following post.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@SaltedDecor

Just tested the code again and it works a treat here locally.

If you're game. Add the code as instructed above minus the style tag.

<style>

  body:not( [data-store-category] ) .ProductList-grid {
  
    display : none;
    
    }
    
  </style>

This is the code that is actually hiding the products. Without it installed, I can check that the other code is working as expected and it won't effect the display of the products.

Let me when you've done that.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@SaltedDecor

That code is working as expected. And when I add the style tag code. The pages work as expected.

676919867_ScreenShot2021-05-10at12_16_16PM.png.1ca9b83848325c6cc5ccfb83790a7f1f.png

 

1940470710_ScreenShot2021-05-10at12_09_28PM.thumb.png.df42edc994b60c1723b4c341bb878daa.png

 

Quote

I forgot to mention I want to default my store to the category "textiles"

Let's see if we can get this issue solved before moving onto the next.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 weeks later...

Hey @creedon

I hope that you can help me with a tricky request.

I'm looking to add a new summery section in the shop page which sits above the shop section. The summery section will display the 3 products that are available. The shop section below will display all of the sold out items.

For the summery block, I have two options which would be to either pull from an 'available' tag or pull from a 'featured' tag. I have managed this far but I would really need to hide the available products featured in the summery section, from the shop section below... I hope this makes sense?

Any help would be hugely appreciated.

https://cbhd-dev-9ac7.squarespace.com/
JAN21PW

Thank you 🙂

Link to comment

Now that I see I think I have a grasp. To summarize you want to hide items that are not sold from the product grid.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>
  
  .grid-item:not( .sold-out ) {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
15 hours ago, creedon said:

Now that I see I think I have a grasp. To summarize you want to hide items that are not sold from the product grid.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.


<style>
  
  .grid-item:not( .sold-out ) {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

You sir, are a genius - this worked perfectly.

Thank you 🙂

Link to comment
  • 4 months later...

I have a similar issue - I want to hide all the products on the Store page only and display all products in the category and sub category pages. For my site, the code below hides products on the Store page and the second level category pages. The third level category pages work fine with products displayed.
(Thanks Creedon - and also Tuan Phan!)

Is it possible to hide only the products on the Store page and display all products on all category pages?

Thanks in advance for any advice 🙂

<style>

  /* hide products on main store page that has categories */
  
  .nested-category-children ~ .products-flex-container {
  
    display: none !important;
    
    }
    
  </style>

 

Link to comment

@Wilke

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.