Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Thumbnail size on store page


SassyFox

Recommended Posts

  • 10 months later...

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!

image1.png

image2.png

image3.png

Link to comment

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

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

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?

Screen Shot 2021-07-13 at 12.39.06 PM.png

Link to comment

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.

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

Link to comment

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?

Link to comment
  • 1 month later...

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!

Link to comment

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

 

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