Sibylle_Zurich Posted January 7 Share Posted January 7 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
Solution tuanphan Posted January 8 Solution Share Posted January 8 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
Sibylle_Zurich Posted January 10 Author Share Posted January 10 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
tuanphan Posted January 15 Share Posted January 15 #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
Sibylle_Zurich Posted January 20 Author Share Posted January 20 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 Link to comment
tuanphan Posted January 26 Share Posted January 26 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; } 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
Sibylle_Zurich Posted January 27 Author Share Posted January 27 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/shopPW: nuvu2022 Thanks and best regards Sibylle Link to comment
tuanphan Posted January 28 Share Posted January 28 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/shopPW: 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
Sibylle_Zurich Posted January 30 Author Share Posted January 30 On 1/28/2023 at 10:26 AM, tuanphan said: Use this CSS code h2.nested-category-title:after { display: none; } Thank you @tuanphan!!! Link to comment
MightyMouseofGod Posted June 10 Share Posted June 10 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 Link to comment
tuanphan Posted June 11 Share Posted June 11 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; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment