Thumbnail size on store page

Hello, how can I change the size of the thumbnails for each product on the main store page?

Thank-you

Please provide the URL for your site so we can take a look at it.

I would love to know the answer for this as well. Have looked all over but couldn't find a solution. The URL for my site is https://meeting-house-fabric.squarespace.com, pw: fabric.

Please see attached images. I'd like to change the look and feel of the store page's thumbnails in image 1 (which can be found at https://meeting-house-fabric.squarespace.com/shop/fabric/country-chic/strawberries-and-rhubarb) to look more like the thumbnails in image 2 (https://meeting-house-fabric.squarespace.com/fabric).

In other words, smaller thumbs and 6 across. Image 1 is the automatic output when I gather all the images for that particular category. Image 2 is a gallery I created on another page. 

The Edit Section popup editor (image 3) for the particular page section for image 1 gives me only limited control over the thumbnail size, and only allows there to be a maximum of 4 columns. 

Is there code that could allow me to have 6 thumbnails across, with smaller thumbnails?

Thanks so much for any help you can offer!

@watts-design

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

<style>

  /*
  
    begin change store product grid column number
    
    Version         : 0.1d0
    
    SS Version      : 7.1
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .products.collection-content-wrapper .list-grid {
    
      --twc-columns : [enter number of columns here];
      
      }
      
    /* do not change anything below, there be the borg here */
    
    .products.collection-content-wrapper .list-grid {
    
      grid-template-columns : repeat( var( --twc-columns ), minmax( 0, 1fr ) );
      
      }
      
    /* end change store product grid column number */
    
  </style>

Let us know how it goes.

Hey Thomas...thanks so much for your help! I believe I entered your code as you directed but it didn't work. Just to be sure I did it correctly, attached is a screenshot of the page header code injection for my store settings page. As you can see, the only thing I changed as directed was the number of columns to 6. Did I do it correctly?

It appears you have nested the style tag in a script tag. That won't work.

<script>
   $(function() {
     $("<a class='outline_btn4' href='javascript:history.back()'>Back</a>").insertAfter(".ProductItem-nav-breadcrumb");        
   })<style>

  /*
  
    begin change store product grid column number
    
    Version         : 0.1d0
    
    SS Version      : 7.1
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .products.collection-content-wrapper .list-grid {
    
      --twc-columns : 6;
      
      }
      
    /* do not change anything below, there be the borg here */
    
    .products.collection-content-wrapper .list-grid {
    
      grid-template-columns : repeat( var( --twc-columns ), minmax( 0, 1fr ) );
      
      }
      
    /* end change store product grid column number */
    
  </style><script>Static.COOKIE_BANNER_CAPABLE = true;</script>

It should probably look more like.

<style>

  /*
  
    begin change store product grid column number
    
    Version         : 0.1d0
    
    SS Version      : 7.1
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .products.collection-content-wrapper .list-grid {
    
      --twc-columns : 6;
      
      }
      
    /* do not change anything below, there be the borg here */
    
    .products.collection-content-wrapper .list-grid {
    
      grid-template-columns : repeat( var( --twc-columns ), minmax( 0, 1fr ) );
      
      }
      
    /* end change store product grid column number */
    
  </style>

<script>

   $(function() {
     $("<a class='outline_btn4' href='javascript:history.back()'>Back</a>").insertAfter(".ProductItem-nav-breadcrumb");        
   })
  
  Static.COOKIE_BANNER_CAPABLE = true;
  
  </script>

Let us know how it goes.

Thanks so much, Creedon! Thing is, though, the code didn't work in my Store page code injection. It did work when I put it in Design / Custom CSS. I want it to work site-wide, and it looks good throughout the site, so I'm happy with it. But do you foresee an issue with me doing it that way?

1 hour ago, watts-design said:

But do you foresee an issue with me doing it that way?

If it's working I don't see a problem and if you want the effect site wide then Custom CSS is a good place for the code. Minus the style tag of course! 🙂

Hi @creedon,

Do you know how to change the store product grid column number in the 7.0 Brine template instead of the 7.1 platform?

Thanks!

@dhobman

Go to Design > Site Styles > Products: Layout > Item Per Row.

Let us know how it goes.

Hi @creedon - Thank you. Sorry, I should have clarified that. Is it possible to use CSS code to set that per Store in the Store Settings > Advanced > Page Header Code Injection as you did in 7.1 but instead in the 7.0 Brine template family? Thanks!

@dhobman

I don't see a way to get that done at least not without a fair amount of work. The two SS versions are building those tables in different ways. SS v7.0 is taking a more dynamic approach and building the CSS for the product grid on the fly. I'm not seeing a way to intervene once SS has picked up the number of columns set in the SS interface.

Hi @creedon - That's unfortunate, but thank you very much for your time on that.