Anyone know how to hide all product store thumbnails but keep product details pages live for 7.1?

Looking to hide my product page thumbnails but keep product detail pages still active in 7.1.

This is because I'm using a gallery block to 'showcase' the products and adding the product details page URL to the gallery images instead.

So, I just want to use the product details pages but not have the thumbnails show on my store page. Any idea if possible/advice on code I can use for this?

Hi, that can be done with a little CSS
what's the direct link to your product page you're referring to?

 

Amazing!

Hello, try:

.grid-image
{display: none !important}

this should do it

PS:
apply it site-wide: DESIGN > CUSTOM CSS
apply it only to this page > PAGE SETTINGS (gear wheel icon) and ADVANCED > HEADER CODE INJECTION
and then you'd need to add <style> CSS </style>

SO helpful, thank you! It worked to remove the gallery thumbnails. The section block remains as a blank. Any thoughts on removing, or reducing space here? 

That's a bit more complex. You could hire somebody through the marketplace:
https://www.squarespace.com/designer/home

Ok np, thanks for the help!

Do you still need help on this?

No I don't, thank you! 

On 2/17/2021 at 1:41 AM, ArminB said:

Hello, try:

.grid-image
{display: none !important}

this should do it

@ArminB I've been trying to implement this, but every time I add the code to either the main custom CSS or the shop's individual code, all my products disappear. Do you have any clue as to what could be causing this?

Site: https://tunny-bobcat-bnz8.squarespace.com/currexample2
Password: arminbhelp

36 minutes ago, sambatista said:

I've been trying to implement this, but every time I add the code to either the main custom CSS or the shop's individual code, all my products disappear. Do you have any clue as to what could be causing this?

The code is designed to do exactly that. Hide the product grid images.

If you don't want to hide the product grid images what effect are you trying to achieve?

8 minutes ago, creedon said:

The code is designed to do exactly that. Hide the product grid.

If you don't want to hide the product grid what effect are you trying to achieve?

What was mentioned above: hide only the thumbnails but leave the product name and price.

@sambatista

Is this what you are seeing when you apply the code?

@creedon

Negative. I see nothing. But I can tell there's something there because my cursor changes when I hover over the different areas where the products would be.

@sambatista

I just looked at your site and I see the symptom of the issue. If you could leave the code in place while I investigate, that would be grand!

@sambatista

It appears SS has changed how the backend works so the previous code no longer works.

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

<style>

  /*
  
    begin store product grid images hide
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .products.collection-content-wrapper .grid-item {
    
      opacity : 1;
      
      }
      
    .products.collection-content-wrapper .list-grid .grid-item .grid-image {
    
      display : none;
      
      }
      
    /* end store product grid images hide */
    
  </style>

Let us know how it goes.

24 minutes ago, creedon said:

@sambatista

It appears SS has changed how the backend works so the previous code no longer works.

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

<style>

  /*
  
    begin store product grid images hide
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .products.collection-content-wrapper .grid-item {
    
      opacity : 1;
      
      }
      
    .products.collection-content-wrapper .list-grid .grid-item .grid-image {
    
      display : none;
      
      }
      
    /* end store product grid images hide */
    
  </style>

Let us know how it goes.

Creedon, you're a genius my friend! I can't thank you enough!

One thing though: would it be possible to make it only "clickable" where the text appears, instead of the whole "cell" within the grid? See below screenshot to understand what I mean.

1 hour ago, sambatista said:

One thing though: would it be possible to make it only "clickable" where the text appears, instead of the whole "cell" within the grid?

That appears to be a bit trickier. SS has set up the link as a kind of overlay that covers the whole cell. I don't see a totally clean way with CSS only to get your desired effect.

You could try something like the following to get close but I don't know how responsive it would be.

<style>

  .products.collection-content-wrapper .grid-item-link {
  
    width : 8em;
    
    }
    
  </style>

This is changing the width of the link overlay to about 8 characters wide.

@creedon

I appreciate your hotfix! I don't know much JavaScript myself, but I'll try to play around with it and see what I can accomplish. Thank you so much!