Change Aspect Ratio for One Store, But Not Others

Site URL: http://www.electricalaudio.com

We are creating a list of equipment, and have separated the categories into different stores.

For one store, where the items are typically vertical, 2:3 aspect ratio is ideal, for another ultra-widescreen would be best, but for another two or three standard 4:3 would be ideal.

If I change the image aspect ratio on one store, it changes across all stores.

I think I can do this with some html injection on the store's pages, and I think the class I need to operate on is "ProductItem-gallery-slides, I'm just not sure what property/ value to change.

Any help is appreciated.

The stores are electricalaudio.com/pedals-1 (2:3) and electricalaudio.com/instruments-1 (4:3).

I think the first step would be to choose one ratio that would cover the most pages and stick with that. So it sounds like the 4:3 ratio would be the candidate. Then from there it is a matter of using some Javascript to manipulate the classes of the stores you want to be different.

Please see Store Page Image Aspect Ratio Change.

Let us know how it goes.

Thanks for your reply!!!

So I pasted that code into the advanced / code injection / header, and then into one of the store's pages whose store I want to use a different aspect ratio than the default (you're right- I think 4:3 would be the default, so I pasted this into the store page for one I wanted to be 2:3).

We are running 7.1.

What did I miss?

Thanks again!

Please post the URL of the store page where you installed the code.

I saw I was missing a </style> line in a bit of code preceding, when I clicked an empty line it reappeared and the page is displaying properly now.

Thank you so much!

@creedon I'm on 7.1 and I can't get it to work. 

Would be very grateful if you can take a look.

Site password: brineintopedro

I'd like the default to be 4:3 then the second store 3:4.

Default Store (4:3): https://tuna-ladybug-3hgy.squarespace.com/shop

2nd Store (3:4) https://tuna-ladybug-3hgy.squarespace.com/bundle

6 hours ago, jdillagodzilla said:

Default Store (4:3): https://tuna-ladybug-3hgy.squarespace.com/shop

The issue is that this store is set to 3:4 not 4:3.

Also for the 2nd store you need to change...

      const productsPageAspectRatio = '2:3';
      
      const productDetailPageAspectRatio = '2:3';

...to...

      const productsPageAspectRatio = '3:4';
      
      const productDetailPageAspectRatio = '3:4';

Let us know how it goes.

@creedon worked perfectly! Wasn't sure exactly if I needed to change the page header  code based on the above directions. I changed to 4:3 and got the result I was looking for. thank you 🙂

Hi @creedon Thanks so much for making this code available! Just wondering whether there is a way to enable this in the 'quick view' settings as well? Thanks

@TriangleCreative

The short answer is not easily. Unfortunately it appears SS isn't using classes to control the aspect ratio on the QV. So it isn't a matter of some quick class switching to make the effect happen.

That's a shame! Everything else is working perfectly but I am still trying to find a solution to this... The aspect ratios need to be correct ideally as the site is selling photography prints at different sizes so this may cause confusion to the customer.

Hi @creedon 

I see you have helped multiple people here! that is so awesome so thank you for your help.

I want to have different aspect ratios in my different shops. the 1st would be a 2:3. then the second shop I want to have the 4:3. I set both to 2:3 and then tried adding code into the CSS of the site and into the header of the page. I'm confused on where to put it. Right now it is in the page header. I added all the script you gave. 

I'm trying to change the aspect ratio of the items in shop>stickers from 2:3 to 4:3

-I can post my page, if youre willing to give it a look.

minnow-vibraphone-eh2c.squarespace.com

what am I doing wrong?

On 11/19/2022 at 1:20 PM, Annaofthemeadow said:

what am I doing wrong?

It appears you have not followed the instructions as stated in my Change Default Image Aspect Ratios for Store Page code cited in my February 18, 2021 post earlier in this thread.

The other bits and bobs that I've posted as answers to others questions is not the full code but are answers specific to their situations.

I see. this is my first exposure to coding. I have seen your instructions and followed them in the best way I can interpret them! I'd be happy to send a $donation for your support. I have NO idea what im doing but im doing my best to learn! ive been watching and working at this for a few hours now 

51 minutes ago, Annaofthemeadow said:

I have seen your instructions and followed them in the best way I can interpret them!

It appears you've not done step two.

Quote

Add code from file change default image aspect ratios for store page.html to Store Settings > Advanced > Page Header Code Injection for the store page.

On 2/18/2021 at 5:58 PM, creedon said:

I think the first step would be to choose one ratio that would cover the most pages and stick with that. So it sounds like the 4:3 ratio would be the candidate. Then from there it is a matter of using some Javascript to manipulate the classes of the stores you want to be different.

Please see Change Default Image Aspect Ratios for Store Page.

Let us know how it goes.

@creedon do you happen to have a script for 7.0 sites?

3 hours ago, tom3 said:

do you happen to have a script for 7.0 sites?

I do not. What template are you using for your v7.0 site?

Thanks for the quick reply. It's Marta, part of the Brine Family.

I have updated my cited code in my February 18, 2021 post.

From the changes.

• support v7.0 Brine template family

Let us know how it goes.

@tom3

@creedon that did it! Thanks so much for adding this.