Jump to content

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

Recommended Posts

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?

Edited by POA
Link to comment
  • 3 weeks later...
On 2/17/2021 at 1:41 AM, ArminB said:

Hello, try:

.grid-image
{display: none !important}

this should do it 2018607065_Bildschirmfoto2021-02-17um07_40_02.thumb.png.d93246e0c0f34296a8e5a2934d846010.png

@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

Link to comment
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?

Edited by creedon

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

@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.

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
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.

image.thumb.png.b38de02bc169dee8b090a6d1932a2901.png

Link to comment
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.

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.