tmoneygetpaid Posted February 18, 2021 Share Posted February 18, 2021 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
creedon Posted February 18, 2021 Share Posted February 18, 2021 (edited) 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 January 24 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
tmoneygetpaid Posted February 20, 2021 Author Share Posted February 20, 2021 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
creedon Posted February 20, 2021 Share Posted February 20, 2021 Please post the URL of the store page where you installed the code. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
tmoneygetpaid Posted February 21, 2021 Author Share Posted February 21, 2021 (edited) 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! Edited February 21, 2021 by tmoneygetpaid creedon 1 Link to comment
jdillagodzilla Posted March 30, 2021 Share Posted March 30, 2021 @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 Link to comment
creedon Posted March 31, 2021 Share Posted March 31, 2021 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
jdillagodzilla Posted April 1, 2021 Share Posted April 1, 2021 @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 🙂 creedon 1 Link to comment
TCiy Posted May 13, 2021 Share Posted May 13, 2021 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 Link to comment
creedon Posted May 13, 2021 Share Posted May 13, 2021 @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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
TCiy Posted May 29, 2021 Share Posted May 29, 2021 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
Annaofthemeadow Posted November 19, 2022 Share Posted November 19, 2022 (edited) 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 November 19, 2022 by Annaofthemeadow Link to comment
creedon Posted November 19, 2022 Share Posted November 19, 2022 (edited) 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. Edited March 13 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
Annaofthemeadow Posted November 19, 2022 Share Posted November 19, 2022 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 Link to comment
creedon Posted November 19, 2022 Share Posted November 19, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment