How to set different image formats for different store pages

Site URL: https://www.bethanykohrt.com/

Hi there,

I would like to have different image formats for different store pages, meaning all images in one store 1:1 and all images in another store page 4:3. Currently I have to have one format across the whole website.

Any suggestions please?

Thanks in advance!

Beth

On 5/11/2022 at 8:17 PM, BethTheArtist said:

Site URL: https://www.bethanykohrt.com/

Hi there,

I would like to have different image formats for different store pages, meaning all images in one store 1:1 and all images in another store page 4:3. Currently I have to have one format across the whole website.

Any suggestions please?

Thanks in advance!

Beth

You can share link to page where you want to set 4:3, we can take a look

Here's the page I want to set to 4:3. Thanks

https://leopard-jaguar-hw9f.squarespace.com/2022-i-died-for-beauty 

On 5/4/2022 at 9:32 AM, sarahcreates said:

On 5/11/2022 at 9:17 AM, BethTheArtist said:

Site URL: https://www.bethanykohrt.com/

Hi there,

I would like to have different image formats for different store pages, meaning all images in one store 1:1 and all images in another store page 4:3. Currently I have to have one format across the whole website.

Any suggestions please?

Thanks in advance!

Beth

If you use Summary Blocks you can adjust the image sizes to what you want but then there are other limitations you might hit with Summary Blocks such as the max products of 30. 

On 5/13/2022 at 4:27 PM, BethTheArtist said:

Here's the page I want to set to 4:3. Thanks

https://leopard-jaguar-hw9f.squarespace.com/2022-i-died-for-beauty 

Hi,

I see this page already 4:3 ratio?

Hi @tuanphan yes and it has therefore changed all other stores on my website to the 4:3 ratio. I want almost all of them 1:1 but now and again I need a different ratio (as in this case) and want to be able to change some stores but not all. Hope that makes sense. 

I have had to revert it back to 1:1 as it has messed up all other live stores on my site.

Thanks so much.

Beth

On 5/13/2022 at 1:18 PM, Donna_Vincent said:

 

Thank you - this creates a different layout to all other stores on my site, doesn't it? What I would like is a whole product page set to 4:3 images rather than a separate block within a section and all other store pages set to 1:1 but otherwise identical in layout and design. Unless I have misunderstood. Thanks anyway. B

10 hours ago, BethTheArtist said:

Thank you - this creates a different layout to all other stores on my site, doesn't it? What I would like is a whole product page set to 4:3 images rather than a separate block within a section and all other store pages set to 1:1 but otherwise identical in layout and design. Unless I have misunderstood. Thanks anyway. B

Not necessarily.  It would give you the option to change which store you want the 4:3 photos and then you can show the 1:1 photos for the other stores.   You can customize the summary block and all that you are showing is the title of the painting.  You can duplicate the page that you want the 4:3 photos, add the summary block, set it up with the photo and title to see if it would work for you.

Please see the following.

On 5/15/2022 at 8:15 AM, tuanphan said:

Hi,

I see this page already 4:3 ratio?

On 5/13/2022 at 1:18 PM, Donna_Vincent said:

 

Hi @creedon Thank you - I have pasted the code into Settings > Advanced > Code Injection > HEADER but it has changed it across the whole site again. I am not sure what I am doing wrong? Thanks so much.

10 hours ago, BethTheArtist said:

I have pasted the code into Settings > Advanced > Code Injection > HEADER but it has changed it across the whole site again.

If you put all the code in that location it will affect the whole site.

You need to follow the second step for each individual Store page you want to change.

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.

This is how the store looks before my code runs.

And after.

Let us know how it goes.

@creedon Hi there, thanks very much for your reply. I have found the location for each individual store (Store Settings/Advanced/Page Header Code Injection), thank you for that, but I am just not sure which code applies, I thought maybe this one but isn't working? Any help gratefully received! Apologies for total lack of coding basics :-))

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

The code you posted is not the whole code. You need to follow the instructions and install each piece of code where indicated. Then once the code is installed you can set those two lines in the code as you show above. That tells the code what aspect ratio to use.

Thanks @creedon, sadly I don't understand what you mean but I thank you for your time anyway. I have read previous posts on the subject and copied and pasted both into the locations described in the link but clearly I haven't done it correctly. I will reach out to Squarespace and see if they can help.

Have a good day.

Beth

@Donna_VincentThank you that's helpful. For now, I would ideally like to do it the way I had originally asked about but this gives me good ideas for other pages. Thanks so much! Beth

Hi @creedon

How are you?

Following this thread, I'm hoping to make similar edits to individual stores only it's regarding products per row.

Is it possible to apply code to allow one store to display 2 x products per row, another store display 3 x products per row and the third store to display 4 x products per row?

Thanks for your help,

Hannah

9 hours ago, hannahnowlan said:

Is it possible to apply code to allow one store to display 2 x products per row, another store display 3 x products per row and the third store to display 4 x products per row?

Please see the following.

Let us know how it goes.

Hi @creedon thanks for this!
I ended up using a css tag 'hidecart' for individual products instead 🙂

I have another question for you though 🙂 

For design reasons I've hidden my site header.
However, this also hides the store-front "cart" icon.
Is there a way to move the cart icon into the store-page instead? 
Ideally, at the base of the page where it says 'Scape Catalogue' and the products begin.

URL: landerse.au/scape 

Lastly, I'm also using code to make all font in mobile view centre.
Except it only seems to be working for paragraph text, not headings or buttons, would you have any code to adjust everything in mobile view to be centre?

I'm using the following code but it doesn't seem to be targeting everything in mobile view.
Particularly in individual products the item title, price and button is sitting right-aligned.

@media only screen and (max-width:650px){#footer-sections p {text-align:center !important;}}

/* accordion on mobile */
@media screen and (max-width:650px) {
span.accordion-item__title {
    text-align: center !important;}
.accordion-item__description * {
    text-align: center !important;}}

@media screen and (max-width:650px) {
p {text-align: center !important;}}

@media screen and (max-width:650px) { newsletter-block .newsletter-form-field-element::placeholder {
  text-align: center !important;}}

@media screen and (max-width:650px) {
.newsletter-block .newsletter-form-fields-wrapper *, footer.sections .newsletter-form input, footer.sections .newsletter-form input::placeholder {
    text-align: center !important;}
.newsletter-block .newsletter-form-wrapper--alignRight .newsletter-form-field-wrapper {width: 100% !important;}
.newsletter-form-body {
    text-align: center;}}

Thanks for your help,

Hannah

2 hours ago, hannahnowlan said:

Is there a way to move the cart icon into the store-page instead?

Possibly, but I don't think this is an easy one. There are eight different cart icons in the source. Moving a cart icon out of the header seems to destroy the styling of the icon. I assume the CSS for it expects it to be in the header. That could probably be reproduced. Code would need to deal with list and details versions of store pages. On the upside, moving a cart icon doesn't seem to kill the SS code that updates the cart count.

I know of no code that does what you want.

I don't have an answer for any of the other issues you mention.

8 hours ago, hannahnowlan said:

For design reasons I've hidden my site header. However, this also hides the store-front "cart" icon.
Is there a way to move the cart icon into the store-page instead? 

Although the cart icon displays in the site header by default, the other option is for the cart icon to float at the bottom of the page when someone adds a product to their cart. To use this option:

1. Click EDIT in the top-left corner of your site preview.
2. Hover over the header and click EDIT SITE HEADER.
3. Click ADD ELEMENTS.
4. Toggle Cart to off.
5. Click EXIT and then SAVE to close the editor.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi @paul2009

THANKS! This Cart hover is a great solution - it gives access to the cart once an item is added, this is great.

Any ideas on how to centre-align all text variations in storefront mobile view?

Thanks for your help too @creedon really appreciate both of your assistance.

8 hours ago, hannahnowlan said:

Any ideas on how to centre-align all text variations in storefront mobile view?

@hannahnowlan Please bear in mind that if you have paragraphs with centered text, it may be difficult for some people with reading disabilities (such as dyslexia) or low vision to track sentences to the following line when it wraps. Centered text can also create uneven line lengths, which can be distracting and lead to a less comfortable reading experience.