Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment

#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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Bildschirmfoto 2023-01-20 um 22.20.19.png

Bildschirmfoto 2023-01-20 um 22.21.01.png

Link to comment
  • Solution
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

Bildschirmfoto 2023-01-20 um 22.20.19.png

Bildschirmfoto 2023-01-20 um 22.21.01.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.