Jump to content

Change Aspect Ratio for One Store, But Not Others

Recommended Posts

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

Link to comment

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.

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

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!

 

Link to comment
  • 1 month later...
6 hours ago, jdillagodzilla said:

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.

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

Link to comment
  • 1 month later...
  • 3 weeks later...

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.

Link to comment
  • 1 year later...

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?

Edited by Annaofthemeadow
Link to comment
34 minutes ago, 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 answers specific to their situations.

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

 

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

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.