Help with different aspect ratio of product images in e-commerce

Hi there

I am working on an online shop for fine art prints and want to show the products in their original aspect ratio. For example the product "Cristo" is a portrait image. Is there a way to assign different aspect ratios to different pages of the site without any images cutting off, and with still being able to use the slideshow option? The art prints are sold in portrait and landscape format.

https://nuvu-gallery.squarespace.com/
PW: nuvu2022

The old website was providing that, it is mandatory for my client. For example old website url: https://www.nuvu.ch/produkt-kategorie/staedte/

Many thanks for your help
Sibylle

On 1/8/2023 at 7:45 PM, tuanphan said:

Try adding to Design > Custom CSS

img.grid-item-image.grid-image-cover.loaded, img.ProductItem-gallery-slides-item-image, .grid-image-wrapper.has-hover-img>img {
	object-fit: contain !important;
}

 

Hi @tuanphan

Thank you for your help. It worked perfectly.
Can you please help me with the following questions as well?

1. At journal I would like to have an endless scroll over all blog posts and don't show the "load older entries" button. Any code for that?

2. In the shop product detail page, I would like to hide the quantity of products box (Anzahl). As our clients buy only one fine art print at a time, it is not needed and would save me some space. I don't mind showing it in the shopping cart.

3. I would like to remove the path above the filter in the shop. Now there is twice written "Alle". 

4. At "Referenzen" and "Journal" when clicking on the images for lightshow, the arrows are almost invisible. How can I make them black, like in the lightshow of the products in the shop?

Thank you so much and have a nice evening.
Sibylle

#1. Not possible. You will need a 3rd party plugin to achieve this.

#2. Possible. Hide for one product or all products?

If all products, add this to Design > Custom CSS

.product-quantity-input {
    display: none !important;
}

If one product, edit that product > Additional Info > Add a Code Block > Paste this code

<style>
  .product-quantity-input {
    display: none !important;
}
</style>

#3. Which element are you referring to?

#4. Add to Design > Custom CSS

.yui3-lightbox2 .sqs-lightbox-close, .yui3-lightbox2 .sqs-lightbox-previous, .yui3-lightbox2 .sqs-lightbox-next, .yui3-lightbox2 .sqs-lightbox-meta-trigger {
    color: black;
}

On 1/15/2023 at 2:15 AM, tuanphan said:

#1. Not possible. You will need a 3rd party plugin to achieve this.

#2. Possible. Hide for one product or all products?

If all products, add this to Design > Custom CSS

.product-quantity-input {
    display: none !important;
}

If one product, edit that product > Additional Info > Add a Code Block > Paste this code

<style>
  .product-quantity-input {
    display: none !important;
}
</style>

#3. Which element are you referring to?

#4. Add to Design > Custom CSS

.yui3-lightbox2 .sqs-lightbox-close, .yui3-lightbox2 .sqs-lightbox-previous, .yui3-lightbox2 .sqs-lightbox-next, .yui3-lightbox2 .sqs-lightbox-meta-trigger {
    color: black;
}

 

Thank you @tuanphan, this all helped me so much.

Regarding my question #4:
Please find an image attached. You can see that there is repeated many times "Alle". Is there any possibility, I could remove one of the two "Alle" in the filter list?

Thank you very much and best regards
Sibylle

On 1/21/2023 at 4:23 AM, Sibylle_Zurich said:

Thank you @tuanphan, this all helped me so much.

Regarding my question #4:
Please find an image attached. You can see that there is repeated many times "Alle". Is there any possibility, I could remove one of the two "Alle" in the filter list?

Thank you very much and best regards
Sibylle

Add to Design > Custom CSS

nav.nested-category-breadcrumb {
    display: none !important;
}

On 1/26/2023 at 1:52 PM, tuanphan said:

Add to Design > Custom CSS

nav.nested-category-breadcrumb {
    display: none !important;
}

 

Hi @tuanphan
Thank you so much. It worked perfectly. 🙂

Can you please help me as well with removing the line at the beginning of my shop page? (thin line below the headline)
https://nuvu-gallery.squarespace.com/shop
PW: nuvu2022

Thanks and best regards
Sibylle

11 hours ago, Sibylle_Zurich said:

Hi @tuanphan
Thank you so much. It worked perfectly. 🙂

Can you please help me as well with removing the line at the beginning of my shop page? (thin line below the headline)
https://nuvu-gallery.squarespace.com/shop
PW: nuvu2022

Thanks and best regards
Sibylle

Use this CSS code

h2.nested-category-title:after {
    display: none;
}

On 1/28/2023 at 10:26 AM, tuanphan said:

Use this CSS code

h2.nested-category-title:after {
    display: none;
}

 

Thank you @tuanphan!!!

On 1/8/2023 at 6:45 PM, tuanphan said:

Try adding to Design > Custom CSS

img.grid-item-image.grid-image-cover.loaded, img.ProductItem-gallery-slides-item-image, .grid-image-wrapper.has-hover-img>img {
	object-fit: contain !important;
}

 

I tried something similar to this in my test site and it worked on the desktop but not on mobile.

Site at https://whale-parsnip-3zzr.squarespace.com/shop
PWD origins

11 hours ago, MightyMouseofGod said:

I tried something similar to this in my test site and it worked on the desktop but not on mobile.

Site at https://whale-parsnip-3zzr.squarespace.com/shop
PWD origins

 

Try this code for mobile

img.grid-item-image.grid-image-cover {
    object-fit: contain !important;
}