Center a Single Product

Site URL: https://silver-hyperboloid-kt5p.squarespace.com/config/pages/6071f4446c0d160d0caa0909

I have a single product on a product page. How do I center it? 

Hi. Can you share link to product page?

/config is admin url

Yes! Does this work? 

https://silver-hyperboloid-kt5p.squarespace.com/config/ 

https://silver-hyperboloid-kt5p.squarespace.com/store-1-1 

Please set up a site-wide password.

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.

We can then take a look at your issue.

Ooops, sorry about that. 

PW: Testsite123

Password doesn't work.

Sorry

PW: TestSite123

You could go with one giant product.

<style>

  @media screen and ( min-width : 768px) {
  
    .products.collection-content-wrapper .list-grid {
    
      grid-template-columns : 1fr ;
      
      }
    }
    
  </style>

Or you can keep the size it is and center it.

<style>

  .products.collection-content-wrapper .grid-item {
  
    grid-column: 2 / 3;
    
    }
    
  </style>

Add one of the code to Store Settings > Advanced > Page Header Code Injection for the store page.

This is for v7.1.

Let us know how it goes.

Boom, that solved it! Thanks so much! 

I do have another issue I'm running into. 

On the product details page - I am unable to turn on the hover zoom feature. I've selected the paintbrush in the top right, gone to products, selected "hover action:zoom" but doesn't zoom in on the image when I hover. I've also tried the click action zoom and that rarely works as well. 

Any solves here?

https://silver-hyperboloid-kt5p.squarespace.com/config/settings/advanced 

No joy on the zoom. Oddly it seemed to work just fine on my test site. I have 3 thumbs displayed. The first two I clicked and hover/zoomed away no problem.

The third one would not zoom for about a minute of testing and digging into the code. Then started zooming all of a sudden.

Hey! I'm hoping to add different sku images for different variants. So I have one shirt in 3 sizes. I'd like use an image of each size for my fulfillment center. When I add them to different variants though, it shows that image publicly on the product image. 

Is there a way to have a photo for each sku that doesn't show up publicly but can be referenced for shipping/fulfillment? 

On 4/20/2021 at 6:52 PM, creedon said:

You could go with one giant product.

 

<style>

  @media screen and ( min-width : 768px) {
  
    .products.collection-content-wrapper .list-grid {
    
      grid-template-columns : 1fr ;
      
      }
    }
    
  </style>

Or you can keep the size it is and center it.

 

<style>

  .products-list [data-item-id="6074dd06f9ef2673cf0d443f"] {
  
    grid-column: 2 / 3;
    
    }
    
  </style>

Add one of the code to Store Settings > Advanced > Page Header Code Injection for the store page.

This is for v7.1.

Let us know how it goes.

Hi, do you have this same code for 7.0?

@cfrost

Please post the URL for the a product on your site.

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.

We can then take a look at your issue.

On 4/20/2021 at 7:52 PM, creedon said:

You could go with one giant product.

 

<style>

  @media screen and ( min-width : 768px) {
  
    .products.collection-content-wrapper .list-grid {
    
      grid-template-columns : 1fr ;
      
      }
    }
    
  </style>

Or you can keep the size it is and center it.

 

<style>

  .products-list [data-item-id="6074dd06f9ef2673cf0d443f"] {
  
    grid-column: 2 / 3;
    
    }
    
  </style>

Add one of the code to Store Settings > Advanced > Page Header Code Injection for the store page.

This is for v7.1.

Let us know how it goes.

The first code seems to work fine but not the second one.